1. 程式人生 > >微信專案開發與本地除錯、移動除錯(一)

微信專案開發與本地除錯、移動除錯(一)

         微信服務號現在真的很強大,裡面有各種各樣的服務和功能。現在的移動端應用,可以說,微信已經超過了APP。對於微信開發而言,它和普通的web專案其實並沒什麼區別。微信專案也是web專案的一種,只不過它是在微信的內建的QQ瀏覽器裡執行,更多的在手機端執行。微信本地開發,需要注意的就是除錯與測試,因為頁面要做手機端適配,功能也要做充分測試,並沒有普通的web專案那麼方便。

         微信專案開發的聯調與測試,可以分為三種方式。

         一,在本地部署後,用普通的瀏覽器訪問,開發者模式,F12。

         微信專案也是web專案,目的也是為使用者提供服務,裡面的大多功能,與普通web專案一樣,都是服從於本專案的業務邏輯。排除微信的登入驗證、授權免登陸、訊息通知等需要呼叫微信介面的功能,它就是普通的web專案。當你不測試微信介面相關功能時,可以註釋掉這部分程式碼,或者在攔截器裡放開這些攔截校驗。這樣你完全可以用瀏覽器測你的微信專案,F12後選擇“手機模式”,可以調整各種頁面樣式適配,也可以監控js的執行情況。把自己本地專案,調成debug模式啟動,就可以完全進行前後臺的除錯了。這個方法的壞處是,無法調微信相關介面。

        二,利用個人申請的訂閱號測試。

        作為微信開發者,最好申請一個自己的訂閱號,這對開發除錯很有用。個人只能申請訂閱號,但是微信訂閱號的微信公眾平臺裡,左側導航欄“開發”下面有個“開發者工具”,點進去裡面有個“公眾平臺測試賬號”。這個測試賬號,可以使用服務號的所有高階介面。至於訂閱號的申請,沒什麼難點,選擇“個人”,按照提示做就行。裡面有些引數需要配置,本地服務需要有個域名,供外網訪問。可以選擇花生殼等工具,對本機做個外網對映。下面貼一些圖片。

        (1)掃碼驗證,進入個人訂閱號的公眾平臺。


          (2)進入開發者工具。裡面的“開發者文件”似乎未更新,不建議點這個連結看文件。線上介面除錯工具也挺不錯,你可以測試微信提供的各個介面。web開發者工具,支援本地除錯,可以下載下來用,這個詳細的使用心得下次再介紹。公眾平臺測試賬號,正是我們的目標,需要再次掃碼進入。


                (3)這裡面的APPID和secret,可以配置到你的專案裡,這樣你的專案就與這個測試號關聯在一起了。如果有模板推送訊息,也相應操作下,這個我暫時沒試,可以按照提示做。



               (4)微信掃碼關注測試號,配置授權回撥域名,js安全域名。注意,安全域名,必須是完整的域名,不要帶“http://”。還有,介面許可權的“網頁服務”--“網頁賬號”,也可以在這裡配置、修改授權回撥域名。



         本地做好外網對映,取得訪問專案的外網域名,debug模式啟動專案,在測試服務號配置好回撥域名,就可以實現移動除錯了。你在手機上點選,可以在後臺除錯程式碼,也可以看到頁面在手機端的適配效果。缺點是,無法進行頁面樣式的除錯,無法監控js的執行。

         三,利用web開發者工具。

         因為我只能應用最基本的功能,它對於我就像一個QQ瀏覽器一樣,本篇暫不進行介紹。它是騰訊專門開發的微信除錯工具,可以實現本地除錯和移動除錯,功能很強大。


       本篇已完,web開發者工具等我完全用熟了所有功能再來寫。