開發和測試小程序,需要借助微信官方提供的微信Web開發者工具進行預覽和調試代碼,從下載安裝到使用,大致的流程如下:
1.下載安裝包
下載地址傳送門:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根據所需的操作系統版本進行下載即可

2.安裝微信Web開發者工具
下載后的安裝包,wechat_devtools,接近80M大小


3.申請小程序管理員賬號,獲取開發者AppID
申請賬號:可參考 https://developers.weixin.qq.com/miniprogram/dev/獲取AppID:小程序管理平台-->開發者設置-->開發者ID
該AppID將在微信Web開發者工具打開小程序項目時進行身份驗證用到

4.小程序管理員授權測試用的微信賬號
項目團隊中的不止一個人開發小程序時,如多個開發和測試成員,管理員可在小程序管理后台添加成員,並設置所需的權限管理入口:小程序管理后台-->用戶身份-->成員管理
具體可參考 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/role.html#%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD

5.通過已授權的微信掃描登錄開發者工具
首次打開微信Web開發者工具,彈出二維碼提示框,用以上授權過的微信進行掃描:

掃描之后,手機微信端需要確認登錄:

6.新建並導入項目(項目路徑+項目名稱+AppID)
根據開發和測試的具體需要,點擊【小程序項目】


導入小程序程序包的目錄路徑,填寫AppID(若程序包中有相關設置,此ID也可在導入程序目錄后自動填充)、項目名稱,然后點擊【確定】

7.預覽和調試小程序
微信Web開發者工具預覽小程序和調試代碼

除了在微信Web開發者工具可以使用預覽外,在其前已授權的手機微信端也可實現預覽效果
具體操作:點擊微信Web開發者工具右上角的【預覽】,工具提示“正在編譯JS文件”,稍等一會兒就可編譯完成並展示出二維碼,此時用已授權的微信掃描此二維碼(每次編譯的二維碼有效期大概20多min),即可在手機端微信上預覽小程序的實際效果
