微信小程式下載工具及調試的詳細介紹
- 高洛峰原創
- 2017-03-06 10:32:141642瀏覽
昨天稍晚微信團隊發布了微信小程式開發者工具、微信小程式開發文件和微信小程式設計指南，全新的開發者工具，整合了開發調試、程式碼編輯及程式發布等功能，協助開發者簡單且有效率地開發微信小程式。以下是官方文檔，內含小程式開發者工具下載地址及調試指南。
下載地址：開發者工具0.9.092300版
windows 64版；windows 32版；mac版
為了幫助開發者簡單和高效地開發微信小程序，我們推出了全新的開發者工具，整合了開發調試、程式碼編輯及程式發布等功能。
devtools
掃碼登入
啟動工具時，開發者需要使用已在後台綁定成功的微訊號掃描二維碼登錄，後續所有的操作都會基於這個微信帳號
程式偵錯主要有三大功能區：模擬器、偵錯工具和小程式操作區
模擬器
模擬器模擬微信小程式在客戶端的真實邏輯表現，對於絕大部分的API 都能在模擬器上呈現正確的狀態。
emulat
偵錯工具
偵錯工具分為6 大功能模組：Wxml、Console、Sources、Network、Appdata、Storage以及
3Wxml Pannel
Wxml Pannel 用於協助開發者開發Wxml 轉換後的介面。這裡可以看到真實的頁面結構以及結構對應的 wxss 屬性，同時可以透過修改對應 wxss 屬性，在模擬器中即時看到修改的情況。透過偵錯模組左上角的選擇器，還可以快速找到頁面中元件對應的 wxml 程式碼。
wxml
Sources Pannel
Sources Pannel 用於顯示當前專案的腳本文件，同瀏覽器開發不同，微信小程式框架會對腳本文件進行編譯的工作，所以在Sources Pannel 中開發者看到的文件是經過處理後的腳本文件，開發者的程式碼都會被包裹在define 函數中，並且對於Page 程式碼，在尾部會有require 的主動呼叫。
sources
Network Pannel
Netwrok Pannle 用於觀察和顯示request 和socket 的請求情況
network
Appdata Pannel
Appdata Pannel 用於顯示當前專案當前時刻appdata 具體數據，即時回饋專案數據狀況，可以在此處編輯數據，並及時回饋到介面上。
appdata
Storage Pannel
Storage Pannel 用於顯示目前專案的使用 wx.setStorage 或 wx.setStorageSync 後的資料儲存狀況。
storage
Console Pannel
Console Pannel 有兩個功能：
開發者可以在此輸入和偵錯程式碼
console
## console小程式的錯誤輸出，會在此處顯示 4小程式操作區
小型程式操作區可協助開發者模擬某些客戶端的環境操作。例如當使用者從小程式回到聊天窗口，會觸發一個小程式被設定為後台的api。
編輯區可以對目前專案進行程式碼書寫工作，同時可以對檔案進行基本的新增、刪除以及重新命名。
工具目前提供了4種檔案的編輯：wxml wxss js json
自動補全
同大部分編輯器一樣，我們提供了完善的自動補全
常用快捷鍵
格式調整
Ctrl+S：儲存檔案
Ctrl+[，Ctrl+]：程式碼行縮排
Ctrl+Shift+[， Ctrl+Shift+]：折疊開啟程式碼區塊
Ctrl+C Ctrl+V：複製貼上，如果沒有選取任何文字則複製貼上一行
Shift+Alt+F：程式碼格式化
Shift+Alt+Up，Shift+Alt+Down：向上向下複製一行
Ctrl+Shift+Enter：在目前行上方插入一行
#遊標相關
Ctrl+End：移到檔案結尾
Ctrl+Home：移到檔案開頭
Ctrl+i：選取目前行
Shift+End：選擇從遊標到排尾
Shift+Home：選擇從行首到光標處
Ctrl+Shift+L：選中所有匹配
Ctrl+U：光標回退
專案目錄顯示的是目前專案的一些細節情況，包括圖示、appid、目錄資訊等等。 ######點擊預覽功能，工具會自動編譯和建構程式碼，並產生程式碼包上傳到微信伺服器，成功後將會顯示一個二維碼，開發者用新版微信掃描二維碼即可在手機上看到對應項目的真實表現###要注意的是，內測階段，程式碼上傳 功能僅管理員微訊號可操作。
以上就是微信小程式下載工具調試的資料整理，後續補充相關資料，謝謝大家對本站的支持！
更多微信小程式下載工具及調試的詳細介紹相關文章請關注PHP中文網！