IOS手机对接微信录音，jssdk签名报错

本环境是nuxt项目，其实vue项目也差不多，原理就是在路由的beforeEach函数里做个判断，并去签名

本次对接的是微信公众号录音功能，jssdk ios第一次签名失败，刷新后签名成功

//中间件iosaudio.js
export default async function ({ store, route, app: { $axios, router } }) {
	//返回true 是ios手机
    let isIOS = () => {
        let u = navigator.userAgent;
        let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        return isIOS;
    }
    let shareSignature = async () => {
        let wxOpt = {};
        let res = await $axios({
            url: "/wx-user/sound",
            method: "post",
            data: {
                action: "sign",
                url: location.href
            }
        });
        if (+res.code === 1) {
            wxOpt = res.data;
        }

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: wxOpt.appid, // 必填，公众号的唯一标识
            timestamp: wxOpt.timestamp, // 必填，生成签名的时间戳
            nonceStr: wxOpt.noncestr, // 必填，生成签名的随机串
            signature: wxOpt.signature, // 必填，签名
            jsApiList: ["downloadVoice", "startRecord", "stopRecord", "uploadVoice"] // 必填，需要使用的JS接口列表
        });
        wx.ready(function () {
            console.log("校验通过1");

            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口
            //，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
        wx.error(res => {
            console.log("微信校验失败1", res);

            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        });
    }
    router.beforeEach((to, from, next) => {
        if (isIOS() && from.path === '/') {
            shareSignature()
        }
        next()
    })
}

使用：nuxt.config.js配置中间件

//
export default {
  ...
  router: {
    middleware: 'iosaudio'
  },
  ...
}

参考博客：

blog.csdn.net/weixin_4435…

www.cnblogs.com/xueshanshan…