項(xiàng)目場(chǎng)景：

公眾號(hào)網(wǎng)頁開發(fā) 請(qǐng)求微信授權(quán) 調(diào)用微信SDK

問題描述：

項(xiàng)目在安卓上順利運(yùn)行 在iOS 無法調(diào)起微信SDK 報(bào)錯(cuò)為簽名錯(cuò)誤

原因分析：

1. 在安卓能跑通 說明后端的簽名算法正確 問題還在前端
2. 百度發(fā)現(xiàn) 微信瀏覽器中 iOS使用的wkwebview內(nèi)核 不會(huì)對(duì)vue-router反應(yīng) 只記錄了第一次進(jìn)入頁面地址 微信授權(quán)放在APP.vue中 使用localtion的方法或方法強(qiáng)行重置歷史記錄 會(huì)導(dǎo)致APP.vue刷新 頁面不停循環(huán)跳轉(zhuǎn) 走不通
3. 因此判斷在iOS設(shè)備上 使用第一次進(jìn)入地址去配置config 但是還是簽名錯(cuò)誤 繼續(xù)尋找問題所在
   之后各種手動(dòng)配置URL 還是報(bào)錯(cuò) 因?yàn)轫?xiàng)目需要獲得微信用戶授權(quán) 第一次進(jìn)入頁面時(shí) 后面跟著授權(quán)參數(shù) 所以iOS因此應(yīng)該是記錄了此時(shí)帶著授權(quán)參數(shù)的URL

解決方案：

無意間發(fā)現(xiàn)某位博主的代碼片段 對(duì)授權(quán)參數(shù)進(jìn)行了轉(zhuǎn)碼 encodeURIComponent()
配合安卓iOS環(huán)境判斷 對(duì)iOS使用第一次進(jìn)入地址并對(duì)授權(quán)參數(shù)轉(zhuǎn)碼 成功
以下貼上完整代碼

1. 在 src/router/index.js 里 監(jiān)聽路由變化

router.afterEach(async (to) => {
  let baseLocation = "http://www.xx.cn"//自行改為項(xiàng)目地址
  if (window.__wxjs_is_wkwebview) { // 通過此屬性判斷IOS
    if (window.entryUrl == '' || window.entryUrl == undefined) {
      var url = baseLocation + encodeURIComponent(to.fullPath)
      window.entryUrl = url
    }
  } else { // 安卓
    window.entryUrl = baseLocation +
      to.fullPath
  }
  sessionStorage.setItem("url", window.entryUrl) //直接在使用頁面 用來請(qǐng)求接口配置config
})

2.使用頁面 可以直接調(diào)這個(gè)函數(shù)

// 微信配置
get_config() {
	this.url = sessionStorage.getItem("url");//讀取地址
	this.$axios.get(`xx?zz=${this.url}`).then((res) => {//此處自行配置接口地址
		console.log(res, "微信配置");
		if (res.code == 200) {
			wx.config({
				debug: false, // 這里一般在測(cè)試階段先用true，等打包給后臺(tái)的時(shí)候就改回false,
				appId: res.data.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
				timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
				nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
				signature: res.data.signature, // 必填，簽名
				jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表 根據(jù)你的需求自行寫入
			});
		}
	});
},

3. 以我調(diào)用的掃一掃舉例

wx.ready(() => {
	wx.checkJsApi({
		jsApiList: ["scanQRCode"],
		success: function (res1) {
			console.log("成功", res1);
		},
		fail: function (res1) {
			console.log("失敗", res1);
		},
	});
	wx.scanQRCode({
		needResult: 1, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
		scanType: ["qrCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
		success: (res) => {//注意這里寫法 微信官方默認(rèn)為es5寫法 這里獲取不到this 需改為箭頭函數(shù)或者提前保存this等方法
		// var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
		},
	});
});
wx.error(function (res) {
	console.log(res, "失敗");
});

如果還有問題請(qǐng)?jiān)谠u(píng)論區(qū)反饋 第一次寫博客 可能有些遺漏 敬請(qǐng)?bào)w諒