平時(shí)開發(fā)小程序可以在開發(fā)者工具中進(jìn)行調(diào)試，開發(fā)者工具提供了類似 Chrome DevTools 的調(diào)試面板，對于前端開發(fā)者來說入門門檻比較低。

郟縣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

高防服務(wù)器完成之后，我們需要在真機(jī)上進(jìn)行測試，真機(jī)調(diào)試方面小程序開發(fā)者工具有預(yù)覽、遠(yuǎn)程調(diào)試和設(shè)置體驗(yàn)版本三大部分功能。除了這三種方式之外，我們還可以使用真機(jī)遠(yuǎn)程調(diào)試，在 iOS 上可以通過實(shí)現(xiàn) Safari 調(diào)試代碼，安卓中可以安裝 X5 內(nèi)核的 inspect 版本，開啟 Chrome remote debug 模式。使用真機(jī)調(diào)試不僅可以發(fā)現(xiàn)開發(fā)者工具中不能發(fā)現(xiàn)的 bug，還能幫助我們理解小程序的運(yùn)行原理。

下面介紹下如何使用 Xcode、Reveal 和 Safari 來真機(jī)調(diào)試 iOS 上的小程序。

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

1. 下載 IPAPatch 項(xiàng)目
2. 使用 PP 助手下載砸過殼版本的微信 ipa（使用最新版本的微信，否則登錄會(huì)提示需要升級），這個(gè)需要安裝 PP 助手，下載后在下載目錄找到其 ipa
3. 將微信的 ipa 文件命名為 app.ipa，替換掉 IPAPatch 目錄的 Assets/app.ipa 文件
4. 使用 Xcode 打開 IPAPatch 項(xiàng)目
5. 修改簽名到自己的開發(fā)者賬號(hào)，沒有開發(fā)者賬號(hào)可以用自己的 Apple 賬號(hào)登錄

按照上面的提示，首先修改 BundleID（這里的填寫可以比較隨意），然后使用自己的 Apple ID 登錄賬號(hào)，再選擇自己的真機(jī)（數(shù)據(jù)線連接后可以選擇），選擇后點(diǎn)擊開始編譯，編譯結(jié)束會(huì)安裝到自己的 iPhone 手機(jī)，安裝成功后就會(huì)發(fā)現(xiàn)自己的手機(jī)有兩個(gè)微信了。

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

1. 在 iPhone 上信任自己的開發(fā)者描述文件：「設(shè)置 -> 通用 -> 描述文件 -> 信任你的證書」
2. 在 iPhone 上打開 Safari 調(diào)試功能：「設(shè)置 -> Safari -> 高級 -> Web 檢查器打開」

首先登錄微信賬號(hào)，打開需要調(diào)試的小程序，打開后在 Mac 電腦上打開「Safari -> 開發(fā)」找到自己的 iPhone 手機(jī)，選擇對應(yīng)的頁面就可以進(jìn)行調(diào)試了。

這里說明下：

• JSContext：是小程序的邏輯層代碼，執(zhí)行在 JavaScriptCore 環(huán)境中
• page-frame.html：是小程序的視圖層代碼，執(zhí)行在普通的 WKWebview 中
• 上圖只開了一個(gè)小程序頁面卻顯示了兩個(gè) page-frame.html，說明始終有一個(gè)頁面在后臺(tái)加載，準(zhǔn)備打開小程序的其他頁面

調(diào)試 JSContext

打開 JSContext 之后，找到的第一個(gè) JS 文件實(shí)際就是微信的邏輯層代碼執(zhí)行 waservice.js 了：

另外看到一些 JSBridge.subscribeHandle 的代碼實(shí)際是 Native 實(shí)現(xiàn)的一些方法或事件，然后調(diào)用 JSContext 中的方法回傳數(shù)據(jù)的。下面是點(diǎn)擊事件的一個(gè)截圖，會(huì)看到點(diǎn)擊事件傳遞的數(shù)據(jù)。

調(diào)試 page-frame.html

page-frame 的頁面是普通的 WebView 容器，可以在 Safari 中直接 debug，下面我打開了自己正在開發(fā)的項(xiàng)目，通過 Console 面板修改 #canvas-wrapper 節(jié)點(diǎn)的內(nèi)容：

修改后，在手機(jī)上看到效果：

這說明實(shí)際 WebView 內(nèi)是可以進(jìn)行 DOM 操作的，而且也可以使用普通的 BOM 對象，如 alert、location等。

使用 Reveal 查看 UI 布局

如果要研究微信小程序的布局，可以使用 Reveal 軟件來查看 UI 布局。如下圖所示，在今日頭條的小程序布局中，可以看到播放器組件是 Native 實(shí)現(xiàn)的組件，而我們做的新鮮天氣小程序的雨雪效果 Canvas 也是 Native 實(shí)現(xiàn)的。

要開啟 Reveal，需要經(jīng)過下面的步驟：

1. 安裝 Reveal，然后通過菜單「Help -> Show Reveal Library in Finder -> iOS Library」，打開 RevealServer.framework 所在目錄
2. 將 RevealServer.framework 復(fù)制到 IPAPatch 的 Assets/Frameworks/ 內(nèi)
   

上面兩個(gè)步驟如果都正確，再次用 Xcode 打開 IPAPatch 編譯運(yùn)行，打開小程序后，會(huì)在 Reveal 中看到可以操作了。

這時(shí)候點(diǎn)擊 icon 就可以隨意查看 UI 布局了。

廣告時(shí)間

最近由于小程序·云開發(fā)的推出，我發(fā)現(xiàn)使用云開發(fā)，可以大大降低小程序的開發(fā)門檻，以前很多靈光乍現(xiàn)的點(diǎn)子，往往因?yàn)槿狈蠖酥R(shí)或者缺少后端服務(wù)器沒有得到實(shí)現(xiàn)，現(xiàn)在使用小程序云開發(fā)提供的接口完全可以實(shí)現(xiàn)。

于是我自己用云開發(fā)的 API 實(shí)現(xiàn)了一個(gè)「新鮮天氣」的小程序，并將我在開發(fā)中的過程以及比較好的經(jīng)驗(yàn)，整理成了一本電子書，放在了騰訊云學(xué)院上《從0到1實(shí)現(xiàn)天氣查詢小程序》。

這份實(shí)戰(zhàn)課程以打造一款擁有天氣預(yù)報(bào)和簽到功能的小程序?yàn)橹骶€，從基礎(chǔ)知識(shí)到小程序運(yùn)行機(jī)制，從開發(fā)環(huán)境搭建到小程序開發(fā)、調(diào)試、上線，打通微信小程序開發(fā)全流程，讓新手可以從零開始完成并上線一個(gè)小程序。主要有以下三部分組成：

• 小程序開發(fā)基礎(chǔ)知識(shí)：微信小程序、小程序云的開發(fā)基礎(chǔ)知識(shí)，最小程序的運(yùn)行機(jī)制
• 實(shí)戰(zhàn)開發(fā)「新鮮天氣」小程序：小程序開發(fā)壞境搭建、新鮮天氣小程序簡介、天氣預(yù)報(bào)頁面布局開發(fā)，頁面數(shù)據(jù)交互
• 優(yōu)化到上線：從多個(gè)方面介紹小程序優(yōu)化的知識(shí)點(diǎn)，并且完成小程序的上線
  

當(dāng)然，這份實(shí)戰(zhàn)課程收取一部分費(fèi)用，不過價(jià)格比較便宜，希望能夠?qū)ο雽W(xué)習(xí)或者正在進(jìn)行小程序開發(fā)的你有所幫助。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站aaarwkj.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、建站服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁題目：iOS真機(jī)調(diào)試微信小程序-創(chuàng)新互聯(lián)
網(wǎng)站路徑：http://aaarwkj.com/article34/ccpgpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、響應(yīng)式網(wǎng)站、靜態(tài)網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)