使用JS-SDK開發(fā)公眾號微信網(wǎng)頁的完整步驟
開發(fā)場景:公眾號嵌入vue項目地址,需要使用wx授權的定位及分享接口
官方文檔:linhttps://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
開始之前,先放遇到的兩個坑,特別容易遇到并出錯
1.wx.config中使用的url和當前路徑的必須一致
舉個例子:我想在項目的一開始的頁面就初始化, 調用wx.config,在后續(xù)的頁面中再調用具體的API,像是定位接口wx.getLocation。
用路徑翻譯一下就好比pages/index中調用wx.config,在pages/info中調用wx.getLocation,這種是不可以的。不符合微信 JSSDK 的核心安全機制,若路由切換導致 URL 的 path 或 hash 變化,必須重新生成簽名并調用 wx.config
2.iOS 手機上 wx.config 方法中的 realAuthUrl 與 location.href 不一致,導致簽名驗證失敗
這個問題很惡心,排查了很久。表象就是代碼,配置,接口都沒問題,等驗證的時候,安卓設備沒問題,但是IOS設備config一直失敗,錯誤提示給了一個realAuthUrl路徑。
原因分析路由切換時操作的是瀏覽器的歷史記錄,iOS會把第一次剛進入時的URL作為真實URL,安卓會把當前URL作為真實URL,導致后端在配置好的授權參數(shù)獲得的config參數(shù)和微信sdk獲取的參數(shù)是不一樣的,所以ios的url參數(shù)對不上會一直報錯realAuthUrl invalid signature 當然別忘記ios是哈希路由模式 也需要將#后面部分進行截取否則也會導致無法對應
解決方式如下:
簡單概括就是先記錄第一次進入的URL,如果是IOS設備,就使用這個記錄的
//app.vue onMounted(()=>{ //因為部分情況會導致這邊存入未更新 所以進行更保險的清除 localStorage.removeItem('wxUrl') localStorage.setItem('wxUrl', location.href.split('#')[0]) }) //需要使用的地方(info.vue) const wxConfig = () =>{ let signLink = '' let ua = navigator.userAgent.toLowerCase() // 判斷設備為ios還是安卓 if (/iphone|ipad|ipod/.test(ua)) { //ios signLink = localStorage.getItem('wxUrl') || '' } else { //安卓 signLink = location.href.split('#')[0] } // 走后端接口,獲取timestamp,nonceStr,signature等信息 const res = await configInfo(signLink) wx.config({ debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 appId: ..., // 必填,企業(yè)號的唯一標識,此處填寫企業(yè)號corpid timestamp: res.timestamp, // 必填,生成簽名的時間戳 nonceStr: res.nonceStr, // 必填,生成簽名的隨機串 signature: res.signature,// 必填,簽名 jsApiList: [ 'previewImage', 'uploadImage', 'downloadImage', 'getLocation', ] // 必填,需要使用的JS接口列表 }) }
回到正題,說對接的步驟
1.綁定域名
- 可登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
- 或者前往微信開發(fā)者平臺 - 公眾號或服務號 - 基本信息 - 開發(fā)信息 進行修改
開發(fā)環(huán)境或者測試環(huán)境推薦使用微信公眾平臺接口測試帳號微信掃個碼就可以使用,非常方便
地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
進去后需要配置JS接口安全域名,接口配置信息可以空著,需要的appID和appsecret系統(tǒng)默認生成了
2.引入JS文件
- 可以直接在入口html中引入(支持https)
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 或者把該文件下載下來,放在項目里引入
3.通過config接口注入權限驗證配置,就是調用wx.config
wx.config({ debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 appId: '', // 必填,公眾號的唯一標識 timestamp: , // 必填,生成簽名的時間戳 nonceStr: '', // 必填,生成簽名的隨機串 signature: '',// 必填,簽名 jsApiList: [] // 必填,需要使用的JS接口列表 });
講講開發(fā)心得,這些字段都是怎么獲得的。
前端主導appId
:唯一標識,公眾號上有(微信公眾平臺接口測試帳號也提供)timestamp
:隨便找個生成時間戳的函數(shù)(長度其實沒有要求,官方驗證工具是10位),可參考下面函數(shù)getCurrentTimeStampnonceStr
:隨便找個生成隨機串的函數(shù)(數(shù)字和字母組成),可參考下面函數(shù)getRandomStringsignature
:生成的簽名。需要后端接口生成,前端的入?yún)⑹莻€字符串,格式要長這個樣子
jsapi_ticket=占位&noncestr=占位×tamp=占位&url=占位noncestr和timestamp已經(jīng)有了,拼上去就好
jsapi_ticket的值也需要后端返回(讓后端查下如何生成jsapi_ticket,這里多提一嘴,jsapi_ticket的值是怎么來的,首先用appId和appsecret換取token,再用這個token換取jsapi_ticket)
url的值是當前頁面的路由,用location.href.split(‘#’)[0],這里就是文章開頭的坑2了!?。?br />后端主導就是把上面的事情都讓后端去做,請求一個接口,入?yún)⑹莡rl,接口把timestamp,nonceStr,signature都吐出來。
那如何驗證最終生成的signature是否正確呢?官方給了一個驗證工具
地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign把這些值填入,如果和官方生成的signature一致,那就正確了
>
jsApiList
:使用的功能(定位,分享,語音),用啥寫啥
// 獲取當前的時間戳字符串 export const getCurrentTimeStamp = () => { return new Date().getTime().toString() } // 生成字母數(shù)字隨機數(shù)字符串 export const getRandomString = (length: number) => { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' let result = '' for (let i = 0; i < length; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)) } return result }
4.通過ready接口處理成功驗證
wx.ready(function(){ // config信息驗證后會執(zhí)行ready方法,所有接口調用都必須在config接口獲得結果之后,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數(shù)中調用來確保正確執(zhí)行。對于用戶觸發(fā)時才調用的接口,則可以直接調用,不需要放在ready函數(shù)中。 });
5.通過error接口處理失敗驗證
wx.error(function(res){ // config信息驗證失敗會執(zhí)行error函數(shù),如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數(shù)中查看,對于SPA可以在這里更新簽名。 });
如果ready方法執(zhí)行了,error沒有報錯,后面就可以參考官方文檔調用具體的API了
總結
到此這篇關于使用JS-SDK開發(fā)公眾號微信網(wǎng)頁的文章就介紹到這了,更多相關JS-SDK開發(fā)公眾號微信網(wǎng)頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
js編碼之encodeURIComponent使用介紹(asp,php)
因此對于JS腳本又重新研究了一下。在對新的URL編碼的時候發(fā)現(xiàn),網(wǎng)頁編碼的格式對于JS的影響很大,在這里書寫一點2012-03-03