IOS端微信分享失效的踩坑及解决方案

最近的一个公众号是基于vue的spa应用，在接入微信分享和微信语音的时候出现了：在Android上一切正常，但是在ios端调用wx.config的时候总是失败，去翻了官方文档也并没有找到解决方案，最后在测试中发现是因为初始化的时候传入的URL的问题。具体过程如下：

微信config接口配置，官方文档如下：

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

官方明确给出SPA在每次url变化时进行调用,于是我们的最初代码如下：

// 此处在main.js中，在vue-router每次改变路由的时候去调用wx.config

router.beforeEach((to, from, next) => {
    let url =`www.example.com`;
    let getConfig = async function(url) {
        // res为后端接口中返回的config
        const res = await get_config(url);
        wx.config(res);
        console.log(res);
    };
})
    // 此部分为微信分享
   var config = {
        title: 'title', // 分享标题
        desc: 'desc', // 分享描述
        link: 'link', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: `image',
        success: function() {
            console.log(success)
        },
        cancel: function() {
               console.log(failf)
        }
    };
    wx.ready(() => {
        wx.onMenuShareAppMessage(config);
        wx.onMenuShareTimeline(config);
    });

上边的代码在安卓端运行时一切正常。

但是我们测试的时候在IOS端分享等功能全部失效，后来我们仔细排查，发现是在初始化config的问题，
我们发现在IOS端只需要在==网站根目录中初始化一次即可==，所以我们对代码进行了修改，如下:

1. 先判断当前环境

//通过userAgent判断IOS环境

 let isIOS = function() {
        var isIphone = navigator.userAgent.includes('iPhone'）;
        var isIpad = navigator.userAgent.includes('iPad');
        return isIphone || isIpad;
    };


// 如果是IOS系统，则只在根路径初始化config

 if (isIOS()) {
        if (to.path === '/') {
            getConfig(url);
            next();
        } else {
            next();
        }
    } else {
        getConfig(url);
        next();
    }

最终我们的代码如下：

router.beforeEach((to, from, next) => {
    let url = `*****`;
    let getConfig = async function(url) {
        const res = await get_config(url);
        wx.config(res);
        console.log(res);
    };
    let isIOS = function() {
        var isIphone = navigator
            .userAgent
            .includes('iPhone');
        var isIpad = navigator
            .userAgent
            .includes('iPad');
        return isIphone || isIpad;
    };

    var config = {
        title: '*****', // 分享标题
        desc: '******', // 分享描述
        link: '***************', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: `*****`,
        type: 'link',
        dataUrl: '',
        success: function() {},
        cancel: function() {}
    };
    wx.ready(() => {
        wx.onMenuShareAppMessage(config);
        wx.onMenuShareTimeline(config);
    });
    if (isIOS()) {
        if (to.path === '/') {
            getConfig(url);
            next();
        } else {
            next();
        }
    } else {
        getConfig(url);
        next();
    }
});

“*”部分为开发者自定义内容

最坑爹的是微信文档并没有提及关于IOS初始化的问题（或者是我没有找到）。囧

通过如上修改以后，我们的公众号在IOS和android端的分享功能都可以正常的跑起来啦。

如果有任何不妥或错误之处，欢迎指出。
mail:[email protected]