手把手教你如何從0到1，實現一個天氣小程序！

最近小程序·雲開發的推出，大大降低了小程序的開發門檻。騰訊雲學院新上線的好課《從0到1實現天氣查詢小程序》，就是用雲開發的 API 實現了一個「新鮮天氣」的小程序。

這份實戰課程以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發環境搭建到小程序開發、調試、上線，打通微信小程序開發全流程，讓新手可以從零開始完成並上線一個小程序。

限時優惠 掃碼學習

那麼iOS 真機如何調試微信小程序呢？

平時開發小程序可以在開發者工具中進行調試，開發者工具提供了類似 Chrome DevTools 的調試面板，對於前端開發者來說入門門檻比較低。

小程序開發完成之後，我們需要在真機上進行測試，真機調試方面小程序開發者工具有預覽、遠程調試和設置體驗版本三大部分功能。

除了這三種方式之外，我們還可以使用真機遠程調試，在 iOS 上可以通過實現 Safari 調試代碼，安卓中可以安裝 X5 內核的 inspect 版本，開啟 Chrome remote debug 模式。使用真機調試不僅可以發現開發者工具中不能發現的 bug，還能幫助我們理解小程序的運行原理。

下面介紹下如何使用 Xcode、Reveal 和 Safari 來真機調試 iOS 上的小程序。

先大概說下原理，首先下載砸過殼版本的微信 ipa 文件（iOS App 程序的後綴），然後使用 IPAPatch 對 ipa 進行重新簽名，簽名賬號可以使用自己的 Apple 賬號，最後將項目編譯到真機（也可以模擬器），就可以使用 Safari 進行調試了。

1.下載IPAPatch 項目

2.使用 PP 助手下載砸過殼版本的微信 ipa（使用最新版本的微信，否則登錄會提示需要升級），這個需要安裝 PP 助手，下載後在下載目錄找到其 ipa

3.將微信的 ipa 文件命名為 app.ipa，替換掉 IPAPatch 目錄的Assets/app.ipa文件

4.使用 Xcode 打開 IPAPatch 項目

5.修改簽名到自己的開發者賬號，沒有開發者賬號可以用自己的 Apple 賬號登錄

按照上面的提示，首先修改BundleID（這裡的填寫可以比較隨意），然後使用自己的 Apple ID 登錄賬號，再選擇自己的真機（數據線連接後可以選擇），選擇後點擊開始編譯，編譯結束會安裝到自己的 iPhone 手機，安裝成功後就會發現自己的手機有兩個微信了。

接著再完成下面的步驟，就可以調試小程序了。

1.在 iPhone 上信任自己的開發者描述文件：「設置 -> 通用 -> 描述文件 -> 信任你的證書」

2.在 iPhone 上打開 Safari 調試功能：「設置 -> Safari -> 高級 -> Web 檢查器打開」

首先登錄微信賬號，打開需要調試的小程序，打開後在 Mac 電腦上打開「Safari -> 開發」找到自己的 iPhone 手機，選擇對應的頁面就可以進行調試了。

這裡說明下：

1.JSContext：是小程序的邏輯層代碼，執行在 JavaScriptCore 環境中

2.page-frame.html：是小程序的視圖層代碼，執行在普通的 WKWebview 中

3.上圖只開了一個小程序頁面卻顯示了兩個 page-frame.html，說明始終有一個頁面在後台載入，準備打開小程序的其他頁面

調試 JSContext

另外看到一些JSBridge.subscribeHandle的代碼實際是 Native 實現的一些方法或事件，然後調用 JSContext 中的方法回傳數據的。

下面是點擊事件的一個截圖，會看到點擊事件傳遞的數據。

調試 page-frame.html

page-frame的頁面是普通的 WebView 容器，可以在 Safari 中直接 debug，下面我打開了自己正在開發的項目，通過 Console 面板修改#canvas-wrapper節點的內容：

修改後，在手機上看到效果：

這說明實際 WebView 內是可以進行 DOM 操作的，而且也可以使用普通的 BOM 對象，如alert、location等。

使用 Reveal 查看 UI 布局

如下圖所示，在今日頭條的小程序布局中，可以看到播放器組件是 Native 實現的組件，而我們做的新鮮天氣小程序的雨雪效果 Canvas 也是 Native 實現的。

要開啟 Reveal，需要經過下面的步驟：

1.安裝 Reveal，然後通過菜單「Help -> Show Reveal Library in Finder -> iOS Library」，打開RevealServer.framework所在目錄

2.將RevealServer.framework複製到 IPAPatch 的Assets/Frameworks/內

上面兩個步驟如果都正確，再次用 Xcode 打開 IPAPatch 編譯運行，打開小程序後，會在 Reveal 中看到可以操作了。

這時候點擊 icon 就可以隨意查看 UI 布局了。

本文作者三水清老師發現使用雲開發可以大大降低小程序的開發門檻，以前很多靈光乍現的點子，往往因為缺乏後端知識或者缺少後端伺服器沒有得到實現，現在使用小程序雲開發提供的介面完全可以實現。

於是他用雲開發的 API 實現了一個「新鮮天氣」的小程序，並將開發中的過程以及比較好的經驗整理成《從0到1實現天氣查詢小程序》。

這份實戰課程以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發環境搭建到小程序開發、調試、上線，打通微信小程序開發全流程，讓新手可以從零開始完成並上線一個小程序。

限時優惠 掃碼學習

該門課程主要有以下三部分組成：

1.小程序開發基礎知識：微信小程序、小程序雲的開發基礎知識，最小程序的運行機制

2.實戰開發「新鮮天氣」小程序：小程序開發壞境搭建、新鮮天氣小程序簡介、天氣預報頁面布局開發，頁面數據交互

3.優化到上線：從多個方面介紹小程序優化的知識點，並且完成小程序的上線

這份實戰課程會收取一部分費用，不過價格比較便宜，最近限時優惠也只需6.93元！希望能夠對想學習或者正在進行小程序開發的你有所幫助。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！