IOS end micro-channel sharing failure stepped pit and solutions

A recent public spa is based on the number of applications vue, appeared in the micro-channel micro-channel sharing and voice access time: everything is normal on Android, but the call wx.config in ios end time always fails, look through the official documents also did not find a solution, and finally found the problem during testing because of initialization of the incoming URL. Specific process is as follows:

Micro-channel config interface configuration, an official document as follows:

JS-SDK is required for all pages must first injection configuration information, otherwise it will not invoke (only called once with a url, app can be called each time a change for change SPA url url of the web, the Android micro-channel client pushState H5 does not support the new features, so use pushState to implement web app pages will lead to the signature fails, this problem will be fixed in the Android6.2).

The official SPA gives a clear call at each url changes, so our initial code as follows:

// 此处在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);
    });

The upper end of the code in the Android runtime everything is normal.

But when we test the sharing feature in IOS end all fail, then we careful investigation, found the problem in the initialization of config,
we found that only need to be initialized in the root directory of the site == IOS == end once, so we the code was modified as follows:

1. To determine the current environment

//通过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();
    }

Our final code is as follows:

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();
    }
});

"*" Some custom content for developers

Most pit father is a micro-channel document does not mention the issue of IOS initialization (or I did not find). Oops

After passing the above changes, we in the number of public IOS and android sharing can be a normal end of the run to get going.

If there is any wrong or mistakes, welcome that.
mail: [email protected]