上一篇文章說了註冊和下載等一些準備工作，現在大致介紹一下開發工具與程式碼結構

開發工具

（1）開啟“微信開發者工具”-- 掃描登入

登入後顯示建立“小程式專案”和“公眾號網頁專案”

（2）建立之前先在桌面建立一個專案資料夾,如demo（一定要是空的）

點選“小程式專案”（初次建立直接進入下圖，如果不是初次建立會出現已建立的專案，點選右下角“+”建立新專案）
輸入上一篇文章我們儲存的AppID（或者選擇測試號：小程式）
預設建立普通快速啟動模板

確定即建立了一個小程式專案，系統會自動生成一些必要的程式碼和檔案
下面是開發進入開發工具頁面

模擬器

沒啥好說了都是中文選項可以按照自己的習慣調節

程式碼結構目錄

建立一個小程式系統會幫助我們建立一些必要的檔案

• pages 存放頁面的資料夾
• index 入口
• index.js 頁面邏輯
• index.json 頁面配置 可有可無
• index.wxml 頁面結構
• index.wxss 頁面樣式表
• logs 日誌
• utils 工具類檔案
• util.js 將一些公共的程式碼抽離成為一個單獨的 js (utils.js)檔案，作為一個模組;
• app.js 小程式邏輯
• app.json 小程式公共設定
• app.wxss 小程式公共樣式表
• project.config.json 專案配置檔案

注：
（1）為了方便開發者減少配置項，描述頁面的四個檔案必須具有相同的路徑與檔名。
（2）小程式允許上傳的檔案格式

程式檔案格式： js、json、wxml、wxss
圖片格式：png、jpg、jpeg、gif、svg
資料格式：wxs、json
檔案個數：cer
音訊格式：mp3、aac、m4a、wav、m4a、silk
視訊格式：mp4

程式碼編輯區

進行相應檔案程式碼的編寫
其中頁面程式碼分四個檔案

wxml

• 理解為HTML，頁面的結構。但不是標籤，而是元件。
• 常見元件: view(塊級元素) test (行內元素) image input scollview (列表元件) canvas
• 支援模板匯入。

wxss

• 理解為Css，支援flex佈局，支援CSS3屬性。 很少考慮相容性.
• 支援@import匯入樣式檔案
• rpx支援根據螢幕寬度進行自適應json

js

• 就是不能直接操作document物件的js

json

• 頁面配置檔案
• 配置頁面標題內容和顏色。可設定選項很少。

偵錯程式

除錯工具

console ( 控制檯) 顯示錯誤資訊和列印變數的資訊等。
Sources (斷點除錯) 上面顯示了當前專案的所有指令碼檔案，下邊是一些log資訊、斷點除錯等等。
NetWork(網路請求) 與網路相關的資訊會在這裡顯示
Security 安全方法的東西
AppData 顯示當前專案顯示的具體資料、已載入的資料
Audits (體驗評分)小程式執行過程中實時檢查，分析出一些可能導致體驗不好的地方
Sensor 開發者可以在這裡選擇模擬地理位置，模擬移動裝置表現，用於除錯重力感應 API
Storage 官方的解釋是顯示當前專案的使用wx.setStorage或者wx.setStorageSync後的資料儲存情況。
Trace (效能分析) PC和Android連線同一網路，Android連線線至PC，開啟USB調式,Android微信中開啟效能監控面板，重啟微信開啟微信小程式 ,操作要收集資料的頁面後，匯出Trace資料
Wxml ( 可進行CSS除錯) 類似瀏覽器上CSS偵錯程式