1. 程式人生 > >小程式開發者工具下載及除錯指南

小程式開發者工具下載及除錯指南

      微信團隊釋出了微信小程式開發者工具、微信小程式開發文件微信小程式設計指南,全新的開發者工具,集成了開發除錯、程式碼編輯及程式釋出等功能,幫助開發者簡單和高效地開發微信小程式。以下是官方文件,內含小程式開發者工具下載地址及除錯指南。

下載地址:開發者工具0.9.092300版
windows 64版; windows 32版; mac版

為了幫助開發者簡單和高效地開發微信小程式,推出了全新的開發者工具,集成了開發除錯、程式碼編輯及程式釋出等功能。

掃碼登入

啟動工具時,開發者需要使用已在後臺繫結成功的微訊號掃描二維碼登入,後續所有的操作都會基於這個微信帳號


程式除錯主要有三大功能區:模擬器、除錯工具和小程式操作區
模擬器



模擬器模擬微信小程式在客戶端真實的邏輯表現,對於絕大部分的 API 均能夠在模擬器上呈現出正確的狀態。

emulat
除錯工具

除錯工具分為 6 大功能模組:Wxml、Console、Sources、Network、Appdata、Storage以及


Wxml 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

    小程式的錯誤輸出,會顯示在此處




小程式操作區

小程式操作區幫助開發者模擬一些客戶端的環境操作。例如當用戶從小程式中回到聊天視窗,會觸發一個小程式被設定為後臺的api。



當小程式使用到多視窗的時候,可以在頂部操作區進行頁面切換,需要注意的是這個操作只是為了方便開發者才存在的,在真實的微信客戶端中是不會有的。

編輯區可以對當前專案進行程式碼書寫工作,同時可以對檔案進行基本的新增、刪除以及重新命名。

工具目前提供了4種檔案的編輯:wxml wxss js json


自動補全

同大部分編輯器一樣,我們提供了完善的自動補全


常用快捷鍵
格式調整

    Ctrl+S:儲存檔案
    Ctrl+[, Ctrl+]:程式碼行縮排
    Ctrl+Shift+[, Ctrl+Shift+]:摺疊開啟程式碼塊
    Ctrl+C Ctrl+V:複製貼上,如果沒有選中任何文字則複製貼上一行
    Shift+Alt+F:程式碼格式化
    Alt+Up,Alt+Down:上下移動一行
    Shift+Alt+Up,Shift+Alt+Down:向上向下複製一行
    Ctrl+Shift+Enter:在當前行上方插入一行 

游標相關

    Ctrl+End:移動到檔案結尾
    Ctrl+Home:移動到檔案開頭
    Ctrl+i:選中當前行
    Shift+End:選擇從游標到行尾
    Shift+Home:選擇從行首到游標處
    Ctrl+Shift+L:選中所有匹配
    Ctrl+D:選中匹配
    Ctrl+U:游標回退 


專案目錄顯示的是當前專案的一些細節情況,包括圖示、appid、目錄資訊等等。

​點選預覽功能,工具會自動編譯和構建程式碼,並生成程式碼包上傳到微信伺服器,成功後將會顯示一個二維碼,開發者用新版微信掃描二維碼即可在手機上看到相應專案的真實表現

需要注意的是,內測階段,程式碼上傳 功能僅管理員微訊號可操作。