微信web開發者工具使用教程
發表時(shí)間:2016-12-13
發布人(rén):融晨科技
浏覽次數:62
1、首先用戶需要(yào / yāo)做的(de)就(jiù)是(shì)先下載安裝,并啓工具。 即刻下載使用==》微信web開發者工具下載 2、調試微信網頁授權,具體操作步驟爲(wéi / wèi): 1)開發者可以(yǐ)在(zài)調試器中點擊“登錄”,使用手機微信掃碼登錄,從而(ér)使用真實的(de)用戶身份來(lái)開發和(hé / huò)調試微信網頁授權。請确認手機登錄頁,綁定的(de)公衆号爲(wéi / wèi)“微信 web 開發者工具”。 2)爲(wéi / wèi)了(le/liǎo)保證開發者身份信息的(de)安全,對于(yú)希望調試的(de)公衆号,我們要(yào / yāo)求開發者微信号與之(zhī)建立綁定關系。具體操作爲(wéi / wèi):公衆号登錄管理後台,啓用開發者中心,在(zài)開發者工具——web 開發者工具頁面,向開發者微信号發送綁定邀請。 3)開發者在(zài)手機微信上(shàng)接受邀請,即可完成綁定。每個(gè)公衆号最多可同時(shí)綁定10個(gè)開發者微信号。邀請确認頁面如下圖所示: 4)完成登錄和(hé / huò)綁定後,開發者就(jiù)可以(yǐ)開始調試微信網頁授權了(le/liǎo),注意隻能調試自己綁定過的(de)公衆号: 非靜默授權的(de) URL:點擊查看 在(zài)微信 web 開發者工具中上(shàng)面的(de) URL,webview 模拟器顯示效果如圖: 點擊“确認登錄”即可帶着用戶信息跳轉到(dào)第三方頁面,很方便的(de)進行後續的(de)開發和(hé / huò)調試。 靜默授權的(de) URL:點擊查看 在(zài)微信 web 開發者工具中打開該 URL 則會自動跳轉到(dào)第三方頁面。 (注意:如果使用了(le/liǎo)代理,需代理本身支持https直連,才能調試https頁面。) 3、模拟JSSDK權限校驗 通過 web 開發者工具,可以(yǐ)模拟 JSSDK 在(zài)微信客戶端中的(de)請求,并直觀地(dì / de)看到(dào)鑒權結果和(hé / huò) log。以(yǐ)微信 JSSDK DEMO 頁面爲(wéi / wèi)例: http://demo.open.weixin.qq.com/jssdk 在(zài)調試器中打開該 URL,可以(yǐ)方便地(dì / de)在(zài)右側的(de) JS-SDK Tab 中看到(dào)當前頁面 wx.config 的(de)校驗情況和(hé / huò) JSSDK 的(de)調用 log。 如下是(shì)校驗通過的(de)頁面: 如下是(shì)校驗未通過的(de)頁面: 在(zài)“權限列表” Tab 中,可以(yǐ)查詢到(dào)當前頁面擁有權限的(de) JS-SDK 列表: 4、移動調試 移動調試功能是(shì)基于(yú) weinre 的(de),并且做了(le/liǎo)一些改進,相比直接使用 weinre 有兩個(gè)優點: 1)無須手工在(zài)頁面中加入 weinre 調試腳本 2)可以(yǐ)在(zài) weinre 的(de)網絡請求頁卡中,看到(dào)完整的(de) http 請求 log,非局限于(yú) ajax 請求 (注意,移動調試功能暫不(bù)支持https。) 5、Chrome DevTools 微信 web 開發者工具集成了(le/liǎo) Chrome DevTools。同之(zhī)前在(zài) PC 上(shàng)的(de)調試體驗一緻,可以(yǐ)快速上(shàng)手。 以(yǐ)上(shàng)内容就(jiù)是(shì)微信web開發者工具的(de)一些基本使用方法,畢竟是(shì)一款适合開發人(rén)員使用的(de)“高大(dà)上(shàng)”軟件,對于(yú)小編這(zhè)種“文盲”來(lái)說(shuō)是(shì)根本不(bù)知道(dào)軟件的(de)具體使用方法的(de),這(zhè)個(gè)還需要(yào / yāo)開發者自行摸索,相信它一定能夠成爲(wéi / wèi)開發者開發必備的(de)利器。