Record some problems of vue for wechat custom sharing

preface

As we all know, when using vue for projects, wechat custom sharing has always been a pit, but there are many pits on ios. Then every time I encounter problems, I have to spend a long time. Strangely, it seems to be the same as the problems encountered by many people, but the solutions they write can not directly solve the problems I encounter.

Here are some pits encountered and solutions.

At present, there is no problem with the custom sharing on Android and ios.

Problems and Solutions

hash mode

In the official documents of wechat, it is mentioned about jsapi_ In the signature algorithm of ticket, when generating a signature, the URL of the current web page does not contain # and its subsequent parts; Moreover, for customized shared links, wechat will also take the initiative to splice some parameters behind the links, such as from; This also causes some problems. For example, either the signature is incorrect, or analyze the outgoing link, and there is a problem in the second sharing.

So my solution here is to directly use the hash mode. There are many problems and the links are not good-looking. Directly use the mode: 'history'.

Switch page signature invalid

There are also many solutions on the Internet. Because my project here does not need to be detailed to the point that each page must be customized for sharing, it only needs to trigger customized sharing when certain conditions are triggered, so I do so.

Write custom shared function logic in main.js file;

// Wechat custom sharing
Vue.prototype.wxShare = async function ({title , desc , link = window.location.href,imgUrl ,success}) {
    let that = this;
    // Current page address
    let url = window.location.href;
    // Call the back-end service to obtain wechat signature content
    let {data: wxCfg} = await that.ajax({api: that.api.wechatGetWxSdk, data: {url: url}})
    if (!wx || !wxCfg) return;
    wx.config({
        debug: false,
        appId: wxCfg.appId,
        timestamp: wxCfg.timestamp,
        nonceStr: wxCfg.nonceStr,
        signature: wxCfg.signature,
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage']
    });
    wx.ready(function () {
        wx.updateAppMessageShareData({
            title: title, desc: desc, link: link, imgUrl: imgUrl,
            success: function () {
                success ? success() : ''
            }
        })
        wx.updateTimelineShareData({
            title: title, link: link, imgUrl: imgUrl,
            success: function () {
                success ? success() : ''
            }
        })
        wx.onMenuShareTimeline({
            title: title, link: link, imgUrl: imgUrl,
            success: function () {
                success ? success() : ''
            }
        })
        wx.onMenuShareAppMessage({
            title: title, desc: desc, link: link, imgUrl: imgUrl,
            success: function () {
                success ? success() : ''
            }
        })
    })
    wx.error(function (res) {
        that.$toast('Please refresh the current page and try again')
    });
}

When the user-defined sharing needs to be called, it is called in this way

await this.wxShare({
    title: 'Shared title', 
    desc: 'Shared summary',
    link: 'Shared link address',
    imgUrl: 'Shared cover image',
    success: function(){
        // Call successful callback
    }
})

Signature is still invalid after IOS route jump

After the above problems were solved, the project went online, and many ios users reported that individual pages still failed to successfully call custom sharing. The early solution was very violent... Contact users and let users refresh the current page. Ah, it's not a dream. It's good!

Later, more and more feedback.. there is no way, we must think about how to solve it

I started looking for the reason and found that there was no problem with android. However, on ios, no matter how many times the route jumps, the copied links are the links of the first page, so modify the calling function above.

First, record the url of the first page

Vue.prototype.firstUrl = window.location.href;

Copy the code and add a judgment in the wxShare function. The general meaning is to judge whether the current device is ios. If yes, the url for signature uses firstUrl. If not, use window.location.href

Then I went online and found that there was no problem again.

Conclusion

Author: Du Xiaoqian
Original address: https://juejin.cn/post/684490...
If you think the article is well written, please stamp the ↑ link to follow the author and praise the article~
For more information, Vue, React, Js, please pay attention to the official account [push the ape], join the IT staff community, get contacts and expand the face-to-face exchanges with the big guys.

Tags: Front-end Vue.js

Posted on Thu, 02 Dec 2021 20:03:36 -0500 by little_tris