乐趣区

微信公众号调取jssdk扫一扫功能ios首次使用无法获取微信认证签名需手动刷新后才能获取的解决方案

jiezi

问题出现原因：
安卓端会自动调用微信认证接口，ios 需要使用 wx.ready()方法后才能被调用。
需要注意的点：
wx.ready()中放入 wx.config()不能实现首次使用自动获取微信认证签名，应该是在调用 wx.config()结束后调用
实现如下：
创建一个单独的 js 文件 wxAuthConfig.js

// 获取微信签名
export async function 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){
      let data = 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('签名获取失败!')
  });
  // 很重要不能少，如果没有写 ready，ios 端会出现首次进入不会自动获取签名，需手动刷新
  wx.ready(function(data) {})
}

在扫码页面中调用：

import {isIOS, wxAuthConfig} from '@/util/wxAuthConfig.js'

created(){wxAuthConfig();  // 获取微信授权
},

 methods: {
  // 扫一扫
  wxNewMacScan(i) {
    wx.scanQRCode({
      needResult: 1, // 默认为 0，扫描结果由微信处理，1 则直接返回扫描结果，desc : 'scanQRCode desc',
      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: res => {
        let result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
        let index = 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 端还是 Android 端，如果是 ios 端，就在 path===’/’ 时获取微信认证签名，并在进入使用扫一扫的页面时就获取微信认证签名。
main.js：

import {isIOS, wxAuthConfig} from '@/util/wxAuthConfig.js'

router.beforeEach((to, from, next) => {let tokenData = localStorage.getItem(token);
  if (to.meta.requireAuth) { // 需要权限, 进一步进行判断
    if (tokenData) { // 通过 vuex state 获取当前的 token 是否存在
      if(isIOS){wxAuthConfig();
      }
      next();} else { // 如果没有权限, 重定向到登录页, 进行登录
      next({path: '/login',})
    }
  } else { // 不需要权限 直接跳转
    next();}
});

使用扫一扫页面：

import {isIOS, wxAuthConfig} from '@/util/wxAuthConfig.js'

created(){if(!isIOS()){wxAuthConfig()
  }
},
methods: {wxScan(){...}
}

这样也可以解决 ios 首次进入不能调用扫一扫的问题，但解决问题的本质就是在 wxAuthConfig 中调用 wx.ready()。

写在最后：
记得在更新代码后刷新微信缓存，不然可能会遮盖修改好的效果哦！

退出移动版