问题原因:安卓会自动调用微信认证接口,而ios需要使用wx的.ready()方法才可以调用。注意事项:将wx.config()放在wx.ready()中,第一次使用时不能自动获取微信认证签名。它应该在调用wx.config()之后调用。实现如下:单独创建一个js文件wxAuthConfig.js//获取微信签名导出异步函数wxAuthConfig(){axios({url:`${_URL}/getWeiXinJSConfig`,async:true,type:'get',headers:{mobile_login_token:store.state.login.token,'Content-Type':'application/json;charset=utf-8'},params:{//url:encodeURI(location.href)url:encodeURI(window.location.href.split('#')[0])}}).then(res=>{if(res.data.code===200){letdata=res.data.result.result;wx.config({debug:true,appId:data.appId,timestamp:data.timestamp,//必填,生成签名的时间戳nonceStr:data.noneStr,//必填,生成签名的随机字符串signature:data.signature,//必填,签名jsApiList:['scanQRCode']//必填,需要使用的JS接口列表});}}).catch(err=>{console.log('获取签名失败!')});//很重要,如果没有Writeready,ios终端会出现第一次进入并不会自动获取签名,需要在scan中手动刷新wx.ready(function(data){})}调用代码页:import{isIOS,wxAuthConfig}from'@/util/wxAuthConfig.js'cre??ated(){wxAuthConfig();//获取微信授权},methods:{//扫描wxNewMacScan(i){wx.scanQRCode({needResult:1,//默认0,扫描结果由微信处理,1直接返回扫描结果,desc:'scanQRCodedesc',scanType:["qrCode","barCode"],//可以指定扫描二维码还是一维码,默认都成功:res=>{letresult=res.resultStr;//当needResult为1时,扫描返回的结果letindex=result.indexOf(',');i.newMachineInsideBarcode=result.substring(index+1,result.length)},});},}这样就可以完美解决了。有文章提到因为url中有#,所以要使用encodeURIComponent进行编码。取#号前的地址,将encodeURI换成encodeURIComponent还是没有成功。//url:encodeURI(location.href)url:encodeURI(window.location.href.split('#')[0])一些文章里也提到了路由守卫router.beforeEach((to,from,next)=>{})提前判断当前设备是ios还是安卓。如果是ios,在path==='/'时获取微信认证签名,在进入使用扫码签名的页面时获取微信认证。main.js:import{isIOS,wxAuthConfig}from'@/util/wxAuthConfig.js'router.beforeEach((to,from,next)=>{lettokenData=localStorage.getItem(token);if(to.meta.requireAuth){//需要权限,进一步判断if(tokenData){//通过vuex状态获取当前token是否存在if(isIOS){wxAuthConfig();}next();}else{//如果没有权限,重定向到登录页面并登录next({path:'/login',})}}else{//不需要直接跳转到next();}});使用扫描页面:import{isIOS,wxAuthConfig}from'@/util/wxAuthConfig.js'cre??ated(){if(!isIOS()){wxAuthConfig()}},methods:{wxScan(){...}}这样也可以解决第一次进入ios无法调用scan的问题,但是解决问题的本质还是调用了wxAuthConfig中的wx.ready()。写在最后:更新代码后记得刷新微信缓存,否则修改后的效果可能会被覆盖!
