文章出處

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

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

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

    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、目錄信息等等。

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

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

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


歡迎轉載:http://www.kanwencang.com/bangong/20161116/53997.html

文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()