微信Web開發者工具調試一元云購買項目

發表時間：2019-07-30 15:58:50

文章來源：沈陽軟件開發

標簽：網站建設小程序開發小程序制作微信小程序開發公眾號開發微信公眾號開發網頁設計網站優化網站排名網站設計微信小程序設計小程序定制微信小程序定制

瀏覽次數：0

為了幫助開發人員更方便，更安全地開發和調試基于微信的網頁，微信引入了Web開發人員工具。它是一個模擬微信客戶端性能的桌面應用程序，允許開發人員使用此工具在PC或Mac上輕松開發和調試。立即下載體驗

你可以：

使用您自己的微信調試微信網頁授權調試，驗證JS-SDK相關的頁面功能和權限，模擬大多數SDK的輸入和輸出，并使用集成的Chrome DevTools協助開發移動調試功能基于weinre

工具界面主要由幾部分組成，如下圖所示：

頂部菜單欄是一個統一的條目，用于執行刷新，返回和選定的地址欄等操作，以及微信客戶端版本的模擬設置頁面。左邊是微信的webview模擬器，它可以直接操作網頁來模擬用戶的真實行為。右上角是地址欄，用于輸入要調試的頁面的鏈接，以及清除緩存按鈕。右下方是相關的請求和返回結果，以及調試界面和登錄按鈕。

調試微信網頁授權

在開發基于微信的網頁授權功能時，開發人員通常需要在手機上輸入URL以獲取用戶信息以進行開發和調試。然而，由于移動電話的限制，這個過程非常不方便。通過使用微信 Web開發人員工具，開發人員可以直接在PC或Mac上執行此操作。具體步驟如下：

開發人員可以在調試器中單擊“登錄”并使用移動微信掃描代碼登錄并使用真實用戶身份來開發和調試微信網頁授權。請確認手機登錄頁面，公共號碼為“微信 web開發工具”，如下圖所示：

為了確保開發人員身份信息的安全性，對于想要調試的公共號碼，我們要求開發人員微信與之建立綁定關系。具體操作如下：公共號碼登錄管理后臺，啟用開發人員中心，并將綁定邀請發送到開發人員工具—— Web開發人員工具頁面上的開發人員微信。綁定頁面如下所示：

開發人員接受電話微信上的邀請以完成綁定。每個公共號碼可以同時綁定到最多10個開發人員微信。邀請確認頁面如下所示：

登錄和綁定后，開發人員可以開始調試微信網頁授權：

非靜默授權URL：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_userinfo&state=type%3Dquan% 2Curl％3Dhttp％3A％2F％2Fmm.dianping.com％2Fweixin％2Faccount％2Fhome

在微信 Web開發人員工具中打開此URL，webview模擬器顯示效果，如下所示：

單擊“確認登錄”，將用戶信息跳轉到第三方頁面，便于后續開發和調試。

靜默授權的URL：https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx841a97238d9e17b2&redirect_uri=http://cps.dianping.com/weiXinRedirect&response_type=code&scope=snsapi_base&state=type%3Dquan%2Curl ％3Dhttp％3A％2F％2Fmm.dianping.com％2Fweixin％2Faccount％2Fhome

在微信 Web開發人員工具中打開URL將自動跳轉到第三方頁面。

模擬JSSDK權限檢查

通過Web開發人員工具，您可以在微信客戶端中模擬JSSDK請求，并直觀地查看身份驗證結果和日志。以微信 JSSDK DEMO頁面為例：

http://demo.open.weixin.qq.com/jssdk

在調試器中打開URL，您可以在右側的JS-SDK選項卡中輕松查看當前頁面wx.config和JSSDK調用日志的校驗和。以下是驗證頁面：