微信小程式開發系列教程三:微信小程式的除錯方法
微信小程式開發系列教程
這個教程的前兩篇文章,介紹瞭如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程式,並講解了這個自動生成的微信小程式的檢視開發原理。
這個系列的下一步,會繼續介紹這個微信小程式的控制器index.js的實現。在上一篇微信小程式檢視原始碼的講解裡,我們透過逐行講解程式碼的方式,介紹了微信小程式檢視的基本開發思路。但是講控制器index.js, 僅僅採取靜態的程式碼走查還不夠,我們需要將微信小程式啟動起來,透過單步除錯的方式逐行講解,透過控制器的呼叫上下文能對微信小程式的控制器實現有更深入的瞭解。
為此我們先要學會微信小程式的除錯方法。
開啟微信開發者工具,點選工具欄的“偵錯程式”按鈕:
開發者工具右邊的區域現在從上到下一分為二:上面藍色區域還是程式碼編輯頁面,下面紅色區域就是微信小程式的除錯工具。
做過前端開發的朋友們,可以一眼就看出這其實就是Chrome的開發者工具。
我在我的微信公眾號“汪子熙”上也寫過一篇Chrome開發者工具的使用技巧介紹,感興趣的朋友可以去看看:
在偵錯程式裡開啟我們的控制器index.js, 單擊行號"3", 然後行號3自動被高亮,說明第3行已經成功設定好了一個斷點。
點選“編譯”按鈕,我們的小程式自動啟動,設定在控制器裡的斷點就自動觸發了。這樣我們就可以透過單步除錯的方式來學習微信小程式控制器的呼叫上下文了。
微信小程式的偵錯程式在手機上仍然可以開啟。在手機上訪問微信小程式,點選螢幕右下角的vConsole按鈕。
接著整個手機螢幕就被微信小程式的偵錯程式充滿了。這個偵錯程式和電腦上安裝的微信開發者工具相比,僅僅能顯示日誌和執行一些簡單的JavaScript操作,但是不能像電腦上那樣,進行JavaScript程式碼的除錯。
我們注意到上圖的“command...”輸入框可以輸入一些簡單的JavaScript命令,比如console.log("Jerry")。
然後可以在手機的偵錯程式上看到輸出的Jerry:
System標籤頁可以看到一些微信小程式效能相關的引數和效能引數:
MicroMessenger版本號:6.6.6
Wechat lib: 庫檔案版本2.0.9
navigation: 3ms 跳轉時間3毫秒
domComplete(domLoaded): dom載入總共花費19毫秒
WXML標籤頁能顯示當前渲染好的檢視的明細:
大家熟悉了微信小程式的偵錯程式,就能開始下一章節關於微信小程式控制器的學習了。
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2213719/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 微信小程式開發–視訊教程系列微信小程式
- 微信小程式教程系列微信小程式
- 微信小程式開發教程微信小程式
- 微信小程式開發系列二:微信小程式的檢視設計微信小程式
- 微信小程式開發系列七:微信小程式的頁面跳轉微信小程式
- 微信小程式開發系列 (二) :微信小程式的單步除錯和控制器實現步驟概述微信小程式除錯
- 微信小程式開發系列六:微信框架API的呼叫微信小程式框架API
- 首個微信小程式開發教程!微信小程式
- 怎麼認證微信小程式-微信小程式開發-視訊教程2微信小程式
- 微信小程式之小白教程系列 第二篇 微信小程式 -- 入口微信小程式
- 微信小程式開發之大神之路最全微信小程式開發教程(視訊+精品文章)微信小程式
- 微信小程式開發系列 (四) :微信小程式的頁面跳轉路由設計微信小程式路由
- 微信小程式開發微信小程式
- 微信小程式開發小記微信小程式
- 【小程式】微信小程式開發實踐微信小程式
- 【小程式】微信小程式開發準備微信小程式
- 微信小程式開發教程(第3彈)微信小程式
- 微信小程式開發教程(第4彈)微信小程式
- 怎麼免費註冊微信小程式-微信小程式開發-視訊教程1微信小程式
- 微信小程式開發系列(一) :開發環境搭建和微信小程式的檢視設計與開發微信小程式開發環境
- 微信小程式之小白教程系列 第一篇 微信小程式 — Hello World微信小程式
- 微信小程式之小白教程系列 第一篇 微信小程式 -- Hello World微信小程式
- 開發微信小程式的作用微信小程式
- 微信小程式開發系列四:微信小程式之控制器的初始化邏輯微信小程式
- 微信小程式開發2微信小程式
- 微信開發與小程式
- 快速開發微信小程式微信小程式
- 微信小程式報錯微信小程式
- 微信小程式教程01:小程式簡介微信小程式
- 微信小程式開發教程-從零開始(1)微信小程式
- 微信小程式開發教程-從零開始(2)微信小程式
- 微信小程式開發教程-從零開始(3)微信小程式
- 微信小程式開發風口下,微信小程式該如何運營?微信小程式
- 微信小程式開發系列五:微信小程式中如何響應使用者輸入事件微信小程式事件
- 微信小程式--聊天室小程式(雲開發)微信小程式
- 微信小程式之-NBA線上直播小程式開發微信小程式
- 微信小程式左滑刪除功能開發案例微信小程式
- 開發微信小程式的個人感想微信小程式