微信web開發(fā)者工具 ios怎么使用

微信web開發(fā)者工具主要功能：

成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：網站設計制作、網站建設、企業(yè)官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯(lián)網時代的云浮網站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

使用自己的微信號來調試微信網頁授權；

調試、檢驗頁面的 JS-SDK 相關功能與權限，模擬大部分 SDK 的輸入和輸出；

使用基于 weinre 的移動調試功能；

利用集成的 Chrome DevTools 協(xié)助開發(fā)。

　

　工具頂部菜單欄是刷新、后退、選中地址欄等動作的統(tǒng)一入口，以及微信客戶端版本的模擬設置頁。左側是微信的 webview 模擬器，可以直接操作網

頁，模擬用戶真實行為。右側上方是地址欄，用于輸入待調試的頁面鏈接，以及清除緩存按鈕。右側下方是相關的請求和返回結果，以及調試界面和登錄按鈕。

微信web開發(fā)者工具怎么使用

微信web開發(fā)者工具使用，用到的工具：電腦，步驟如下：

下載安裝微信web開發(fā)者工具，打開微信web開發(fā)者工具界面如下：

2.輸入要調試微信程序的url，并選擇移動設備的類型（安卓或者ios），以安卓為例：

說明：左邊選擇相應的區(qū)塊，右邊的代碼就會追蹤到。

注意事項：打開調試工具中的url需要微信公眾號平臺授權登錄微信web開發(fā)者工具。

微信開發(fā)者工具——移動調試的簡單使用

?目前主要是做PC端項目，但是偶爾也會有移動端需求提來，有在原生APP中的，也有在微信和瀏覽器中的，目前也就接觸過這三個場景，對于移動端的坑入得也不深，本文介紹也是偏應用，如有不足請見諒。

一、開發(fā)移動端頁面的工具

①移動端瀏覽器頁面

? ?這里開發(fā)靜態(tài)頁面的做法和普通的PC頁面開發(fā)一樣，使用chrome瀏覽器進行開發(fā)和調試，但是不一樣的地方是把PC端的開發(fā)模式切換到手機開發(fā)模式（PC調試模式切換到移動端，點亮圖中 ②即可，圖中①處可以模擬不同移動端設備，同時可以自己添加設備），效果如下：

該方式可以直接調試

②嵌入APP中的移動端頁面

? ?對于某些經常舉辦針對用戶活動的APP對于嵌入H5頁面的需求是比較多的。因為這樣會節(jié)省開發(fā)的成本、減少原生APP的迭代速度、對用戶友好。

? ?開發(fā)嵌入原生APP的方式和第一種方式基本一致，唯一和第一種方式有些差別的是：如果h5頁面和原生APP存在一些交互（js需要獲取原生APP放回的數(shù)據(jù)），這種方式是沒法做到的，因為上述方式是放在瀏覽器這個APP下的，而不是某個特定的原生APP。

解決方法：

? ? 先和原生APP開發(fā)的同事商議好接口，使用方式一進行靜態(tài)頁面開發(fā)（這里面要寫好正常的邏輯），然后與后臺同事聯(lián)調好接口，發(fā)不到測試，最后與原生開發(fā)的同事進行測試環(huán)境聯(lián)調。過程看起來復雜，如果原生接口沒問題，一般很快搞定。缺點就是和原生聯(lián)調的時候，如果有問題，不好排查。（不知各位有什么好的方法，請指教！）

③開發(fā)微信端頁面

? ?其實這個不應該拎出來說的，因為微信頁面和在普通瀏覽器頁面“一樣”，可以認為微信中瀏覽網頁就是在用QQ瀏覽器瀏覽。所以不再贅述。

總結：移動端開發(fā)，還是f12“大法”，然后切換移動調試就行了。

二、微信開發(fā)者工具之移動調試的使用

? ?對于f12開發(fā)小型的頁面是沒問題的，但是如果是基于微信的項目就有些力不從心了。所以大部分針對微信開發(fā)的項目基本上都可以使用 微信開發(fā)者工具 。

針對微信的開發(fā)者工具，真的是極大的方便了開發(fā)微信項目的效率。

? ?下面是一個應用于本地的個稅計算器（其實控制臺操作和瀏覽器f12基本一致，所以這個東西前端的同事一般立馬上手）：

? ?但是，這個開發(fā)者工具雖然是微信官方開發(fā)工具，但是畢竟是模擬器，現(xiàn)實情況的復雜會導致有些樣式不兼容。例如vivo的微信客戶端，顯示總是錯亂的（測試的同事發(fā)現(xiàn)的問題，她的手機可以還原場景，但是我的手機端是正常的）。所以，我們需要有針對性的在這款手機真機上調試，如何做呢？下面簡要介紹如何利用微信開發(fā)者工具進行真機調試。

? ?相對于iOS移動端調試，Android移動端調試更豐富一點，所以以安卓為例，ios調試方式同Android調試中的“普通調試”。

①普通調試

普通調試的步驟如下：

步驟解釋：

第一步：選擇無線網卡地址，默認即可，工具會自動查詢你的無線網卡ip v4地址

第二步：意思就是你的手機連接的網絡要和第一步得到的ip v4在同一個網段內（什么是網段？看這里）。簡單的做法就是把手機的網絡和電腦的網絡設置為同一個源（連接到同一個無線網上）

第三步：這個步驟很清楚了，還有一個快捷的方式就是“下拉工具欄——長按無線連接圖標”然后就可以直接進入到無線列表在做后續(xù)操作了。iOS操作如下：

iOS： 設置 - 無線局域網 - 選中網絡 - HTTP代理手動

第四步：設置好上面步驟以后，重啟微信，這可能是讓微信重新檢測目前的網絡情況，然后打開你想調試的頁面（注意，要先打開要調試的頁面才可以開始調試）

第五步：這個不在上面的說明里，但是需要說明下，打開調試的網頁以后，在點擊下面的開始調試按鈕！

如果你的操作正確，彈出框會是這樣的：

如果你當前沒有在微信打開調試頁面或打開的本地頁面地址錯誤，則會失敗：

? ?請注意 ，如果你想調試本地開發(fā)的頁面，需要你開啟web服務，使用;:port的方式來訪問，如果只是一個本地頁面，是無法打開調試的，形如webstrom里面快捷打開的頁面地址： 這個是無法調試的。需要你搭建WEB服務，使用類似于 這種url。（ 這種寫法也是無法調試的，因為微信根本打不開）。

調試模式開啟以后，我們就可以直接在手機上查看調試的結果或者修改東西：

我選中這里，手機就會有類似于PC端選中的狀態(tài)一樣被選中

? ?好了，可以直接看著手機調頁面了，對于一些手機端的兼容性處理更有針對性，而且可以在network那里看網絡請求，十分方便。

②X5 blink內核調試

X5 blink調試步驟如下：

?首先開發(fā)者工具要驗證你的手機是不是支持該調試功能，所以，首先選擇驗證，然后在按下面的步驟做：

? ?上面三步結束以后，直接點擊開始調試按鈕，工具會給出一個彈框，檢測出你的手機信息，但是其他什么都沒有，像這樣

那是因為——微信還沒有打開能調試的頁面！！！

同樣，打開一個能調試的頁面，這個“白板”就變了樣子了，

注意：過程中會提示“是否允許USB調試”，選擇同意即可

然后點擊箭頭指向的“inspect”，熟悉的畫面再次出現(xiàn)！！！

好啦，這樣就可以愉快的去調試真機界面了！

本文以應用為主，說的不深，不足之處還請見諒！

心如繁星，是美還是罪？

為什么微信開發(fā)工具調試好的，到了ios上就不行了

你確定你的微信是最新版本嗎？微信最新版本客戶端，6.5.3版本以上，測試版不行，記得去應用市場看看有沒有更新到最新。然后就在「發(fā)現(xiàn)Tab」，有個「小程序」的按鈕。點進去，右上角有個「搜索按鈕」，點進去即可搜索。但是它只支持精準搜索，你打錯字，少打字都是搜索不到的。

本文名稱：微信開發(fā)者工具ios,微信開發(fā)者工具怎么導入項目
當前路徑：http://chinadenli.net/article21/dsgspcd.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網站導航、網站設計公司、網站收錄、商城網站、企業(yè)網站制作

廣告

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