5-微信小程序工具使用

1、概述：

爲了幫助開發者簡單和高效地開發和調試微信小程序，咱們在原有的公衆號網頁調試工具的基礎上，推出了全新的 微信開發者工具，集成了公衆號網頁調試和小程序調試兩種開發模式。

2、界面：

一、啓動頁 【1】登陸頁 在登陸頁，可使用微信掃碼登錄開發者工具，開發者工具將使用這個微信賬號的信息進行小程序的開發和調試。 【2】模式選擇 在登陸頁，可使用微信掃碼登錄開發者工具，開發者工具將使用這個微信賬號的信息進行小程序的開發和調試。 1.公衆號網頁調試。選擇公衆號網頁調試，將直接進入公衆號網頁項目調試界面，在地址欄輸入 URL，便可調試該網頁的微信受權以及微信 JS-SDK 功能。 2.小程序調試。選擇小程序調試，將進入小程序本地項目管理頁，能夠新建、刪除本地的項目，或者選擇進入已存在的本地項目。 【3】新建項目 1.須要一個小程序的 AppID；如沒有 AppID，能夠選擇申請使用測試號。 2.登陸的微信號須要是該 AppID 的開發者； 3.須要選擇一個空目錄，或者選擇的非空目錄下存在 app.json 或者 project.config.json。當選擇空目錄時，能夠選擇是否在該目錄下生成一個簡單的項目。 【4】多開項目 1.從項目選擇頁打開項目，處於項目窗口時能夠從菜單欄的項目 -> 查看全部項目打開項目選擇頁 2.從菜單欄的最近打開項目列表中打開的項目會重新窗口打開 3.新建項目 4.命令行或 HTTP 調用工具打開項目 【5】管理項目 對本地項目進行刪除和批量刪除 【6】主界面 開發者工具主界面，從上到下，從左到右，分別爲：菜單欄、工具欄、模擬器、編輯器、調試器 五大部分。

二、菜單欄 【1】微信web開發者工具：切換帳號、關於、檢查更新、開發者論壇、開發者文檔調試、更換開發模式、退出 【2】項目：新建項目、打開最近、查看全部項目、關閉當前項目 【3】文件：新建文件、保存、保存全部、關閉文件 【4】工具：編譯、刷新、編譯配置、先後臺切換、清楚緩存 【5】設置 三、工具欄 四、工具欄管理 五、模擬器 六、獨立窗口

七、設置 【1】外觀設置 【2】編輯設置 【3】代理設置 【4】通知設置

八、項目頁卡 【1】項目設置 《1》ES6 轉 ES5 《2》樣式補全 《3》壓縮代碼 《4》不校驗請求域名及 TLS 版本 《5》啓用多核心編譯 《6》域名信息 《7》騰訊雲狀態 【2】域名信息 【3】騰訊雲狀態

3、快捷鍵：

⌘ + B：編譯項目 ⌘ + R：焦點在編輯器外，編譯項目 ⌘ + Q：退出開發者工具 ⇧ + ⌘ + P：預覽代碼 ⇧ + ⌘ + U：上傳代碼

4、代碼編輯：

一、文件格式 二、文件支持 提供了 5 種文件的編輯： wxml、wxss、js、json、wxs 以及圖片文件的預覽 三、文件操做 新建頁面有兩種方式： 1.在目錄樹上右鍵，選擇新建 Page，將自動生成頁面所須要的 wxml、wxss、js、json 2.在 app.json 的 pages 字段，添加須要新建的頁面的路徑，將會自動生成該頁面所須要的文件 四、自動保存 五、實時預覽 六、自動補全 七、Git狀態展現 八、目錄樹 九、文件編輯 十、windows風格回車設置 十一、項目配置文件

5、小程序調試(模擬器、調試工具和小程序操做區)：

一、模擬器 二、自定義編譯 三、自定義預處理：自定義預處理命令 —》 默認預處理命令 —》 編譯/預覽/上傳 四、先後臺切換 五、調試工具(七大模塊): 【1】Wxml panel（用於幫助開發者開發 wxml 轉化後的界面） 【2】Sources panel（用於顯示當前項目的腳本文件） 【3】AppData panel（用於顯示當前項目運行時小程序 AppData 具體數據） 【4】Storage panel（用於顯示當前項目使用 wx.setStorage 或者 wx.setStorageSync 後的數據存儲狀況） 【5】Network panel（用於觀察和顯示 request 和 socket 的請求狀況） 【6】Console panel 《1》開發者能夠在此輸入和調試代碼 《2》小程序的錯誤輸出，會顯示在此處 【7】Sensor panel 《1》開發者能夠在這裏選擇模擬地理位置 《2》開發能夠在這裏模擬移動設備表現，用於調試重力感應 API 六、自定義數據上報 七、自動預覽 八、特殊場景調試 《1》掃碼接口 《2》微信支付 《3》啓動使用自定義參數 《4》進入場景值 《5》普通的轉發 《6》帶shareTicket的轉發 《7》預覽使用自定義編譯條件 《8》跳轉小程序調試支持 《9》調試小程序是否可以正確的跳轉 《10》調試被打開的小程序時候正確的接收參數 九、真機調試 《1》功能概述 《2》調試流程 《3》遠程調試窗口 《4》調試器 《5》信息視圖 《6》手機端展現 十、多帳號調試 《1》功能描述 《2》功能入口 《3》如何使用

6、nmp支持：

一、使用nmp包 【1】在小程序中執行命令安裝 npm 包 【2】點擊開發者工具中的菜單欄：工具 --> 構建 npm  【3】勾選「使用 npm 模塊」選項 【4】構建完成後便可使用 npm 包

二、發佈nmp包 【1】發佈小程序 npm 包的約束 《1》小程序 npm 包要求根目錄下必須有構建文件生成目錄（默認爲 miniprogram_dist 目錄），此目錄能夠經過在 package.json 文件中新增一個 miniprogram 字段來指定。 《2》小程序 npm 包裏只有構建文件生成目錄會被算入小程序包的佔用空間，上傳小程序代碼時也只會上傳該目錄的代碼。若是小程序 npm 包有一些測試、構建相關的代碼請放到構建文件生成目錄外。另外也可使用.npmignore文件來避免將一些非業務代碼文件發佈到 npm 中。 《3》測試、構建相關的依賴請放入 devDependencies 字段中避免被一塊兒打包到小程序包中。

【2】發佈其餘 npm 包的約束 《1》只支持純 js 包，不支持自定義組件。 《2》必須有入口文件，即須要保證 package.json 中的 main 字段是指向一個正確的入口，若是 package.json 中沒有 main 字段，則以 npm 包根目錄下的 index.js 做爲入口文件。 《3》測試、構建相關的依賴請放入 devDependencies 字段中避免被一塊兒打包到小程序包中，這一點和小程序 npm 包的要求相同。 《4》不支持依賴 json文件、c++ addon，不支持依賴 nodejs 的內置庫。 《5》使用 require 依賴的時候下列幾種方式也是不容許的。 《6》小程序環境比較特殊，一些全局變量（如 window 對象）和構造器（如 Function 構造器）是沒法使用的。

【3】發佈流程 《1》若是尚未 npm 賬號，能夠到 npm 官網註冊一個 npm 賬號 《2》在本地登陸 npm 賬號，在本地執行 《3》在已完成編寫的 npm 包根目錄下執行

【3】原理介紹 《1》首先 node_modules 目錄不會參與編譯、上傳和打包中，因此小程序想要使用 npm 包必須走一遍「構建 npm」的過程，在最外層的 node_modules 的同級目錄下會生成一個 miniprogram_npm 目錄，裏面會存放構建打包後的 npm 包，也就是小程序真正使用的 npm 包。 《2》構建打包分爲兩種：小程序 npm 包會直接拷貝構建文件生成目錄下的全部文件到 miniprogram_npm 中；其餘 npm 包則會從入口 js 文件開始走一遍依賴分析和打包過程（相似 webpack）。 《3》尋找 npm 包的過程和 npm 的實現相似，從依賴 npm 包的文件所在目錄開始逐層往外找，直到找到可用的 npm 包或是小程序根目錄爲止。 下面簡單介紹下構建打包先後的目錄狀況，構建以前的結構。

7、體驗評分：

一、運行環境要求 【1】下載並安裝 beta 版開發者工具，下載地址。 【2】基礎庫須要切到 2.2.0 或以上版本。

二、使用流程 【1】打開開發者工具，在詳情裏切換基礎庫到 2.2.0 版本 【2】在調試器區域切換到 Audits 面板 【3】點擊左上角」開始「按鈕（見下圖），而後自行操做小程序界面，運行過的頁面就會被「體驗評分」檢測到 【4】點擊「Stop"中止分析，就會看到一份分析報告，以後即可根據分析報告進行相關優化

8、Git版本管理：

一、提交工做區更改 二、查看歷史 三、查看文件修改歷史 四、檢出和建立分支 五、拉取，推送和抓取 六、網絡和認證設置 七、用戶設置 八、子模塊 九、初始化Git倉庫

9、命令行調用：

一、命令行啓動工具 二、命令行登陸 三、命令行提交預覽 四、命令行上傳代碼 五、支持自動化測試

10、HTTP調用：

一、打開工具或指定項目 二、登陸 三、預覽 四、上傳 五、自動化測試

11、測試號：

一、申請測試號 二、建立測試號項目

12、小程序開發助手：

一、「小程序開發助手」 是微信公衆平臺發佈的官方小程序，幫助開發和運營人員在手機端更方便快捷地查看和預覽小程序，掃描下面小程序碼可當即體驗。 二、使用者能夠在小程序開發助手查看和預覽與本身關聯的全部小程序。小程序將會按照其更新時間自動排序，顯示在最上面的小程序是最近有提交的小程序，例如開發者預覽了新的代碼，或者體驗版有更新。 三、經過點擊並展開小程序列表，使用者能夠根據本身的身份，瀏覽到小程序的線上版本、體驗版本或開發版本。若是使用者是小程序的管理者，能夠瀏覽到所有三種版本；若是使用者身份是 「體驗者」，則能夠瀏覽到線上版本、體驗版本，而不會瀏覽到任何開發版本。若是一個小程序有多個開發者，則開發版本的列表將會顯示每個開發者提交預覽的最新版本。 三、經過點擊列表上的相應版本，使用者能夠當即預覽該版本對應的小程序。點擊導航欄的返回，能夠返回到小程序開發助手，預覽其餘版本的小程序。

十3、代碼片斷：

一、建立代碼片斷 二、代碼片斷主界面 三、分享代碼片斷 四、導入代碼片斷

十4、第三方平臺：

一、小程序運營者，能夠一鍵受權給第三方平臺，經過第三方平臺來完成業務。 二、建立項目 三、小程序模板開發 四、extAppid 的開發調試 五、概念分區： open3rd：第三方平臺，是小程序官方承認的第三方開發商 3rdMiniProgramAppid：第三方平臺申請的並綁定在該平臺上的小程序，用於開發小程序模板 extAppid：受權給第三方平臺的小程序

十5、小程序插件開發：

一、建立插件項目 【1】miniprogram 文件夾是一個普通小程序項目，用來編寫小程序插件的使用 Demo，上傳插件代碼時這個 Demo 會一塊兒上傳，並做爲小程序插件的發佈的審覈依據。 【2】plugin 文件就是小程序插件項目，用來編寫小程序插件的代碼。 【3】project.config.json 須要關注 compileType 字段，compileType == 'plugin' 時才能正常的使用插件項目。

二、打開已存在的插件項目 三、插件上傳 四、插件文檔編寫、預覽和上傳 五、插件使用

十6、素材管理：

一、名詞解釋 二、免費額度 三、收費狀況 四、產品介紹 五、開通步驟： 【1】經過微信公衆平臺受權登陸騰訊雲 【2】前往騰訊雲開通 素材管理服務

十7、代碼託管：

一、TGit開通及配置流程 【1】開發者可登陸小程序管理後臺，在 「設置-開發者工具」 內開通 TGit 功能。 【2】配置項目信息、管理員信息 【3】開通後，進入「查看權限」，可查看和配置 TGit 項目成員信息 【4】添加 TGit 項目成員（選擇成員，填寫TGit用戶名） 二、微信開發者工具 三、如何使用： 《1》下載並安裝 Git，git-scm.com/downloads 《2》熟悉 Git 使用方法，詳情 《3》使用 Git 命令或者 Git 可視化工具將代碼提交到 TGit 《4》使用 TGit 進行代碼託管和多人協做

十8、雲測試：

一、特色： 【1】缺陷發現：測試過程當中自動發現小程序拋出的JS異常 【2】性能數據分析：測試過程當中收集包含加載時間、CPU佔用率、內存佔用量等數據指標； 【3】機型覆蓋：小程序會被隨機分配到4~8個不一樣機型的機器（由當時的機器資源決定）來執行，藉此能夠觀察小程序在不一樣機型的執行表現； 【4】其它：弱網絡環境測試、多場景測試等（開發中）。

十9、實現差別：

一、運行環境差別 【1】在 iOS 上，小程序的 javascript 代碼是運行在 JavaScriptCore 中，是由 WKWebView 來渲染的，環境有 iOS八、iOS九、iOS10。 【2】在 Android 上，小程序的 javascript 代碼是經過 X5 JSCore來解析，是由 X5 基於 Mobile Chrome 53/57 內核來渲染的。 【3】在 開發工具上， 小程序的 javascript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的. 二、客戶端ES6 API 支持狀況 【1】TBS 3.0 是指微信小程序 Android 運行環境。 【2】Array.values 不支持 【3】Proxy 不支持 三、API實現差別