微信小程式下載工具及調試的詳細介紹

高洛峰
發布: 2017-03-06 10:32:14
原創
1700 人瀏覽過

 昨天稍晚微信團隊發布了微信小程式開發者工具、微信小程式開發文件和微信小程式設計指南,全新的開發者工具,整合了開發調試、程式碼編輯及程式發布等功能,協助開發者簡單且有效率地開發微信小程式。以下是官方文檔,內含小程式開發者工具下載地址及調試指南。

下載地址:開發者工具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。

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


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

工具目前提供了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、目錄資訊等等。 ######點擊預覽功能,工具會自動編譯和建構程式碼,並產生程式碼包上傳到微信伺服器,成功後將會顯示一個二維碼,開發者用新版微信掃描二維碼即可在手機上看到對​​應項目的真實表現###

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

以上就是微信小程式下載工具調試的資料整理,後續補充相關資料,謝謝大家對本站的支持!

更多微信小程式下載工具及調試的詳細介紹相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板