1. 程式人生 > >微信小程式的開發準備及其除錯工具

微信小程式的開發準備及其除錯工具

一、微信小程式  微信公眾平臺    https://mp.weixin.qq.com/cgi-bin/wx

二、下載開發工具  https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

三、安裝 執行  申請APPID 建立自己的應用

1、app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API,如本例的同步儲存及同步讀取本地資料。

2、​ app.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成,配置小程式的視窗背景色,配置導航條樣式,配置預設標題。注意該檔案不可新增任何註釋。
3、app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 app.wxss 中宣告的樣式規則。
三、方法

onLunch()  小程式啟動時執行的方法   wx.以這個開頭的都是系統封裝好的方法 我們都可以直接呼叫

onLaunch: function () {

// 展示本地儲存能力

var logs = wx.getStorageSync('logs') || []

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

 

// 登入

wx.login({

success: res => {

// 傳送 res.code 到後臺換取 openId, sessionKey, unionId

}

})

四、除錯工具

1、WXml Panel  WXml轉化後的頁面(真實的頁面結構及結構對應的WXSS屬性)

2、Sources Panel (經過處理的指令碼檔案)

當前專案的指令碼檔案 同瀏覽器開發不同,微信小程式框架會對指令碼檔案進行編譯的工作

3、AppDate 具體資料 實施反映專案資料情況編輯資料反饋到介面上

4、Storage   當前專案使用 wx.setStorage

                                            wx.setStorageSync後的資料儲存情況

     對資料進行刪除 新增 修改
5、network(不支援uploadFile和downloadFile)

      觀察和顯示request和socket的請求情況

6、consule 輸入 除錯程式碼  build preview upload openvendor(開啟基礎庫所在目錄) openToolsLog  checkProxy(url) 檢查指定url的使用情況

7、sensor 選擇模擬的地理位置  模擬移動裝置表現 用於除錯重力感應api