本篇方案适用于vue 的
history模式，hash模式不适用！
使用spa模式的vue的 history 路由模式，在ios上加载微信jssdk授权认证出现失败问题。由于ios只记录第一次进来的url，在其他页面调用config授权不能使用window.location.href 做为认证url。
需要做的是如果在ios下，记录第一次进来时的url，调用config时用储存好的url调用
首先在 router 中添加 afterEach
import { config } from './utils/wx';
router.afterEach((to, from) => { // 伸手党福利
// window.__wxjs_is_wkwebview
// true 时 为 IOS 设备
// false时 为 安卓 设备 安卓默认使用to.fullPath
let url = to.fullPath
if (window.__wxjs_is_wkwebview) { // IOS
// 第一次进来记录url window.entryUrl 自定义window对象
if (window.entryUrl == '' || window.entryUrl == undefined) {
window.entryUrl = to.fullPath // 将后面的参数去除
url = to.fullPath
}else {
// 后续进来直接使用第一次保存的url
url = window.entryUrl
}
}
config(url) // 封装的微信config方法 传入url
})// ./utils/wx.js
import { config as configWeChat } from '@/api/WeChat' // 后端接口
import { getToken } from './auth'
import { Toast } from 'vant'
/**
* 通过config接口注入权限验证配置 接受url
*/
export function config(url) {
return new Promise(async (res, rej) => {
// 接口请求获取config签名数据
const { data } = await configWeChat({
token: getToken(),
url: window.location.protocol + '//' + window.location.host + url // 获取协议 + '//' + 网站域名 + 传入域名 拼接成完整url
})
wx.config({
debug: false,
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ['updateAppMessageShareData','updateTimelineShareData','scanQRCode', 'chooseWXPay'] // 必填,需要使用的JS接口列表
})
})
}
/**
* 通过ready接口处理成功验证
*/
export function ready(jsApiList) {
if (!jsApiList) return
return new Promise(async (result, rej) => {
wx.ready(function () {
// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
wx.checkJsApi({ // 判断当前客户端版本是否支持指定JS接口
jsApiList: jsApiList,
success: function (res) { // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
for (const key in res.checkResult) {
if (res.checkResult.hasOwnProperty(key)) {
const element = res.checkResult[key];
if (element === true) {
result()
} else {
rej()
}
}
}
},
fail: function (res) { // 检测getNetworkType该功能失败时处理
console.log(res)
rej('fail' + res)
Toast('fail' + res)
}
})
})
/* 处理失败验证 */
wx.error(function (res) {
// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
rej('配置验证失败: ' + res.errMsg)
Toast('配置验证失败: ' + res.errMsg)
})
})
}
// 使用扫一扫
methods: {
// 扫一扫
async scanQRCode() {
ready(["scanQRCode"])
.then(res => {
wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: async res => {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
console.log("扫描结果", result);
}
});
})
.catch(err => {
this.$toast.fail("抱歉，当前客户端版本不支持扫一扫");
});
},
}
