開發(fā)場(chǎng)景：公眾號(hào)嵌入vue項(xiàng)目地址，需要使用wx授權(quán)的定位及分享接口

官方文檔：linhttps://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

開始之前，先放遇到的兩個(gè)坑，特別容易遇到并出錯(cuò)

1.wx.config中使用的url和當(dāng)前路徑的必須一致

舉個(gè)例子：我想在項(xiàng)目的一開始的頁面就初始化， 調(diào)用wx.config，在后續(xù)的頁面中再調(diào)用具體的API，像是定位接口wx.getLocation。

用路徑翻譯一下就好比pages/index中調(diào)用wx.config，在pages/info中調(diào)用wx.getLocation，這種是不可以的。不符合微信 JSSDK 的核心安全機(jī)制，若路由切換導(dǎo)致 URL 的 path 或 hash 變化，必須重新生成簽名并調(diào)用 wx.config

2.iOS 手機(jī)上 wx.config 方法中的 realAuthUrl 與 location.href 不一致，導(dǎo)致簽名驗(yàn)證失敗

這個(gè)問題很惡心，排查了很久。表象就是代碼，配置，接口都沒問題，等驗(yàn)證的時(shí)候，安卓設(shè)備沒問題，但是IOS設(shè)備config一直失敗，錯(cuò)誤提示給了一個(gè)realAuthUrl路徑。

原因分析路由切換時(shí)操作的是瀏覽器的歷史記錄，iOS會(huì)把第一次剛進(jìn)入時(shí)的URL作為真實(shí)URL，安卓會(huì)把當(dāng)前URL作為真實(shí)URL，導(dǎo)致后端在配置好的授權(quán)參數(shù)獲得的config參數(shù)和微信sdk獲取的參數(shù)是不一樣的，所以ios的url參數(shù)對(duì)不上會(huì)一直報(bào)錯(cuò)realAuthUrl invalid signature 當(dāng)然別忘記ios是哈希路由模式 也需要將#后面部分進(jìn)行截取否則也會(huì)導(dǎo)致無法對(duì)應(yīng)

解決方式如下：

簡(jiǎn)單概括就是先記錄第一次進(jìn)入的URL，如果是IOS設(shè)備，就使用這個(gè)記錄的

//app.vue
onMounted(()=>{
	//因?yàn)椴糠智闆r會(huì)導(dǎo)致這邊存入未更新  所以進(jìn)行更保險(xiǎn)的清除
	localStorage.removeItem('wxUrl')
	localStorage.setItem('wxUrl', location.href.split('#')[0])
})

//需要使用的地方（info.vue）
const wxConfig = () =>{
	let signLink = ''
	let ua = navigator.userAgent.toLowerCase()
	// 判斷設(shè)備為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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
	    appId: ..., // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)，此處填寫企業(yè)號(hào)corpid
	    timestamp: res.timestamp, // 必填，生成簽名的時(shí)間戳
	    nonceStr: res.nonceStr, // 必填，生成簽名的隨機(jī)串
	    signature: res.signature,// 必填，簽名
	    jsApiList: [
	      'previewImage',
	      'uploadImage',
	      'downloadImage',
	      'getLocation',
	    ] // 必填，需要使用的JS接口列表
	})
}
  

回到正題，說對(duì)接的步驟

1.綁定域名

• 可登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
• 或者前往微信開發(fā)者平臺(tái) - 公眾號(hào)或服務(wù)號(hào) - 基本信息 - 開發(fā)信息 進(jìn)行修改

  

開發(fā)環(huán)境或者測(cè)試環(huán)境推薦使用微信公眾平臺(tái)接口測(cè)試帳號(hào)微信掃個(gè)碼就可以使用，非常方便
地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

進(jìn)去后需要配置JS接口安全域名，接口配置信息可以空著，需要的appID和appsecret系統(tǒng)默認(rèn)生成了

2.引入JS文件

• 可以直接在入口html中引入（支持https）

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

• 或者把該文件下載下來，放在項(xiàng)目里引入

3.通過config接口注入權(quán)限驗(yàn)證配置,就是調(diào)用wx.config

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

講講開發(fā)心得，這些字段都是怎么獲得的。
前端主導(dǎo)appId：唯一標(biāo)識(shí)，公眾號(hào)上有（微信公眾平臺(tái)接口測(cè)試帳號(hào)也提供）
timestamp：隨便找個(gè)生成時(shí)間戳的函數(shù)（長(zhǎng)度其實(shí)沒有要求，官方驗(yàn)證工具是10位），可參考下面函數(shù)getCurrentTimeStamp
nonceStr：隨便找個(gè)生成隨機(jī)串的函數(shù)（數(shù)字和字母組成），可參考下面函數(shù)getRandomString
signature：生成的簽名。需要后端接口生成，前端的入?yún)⑹莻€(gè)字符串，格式要長(zhǎng)這個(gè)樣子
jsapi_ticket=占位&noncestr=占位&timestamp=占位&url=占位noncestr和timestamp已經(jīng)有了，拼上去就好
jsapi_ticket的值也需要后端返回（讓后端查下如何生成jsapi_ticket，這里多提一嘴，jsapi_ticket的值是怎么來的，首先用appId和appsecret換取token，再用這個(gè)token換取jsapi_ticket）
url的值是當(dāng)前頁面的路由，用location.href.split(‘#’)[0]，這里就是文章開頭的坑2了！?。?br />后端主導(dǎo)就是把上面的事情都讓后端去做，請(qǐng)求一個(gè)接口，入?yún)⑹莡rl，接口把timestamp，nonceStr，signature都吐出來。
那如何驗(yàn)證最終生成的signature是否正確呢？官方給了一個(gè)驗(yàn)證工具
地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign把這些值填入，如果和官方生成的signature一致，那就正確了

> jsApiList：使用的功能（定位，分享，語音），用啥寫啥

// 獲取當(dāng)前的時(shí)間戳字符串
export const getCurrentTimeStamp = () => {
  return new Date().getTime().toString()
}

// 生成字母數(shù)字隨機(jī)數(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接口處理成功驗(yàn)證

wx.ready(function(){
  // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

5.通過error接口處理失敗驗(yàn)證

wx.error(function(res){
  // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});

如果ready方法執(zhí)行了，error沒有報(bào)錯(cuò)，后面就可以參考官方文檔調(diào)用具體的API了

總結(jié)

到此這篇關(guān)于使用JS-SDK開發(fā)公眾號(hào)微信網(wǎng)頁的文章就介紹到這了,更多相關(guān)JS-SDK開發(fā)公眾號(hào)微信網(wǎng)頁內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論