快捷導(dǎo)航

微信小程序下載工具及調(diào)試詳解

更新時(shí)間：2016年09月24日 09:11:50 投稿：lqh

這篇文章主要介紹了微信小程序下載工具及調(diào)試詳解的相關(guān)資料,需要的朋友可以參考下

　昨天晚些時(shí)候微信團(tuán)隊(duì)發(fā)布了微信小程序開發(fā)者工具、微信小程序開發(fā)文檔和微信小程序設(shè)計(jì)指南，全新的開發(fā)者工具，集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能，幫助開發(fā)者簡(jiǎn)單和高效地開發(fā)微信小程序。以下是官方文檔，內(nèi)含小程序開發(fā)者工具下載地址及調(diào)試指南。

下載地址：開發(fā)者工具0.9.092300版
windows 64版；windows 32版；mac版

為了幫助開發(fā)者簡(jiǎn)單和高效地開發(fā)微信小程序，我們推出了全新的開發(fā)者工具，集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能。

devtools

掃碼登錄

啟動(dòng)工具時(shí)，開發(fā)者需要使用已在后臺(tái)綁定成功的微信號(hào)掃描二維碼登錄，后續(xù)所有的操作都會(huì)基于這個(gè)微信帳號(hào)

程序調(diào)試主要有三大功能區(qū)：模擬器、調(diào)試工具和小程序操作區(qū)

模擬器

模擬器模擬微信小程序在客戶端真實(shí)的邏輯表現(xiàn)，對(duì)于絕大部分的 API 均能夠在模擬器上呈現(xiàn)出正確的狀態(tài)。

emulat

調(diào)試工具

調(diào)試工具分為 6 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage以及

3Wxml Pannel

Wxml Pannel 用于幫助開發(fā)者開發(fā) Wxml 轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的 wxss 屬性，同時(shí)可以通過修改對(duì)應(yīng) wxss 屬性，在模擬器中實(shí)時(shí)看到修改的情況。通過調(diào)試模塊左上角的選擇器，還可以快速找到頁面中組件對(duì)應(yīng)的 wxml 代碼。

wxml
Sources Pannel

Sources Pannel 用于顯示當(dāng)前項(xiàng)目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會(huì)對(duì)腳本文件進(jìn)行編譯的工作，所以在 Sources Pannel 中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在 define 函數(shù)中，并且對(duì)于 Page 代碼，在尾部會(huì)有 require 的主動(dòng)調(diào)用。

sources
Network Pannel

Netwrok Pannle 用于觀察和顯示 request 和 socket 的請(qǐng)求情況

network
Appdata Pannel

Appdata Pannel 用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻 appdata 具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況，可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上。

appdata
Storage Pannel

Storage Pannel 用于顯示當(dāng)前項(xiàng)目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲(chǔ)情況。

storage
Console Pannel

Console Pannel 有兩大功能：

開發(fā)者可以在此輸入和調(diào)試代碼

console

小程序的錯(cuò)誤輸出，會(huì)顯示在此處

4小程序操作區(qū)

小程序操作區(qū)幫助開發(fā)者模擬一些客戶端的環(huán)境操作。例如當(dāng)用戶從小程序中回到聊天窗口，會(huì)觸發(fā)一個(gè)小程序被設(shè)置為后臺(tái)的api。

5當(dāng)小程序使用到多窗口的時(shí)候，可以在頂部操作區(qū)進(jìn)行頁面切換，需要注意的是這個(gè)操作只是為了方便開發(fā)者才存在的，在真實(shí)的微信客戶端中是不會(huì)有的。

編輯區(qū)可以對(duì)當(dāng)前項(xiàng)目進(jìn)行代碼書寫工作，同時(shí)可以對(duì)文件進(jìn)行基本的添加、刪除以及重命名。

工具目前提供了4種文件的編輯：wxml wxss js json
自動(dòng)補(bǔ)全

同大部分編輯器一樣，我們提供了完善的自動(dòng)補(bǔ)全

常用快捷鍵

格式調(diào)整

    Ctrl+S：保存文件
    Ctrl+[， Ctrl+]：代碼行縮進(jìn)
    Ctrl+Shift+[， Ctrl+Shift+]：折疊打開代碼塊
    Ctrl+C Ctrl+V：復(fù)制粘貼，如果沒有選中任何文字則復(fù)制粘貼一行
    Shift+Alt+F：代碼格式化
    Alt+Up，Alt+Down：上下移動(dòng)一行
    Shift+Alt+Up，Shift+Alt+Down：向上向下復(fù)制一行
    Ctrl+Shift+Enter：在當(dāng)前行上方插入一行

光標(biāo)相關(guān)

    Ctrl+End：移動(dòng)到文件結(jié)尾
    Ctrl+Home：移動(dòng)到文件開頭
    Ctrl+i：選中當(dāng)前行
    Shift+End：選擇從光標(biāo)到行尾
    Shift+Home：選擇從行首到光標(biāo)處
    Ctrl+Shift+L：選中所有匹配
    Ctrl+D：選中匹配
    Ctrl+U：光標(biāo)回退

項(xiàng)目目錄顯示的是當(dāng)前項(xiàng)目的一些細(xì)節(jié)情況，包括圖標(biāo)、appid、目錄信息等等。

點(diǎn)擊預(yù)覽功能，工具會(huì)自動(dòng)編譯和構(gòu)建代碼，并生成代碼包上傳到微信服務(wù)器，成功后將會(huì)顯示一個(gè)二維碼，開發(fā)者用新版微信掃描二維碼即可在手機(jī)上看到相應(yīng)項(xiàng)目的真實(shí)表現(xiàn)

需要注意的是，內(nèi)測(cè)階段，代碼上傳功能僅管理員微信號(hào)可操作。

以上就是微信小程序下載工具調(diào)試的資料整理，后續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: