當前位置：新聞中心小程序開發(fā)專題微信小程序之 - 微信開發(fā)者工具用法

07-162010

觀點

小程序開發(fā)專題

微信小程序之 - 微信開發(fā)者工具用法

2010-07-16 小程序開發(fā)專題

· 新建項目

- 項目名稱：可以隨意取名，當我們新建多個小程序項目的時候可以加以區(qū)分。

- 目錄：我們的項目目錄需要選擇一個空的文件夾。

- AppID：如果沒有AppID的用戶可以去申請一個小程序賬號，或者點擊測試號（會有部分功能受限）。小程序賬號申請地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

- 開發(fā)模式：

-- 小程序：新建以后生成默認的開發(fā)目錄接口。

-- 插件：新建以后生成了頁面引入插件的代碼。

（兩者的區(qū)別是目錄結構不一致，插件模式基于默認的小程序模式擴展插件的用法）

后端服務：

不使用云服務：

意味著需要自己搭建服務器，自己提供數(shù)據庫、存儲等一系列后端的功能服務。可選擇小程序遵循的語言規(guī)范，JavaScirpt或TypeScript。

小程序·云開發(fā)：

無需搭建服務器，為開發(fā)者提供數(shù)據庫、存儲和云函數(shù)等完整的云端支持。使用微信平臺提供的API進行核心業(yè)務開發(fā)，即可實現(xiàn)小程序快速上線和迭代。

騰訊云：

可以選擇運行環(huán)境 NodeJS環(huán)境或PHP環(huán)境。

· 導入項目

- 項目名稱：

可以隨意取名，當我們新建多個小程序項目的時候可以加以區(qū)分。

- 目錄：

選擇一個已經生成過微信公眾號開發(fā)項目的目錄。

- AppID：

因為這是導入項目，說明之前已經開發(fā)過這個項目，在小程序項目開發(fā)過程中有獲取對應AppId的方式。

微信開發(fā)者工具操作界面分析

操作頁面分為三大塊

圖中有詳細畫出每一塊的位置

模擬器

查看當前小程序運行的界面，實時模擬小程序的相關操作，跟手機上打開小程序的界面一樣。模擬器上方有幾個設置按鈕，官方有給我們對應不同型號的手機設置屏幕尺寸，我們也可以自定義設置顯示屏幕的大小。

可以設置網絡信號，目前支持4G/3G/2G/WiFi/offline離線。

編輯器

開發(fā)、編輯、修改小程序的代碼，編輯器修改的代碼可以實時在模擬器上看到修改后的效果。

調試器

調試區(qū)細分為10個小部分：

1. Console 查看小程序執(zhí)行的報錯、打印的信息、警告等，也可以輸入一些變量進行調試。

2. Sources 左側查看當前項目運行的所有腳本，右側是執(zhí)行斷點調試。

3. Network 區(qū)域顯示的是與網絡相關的信息，可以查看網絡請求響應的數(shù)據。

4. Security 查看頁面整體的安全性。

5. AppData 查看訪問過小程序頁面的變量，變量值可以動態(tài)的修改。

6. Audits 體驗評分，在小程序運行過程中實時檢查，分析出一些可能導致體驗不好的地方，并且定位出哪里有問題，以及給出一些優(yōu)化建議。

7. Sensor 開發(fā)者可以在這里模擬經緯度，也可以在這里模擬移動設備表現(xiàn)，用于調試重力感應 API。

8. Storage 官方說明是用于顯示當前項目使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據存儲情況。

9. Trace 用于鏈接手機調試。

10. Wxml 相當于前端網頁瀏覽器的Elements，本質上跟HTML+CSS相同，只是后綴名不一樣，可以調試修改標簽的樣式。

然后我們看上面的工具欄

默認是普通編譯，按照正常的編譯模式執(zhí)行。

添加編譯模式：點擊添加編譯模式窗口如下

模式名稱自己定義，最好就是見名知意。

然后就是啟動頁面的路徑設置，每次刷新小程序都會進入到啟動頁面的路徑，然后我們可以模擬一些啟動參數(shù)，如：name=venfor&color=black，然后就是啟動場景，我們要知道，小程序的訪問方式有很多種情況，比如從公眾號進入小程序、單人聊天會話進入小程序，掃描二維碼進入小程序，長按圖片識別二維碼進入小程序等等這一系列的訪問入口的場景值都是不一樣的，也就是說我們可以通過這里模擬小程序進入的場景值。關于小程序場景值有哪些可查看：

https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

還有一種是可以通過二維碼編譯添加訪問小程序的參數(shù)，可以選擇本地的小程序二維碼圖片。

現(xiàn)在我們來看一下頂部中間這5個工具欄的用法

1. 編譯重新編譯當前小程序的代碼。

2. 預覽生成當前小程序的臨時二維碼，二維碼在25分鐘后會失效，這里有一點需要注意的，開發(fā)者工具上面生成的二維碼都需要有開發(fā)者權限的微信才能掃碼進入。

3. 真機調試生成預覽的二維碼，掃碼以后手機會打開當前小程序，電腦將會自動彈出一個調試區(qū)，調試區(qū)用于手機的真機調試，這樣方便看到手機上程序執(zhí)行了什么。

4. 切后臺/切前臺模擬小程序退出了后臺，這里說的退出后臺在手機上代表的是將進程切換到了后臺，切后臺以后會彈出一個切前臺的入口，這里也就是模擬小程序進入的場景值。

5. 清緩存這里可以清除數(shù)據緩存、清除文件緩存、清除授權緩存、清除網絡緩存、清除登陸狀態(tài)。

然后我們看開發(fā)者工具頂部右上角的4個工具按鈕的用法

1. 上傳此處點擊上傳會將小程序上傳到對應appid的小程序賬號上，在微信公眾平臺-小程序后臺可以管理從微信開發(fā)者工具上傳的代碼。

2. 版本管理此處需要關聯(lián)git賬戶，實現(xiàn)代碼的版本管理，相當于我們平時用git管理碼云、github上面的代碼。

3. 社區(qū) 點擊社區(qū)進入到微信社區(qū)平臺，我們在社區(qū)平臺可以反饋微信的一系列（小程序、小游戲、微信支付）相關問題，社區(qū)地址：

https://developers.weixin.qq.com/community/develop?idescene=2

4. 詳情詳情可以看到我們的賬號信息和一些小配置，我們來看這張圖

從這里可以看到我們小程序的AppID，項目路徑和本地代碼包大小，目前微信限制小程序代碼8M，一個包分為2M，也就是說最多4個包每個包最多2M，代碼包超過指定大小以后將無法預覽、上傳。

調試基礎庫

還可以設置我們調試的基礎庫版本，微信推出新的API需要對應的基礎版本庫支持，我們默認是最新的基礎庫版本。

Chrome DevTools

微信 web 開發(fā)者工具集成了 Chrome DevTools。同之前在 PC 上的調試體驗一致，可以快速上手。

上一篇：了解小程序同時如何學習進階，寶地介紹給你返回觀點列表下一篇：想了解找靠譜的公司做小程序商城需要注意哪些問題

本文標簽：

本文地址： http://www.bmwdream.cn/a/2286.html

相關專題

電商/商城開發(fā)
杭州派迪科技為高端客戶提供商城開發(fā)建設咨詢策劃，商城官網設計，商城建設開發(fā)服務，以國際化視野和標準為基礎，為各行業(yè)領軍品牌提供高端商城開發(fā)定制、策劃、設計、互動與制作
查看詳情
微信公眾號開發(fā)
杭州派迪科技微信公眾號開發(fā)，為全國企業(yè)提供微信公眾號商城、H5、功能系統(tǒng)開發(fā)，如您需要找專業(yè)的公眾號開發(fā)團隊，委托第三方公司開發(fā)公眾號菜單及網頁內容請聯(lián)系派迪科技
查看詳情
小程序開發(fā)
杭州派迪科技專業(yè)小程序開發(fā)，為企業(yè)提供微信小程序開發(fā),包括小程序商城、小程序應用及其他平臺,可根據客戶需求進行定制開發(fā),提供源代碼,可二次開發(fā),可申請軟件著作權,歡迎咨詢。我們以用戶為中心的程序功能豐富、直觀且性能極佳。我們以清晰的業(yè)務目標視圖制作您的項目目的地，并確保它支持用戶訪問體驗?？稍诳缭O備上產生無縫的全渠道體驗，應用程序具有豐富的 UI/UX、規(guī)范化的數(shù)據庫和強大的框架，可提供更好性能。
查看詳情
在線教育
查看詳情
APP/應用平臺開發(fā)
杭州派迪科技專業(yè)的app開發(fā)平臺,9年開發(fā)經驗,專注app開發(fā)、app軟件開發(fā)、手機app制作為教育行業(yè)、檢修行業(yè)、商城電商系統(tǒng)等APP提供過全程策劃及開發(fā)
查看詳情