微信小程序下載工具及調試詳解

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

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

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

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

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

devtools

掃碼登錄

啟動工具時，開發(fā)者需要使用已在后臺綁定成功的微信號掃描二維碼登錄，后續(xù)所有的操作都會基于這個微信帳號

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

模擬器

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

emulat

調試工具

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

3Wxml Pannel

Wxml Pannel 用于幫助開發(fā)者開發(fā) Wxml 轉化后的界面。在這里可以看到真實的頁面結構以及結構對應的 wxss 屬性，同時可以通過修改對應 wxss 屬性，在模擬器中實時看到修改的情況。通過調試模塊左上角的選擇器，還可以快速找到頁面中組件對應的 wxml 代碼。

wxml
Sources Pannel

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

sources
Network Pannel

Netwrok Pannle 用于觀察和顯示 request 和 socket 的請求情況

network
Appdata Pannel

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

appdata
Storage Pannel

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

storage
Console Pannel

Console Pannel 有兩大功能：

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

console

小程序的錯誤輸出，會顯示在此處

4小程序操作區(qū)

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

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

編輯區(qū)可以對當前項目進行代碼書寫工作，同時可以對文件進行基本的添加、刪除以及重命名。

工具目前提供了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：光標回退

項目目錄顯示的是當前項目的一些細節(jié)情況，包括圖標、appid、目錄信息等等。

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

需要注意的是，內測階段，代碼上傳功能僅管理員微信號可操作。

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

您可能感興趣的文章: