建站
咨詢
售后
建站咨詢
新聞中心
微信web開發(fā)者工具 ios怎么使用
微信web開發(fā)者工具主要功能：
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計(jì)制作、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的云浮網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
使用自己的微信號(hào)來(lái)調(diào)試微信網(wǎng)頁(yè)授權(quán)；
調(diào)試、檢驗(yàn)頁(yè)面的 JS-SDK 相關(guān)功能與權(quán)限，模擬大部分 SDK 的輸入和輸出；
使用基于 weinre 的移動(dòng)調(diào)試功能；
利用集成的 Chrome DevTools 協(xié)助開發(fā)。
工具頂部菜單欄是刷新、后退、選中地址欄等動(dòng)作的統(tǒng)一入口，以及微信客戶端版本的模擬設(shè)置頁(yè)。左側(cè)是微信的 webview 模擬器，可以直接操作網(wǎng)
頁(yè)，模擬用戶真實(shí)行為。右側(cè)上方是地址欄，用于輸入待調(diào)試的頁(yè)面鏈接，以及清除緩存按鈕。右側(cè)下方是相關(guān)的請(qǐng)求和返回結(jié)果，以及調(diào)試界面和登錄按鈕。
微信web開發(fā)者工具怎么使用
微信web開發(fā)者工具使用，用到的工具：電腦，步驟如下：
下載安裝微信web開發(fā)者工具，打開微信web開發(fā)者工具界面如下：
2.輸入要調(diào)試微信程序的url，并選擇移動(dòng)設(shè)備的類型（安卓或者ios），以安卓為例：
說(shuō)明：左邊選擇相應(yīng)的區(qū)塊，右邊的代碼就會(huì)追蹤到。
注意事項(xiàng)：打開調(diào)試工具中的url需要微信公眾號(hào)平臺(tái)授權(quán)登錄微信web開發(fā)者工具。
微信開發(fā)者工具——移動(dòng)調(diào)試的簡(jiǎn)單使用
?目前主要是做PC端項(xiàng)目，但是偶爾也會(huì)有移動(dòng)端需求提來(lái)，有在原生APP中的，也有在微信和瀏覽器中的，目前也就接觸過(guò)這三個(gè)場(chǎng)景，對(duì)于移動(dòng)端的坑入得也不深，本文介紹也是偏應(yīng)用，如有不足請(qǐng)見諒。
一、開發(fā)移動(dòng)端頁(yè)面的工具
①移動(dòng)端瀏覽器頁(yè)面
? ?這里開發(fā)靜態(tài)頁(yè)面的做法和普通的PC頁(yè)面開發(fā)一樣，使用chrome瀏覽器進(jìn)行開發(fā)和調(diào)試，但是不一樣的地方是把PC端的開發(fā)模式切換到手機(jī)開發(fā)模式（PC調(diào)試模式切換到移動(dòng)端，點(diǎn)亮圖中 ②即可，圖中①處可以模擬不同移動(dòng)端設(shè)備，同時(shí)可以自己添加設(shè)備），效果如下：
該方式可以直接調(diào)試
②嵌入APP中的移動(dòng)端頁(yè)面
? ?對(duì)于某些經(jīng)常舉辦針對(duì)用戶活動(dòng)的APP對(duì)于嵌入H5頁(yè)面的需求是比較多的。因?yàn)檫@樣會(huì)節(jié)省開發(fā)的成本、減少原生APP的迭代速度、對(duì)用戶友好。
? ?開發(fā)嵌入原生APP的方式和第一種方式基本一致，唯一和第一種方式有些差別的是：如果h5頁(yè)面和原生APP存在一些交互（js需要獲取原生APP放回的數(shù)據(jù)），這種方式是沒(méi)法做到的，因?yàn)樯鲜龇绞绞欠旁跒g覽器這個(gè)APP下的，而不是某個(gè)特定的原生APP。
解決方法：
? ? 先和原生APP開發(fā)的同事商議好接口，使用方式一進(jìn)行靜態(tài)頁(yè)面開發(fā)（這里面要寫好正常的邏輯），然后與后臺(tái)同事聯(lián)調(diào)好接口，發(fā)不到測(cè)試，最后與原生開發(fā)的同事進(jìn)行測(cè)試環(huán)境聯(lián)調(diào)。過(guò)程看起來(lái)復(fù)雜，如果原生接口沒(méi)問(wèn)題，一般很快搞定。缺點(diǎn)就是和原生聯(lián)調(diào)的時(shí)候，如果有問(wèn)題，不好排查。（不知各位有什么好的方法，請(qǐng)指教?。?/p>
③開發(fā)微信端頁(yè)面
? ?其實(shí)這個(gè)不應(yīng)該拎出來(lái)說(shuō)的，因?yàn)槲⑿彭?yè)面和在普通瀏覽器頁(yè)面“一樣”，可以認(rèn)為微信中瀏覽網(wǎng)頁(yè)就是在用QQ瀏覽器瀏覽。所以不再贅述。
總結(jié)：移動(dòng)端開發(fā)，還是f12“大法”，然后切換移動(dòng)調(diào)試就行了。
二、微信開發(fā)者工具之移動(dòng)調(diào)試的使用
? ?對(duì)于f12開發(fā)小型的頁(yè)面是沒(méi)問(wèn)題的，但是如果是基于微信的項(xiàng)目就有些力不從心了。所以大部分針對(duì)微信開發(fā)的項(xiàng)目基本上都可以使用 微信開發(fā)者工具 。
針對(duì)微信的開發(fā)者工具，真的是極大的方便了開發(fā)微信項(xiàng)目的效率。
? ?下面是一個(gè)應(yīng)用于本地的個(gè)稅計(jì)算器（其實(shí)控制臺(tái)操作和瀏覽器f12基本一致，所以這個(gè)東西前端的同事一般立馬上手）：
? ?但是，這個(gè)開發(fā)者工具雖然是微信官方開發(fā)工具，但是畢竟是模擬器，現(xiàn)實(shí)情況的復(fù)雜會(huì)導(dǎo)致有些樣式不兼容。例如vivo的微信客戶端，顯示總是錯(cuò)亂的（測(cè)試的同事發(fā)現(xiàn)的問(wèn)題，她的手機(jī)可以還原場(chǎng)景，但是我的手機(jī)端是正常的）。所以，我們需要有針對(duì)性的在這款手機(jī)真機(jī)上調(diào)試，如何做呢？下面簡(jiǎn)要介紹如何利用微信開發(fā)者工具進(jìn)行真機(jī)調(diào)試。
? ?相對(duì)于iOS移動(dòng)端調(diào)試，Android移動(dòng)端調(diào)試更豐富一點(diǎn)，所以以安卓為例，ios調(diào)試方式同Android調(diào)試中的“普通調(diào)試”。
①普通調(diào)試
普通調(diào)試的步驟如下：
步驟解釋：
第一步：選擇無(wú)線網(wǎng)卡地址，默認(rèn)即可，工具會(huì)自動(dòng)查詢你的無(wú)線網(wǎng)卡ip v4地址
第二步：意思就是你的手機(jī)連接的網(wǎng)絡(luò)要和第一步得到的ip v4在同一個(gè)網(wǎng)段內(nèi)（什么是網(wǎng)段？看這里）。簡(jiǎn)單的做法就是把手機(jī)的網(wǎng)絡(luò)和電腦的網(wǎng)絡(luò)設(shè)置為同一個(gè)源（連接到同一個(gè)無(wú)線網(wǎng)上）
第三步：這個(gè)步驟很清楚了，還有一個(gè)快捷的方式就是“下拉工具欄——長(zhǎng)按無(wú)線連接圖標(biāo)”然后就可以直接進(jìn)入到無(wú)線列表在做后續(xù)操作了。iOS操作如下：
iOS： 設(shè)置 - 無(wú)線局域網(wǎng) - 選中網(wǎng)絡(luò) - HTTP代理手動(dòng)
第四步：設(shè)置好上面步驟以后，重啟微信，這可能是讓微信重新檢測(cè)目前的網(wǎng)絡(luò)情況，然后打開你想調(diào)試的頁(yè)面（注意，要先打開要調(diào)試的頁(yè)面才可以開始調(diào)試）
第五步：這個(gè)不在上面的說(shuō)明里，但是需要說(shuō)明下，打開調(diào)試的網(wǎng)頁(yè)以后，在點(diǎn)擊下面的開始調(diào)試按鈕！
如果你的操作正確，彈出框會(huì)是這樣的：
如果你當(dāng)前沒(méi)有在微信打開調(diào)試頁(yè)面或打開的本地頁(yè)面地址錯(cuò)誤，則會(huì)失?。?/p>
? ?請(qǐng)注意 ，如果你想調(diào)試本地開發(fā)的頁(yè)面，需要你開啟web服務(wù)，使用;:port的方式來(lái)訪問(wèn)，如果只是一個(gè)本地頁(yè)面，是無(wú)法打開調(diào)試的，形如webstrom里面快捷打開的頁(yè)面地址： 這個(gè)是無(wú)法調(diào)試的。需要你搭建WEB服務(wù)，使用類似于 這種url。（ 這種寫法也是無(wú)法調(diào)試的，因?yàn)槲⑿鸥敬虿婚_）。
調(diào)試模式開啟以后，我們就可以直接在手機(jī)上查看調(diào)試的結(jié)果或者修改東西：
我選中這里，手機(jī)就會(huì)有類似于PC端選中的狀態(tài)一樣被選中
? ?好了，可以直接看著手機(jī)調(diào)頁(yè)面了，對(duì)于一些手機(jī)端的兼容性處理更有針對(duì)性，而且可以在network那里看網(wǎng)絡(luò)請(qǐng)求，十分方便。
②X5 blink內(nèi)核調(diào)試
X5 blink調(diào)試步驟如下：
?首先開發(fā)者工具要驗(yàn)證你的手機(jī)是不是支持該調(diào)試功能，所以，首先選擇驗(yàn)證，然后在按下面的步驟做：
? ?上面三步結(jié)束以后，直接點(diǎn)擊開始調(diào)試按鈕，工具會(huì)給出一個(gè)彈框，檢測(cè)出你的手機(jī)信息，但是其他什么都沒(méi)有，像這樣
那是因?yàn)椤⑿胚€沒(méi)有打開能調(diào)試的頁(yè)面！?。?/p>
同樣，打開一個(gè)能調(diào)試的頁(yè)面，這個(gè)“白板”就變了樣子了，
注意：過(guò)程中會(huì)提示“是否允許USB調(diào)試”，選擇同意即可
然后點(diǎn)擊箭頭指向的“inspect”，熟悉的畫面再次出現(xiàn)！??！
好啦，這樣就可以愉快的去調(diào)試真機(jī)界面了！
本文以應(yīng)用為主，說(shuō)的不深，不足之處還請(qǐng)見諒！
心如繁星，是美還是罪？
為什么微信開發(fā)工具調(diào)試好的，到了ios上就不行了
你確定你的微信是最新版本嗎？微信最新版本客戶端，6.5.3版本以上，測(cè)試版不行，記得去應(yīng)用市場(chǎng)看看有沒(méi)有更新到最新。然后就在「發(fā)現(xiàn)Tab」，有個(gè)「小程序」的按鈕。點(diǎn)進(jìn)去，右上角有個(gè)「搜索按鈕」，點(diǎn)進(jìn)去即可搜索。但是它只支持精準(zhǔn)搜索，你打錯(cuò)字，少打字都是搜索不到的。
網(wǎng)頁(yè)標(biāo)題：微信開發(fā)者工具ios,微信開發(fā)者工具怎么導(dǎo)入項(xiàng)目
文章轉(zhuǎn)載：http://fisionsoft.com.cn/article/dsgspcd.html
