記錄vue作微信自定義分享的一些問題

前言

衆所周知，在使用vue作項目的時候，微信自定義分享一直是一個坑，只是ios上坑明顯的多。 而後每次遇到問題都要度娘好久。 奇怪的是貌似和不少人遇到的問題同樣，可是他們寫的解決方案都沒辦法直接解決我遇到的問題。

這裏就記錄一下遇到過的一些坑，和解決方式。

目前項目裏面，安卓和ios上面的自定義分享已經沒有什麼問題了。

問題及解決方式

hash模式

在微信的官方文檔中，提到關於jsapi_ticket的簽名算法中，生成簽名的時候，當前網頁的URL，不包含#及其後面的部分； 並且自定義分享出去的連接，微信也會主動往連接的後面拼接一些參數，好比from之類的； 這也就形成了一些問題，好比要麼簽名不正確，要麼分析那個出去的連接，二次分享又回出問題。

那麼我這裏的解決方式就是直接不用hash模式了，問題又多，連接也很差看，直接使用mode: 'history'。

切換頁面簽名失效

這個在網上也有不少解決方案。 因爲我這裏的項目裏不須要細緻到每一個頁面都必須作自定義分享，只須要在觸發某些條件的時候觸發自定義分享，因此是這麼作的。

在main.js文件中編寫自定義分享的函數邏輯；

// 微信自定義分享
Vue.prototype.wxShare = async function ({title , desc , link = window.location.href,imgUrl ,success}) {
    let that = this;
    // 當前頁面地址
    let url = window.location.href;
    // 調用後端服務獲取微信簽名內容
    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('請刷新當前頁面後重試')
    });
}
複製代碼

在須要調用自定義分享的時候，就這樣調用

await this.wxShare({
    title: '分享的標題', 
    desc: '分享的摘要',
    link: '分享出去的連接地址',
    imgUrl: '分享的封面圖',
    success: function(){
        // 調用成功的回調
    }
})
複製代碼

IOS路由跳轉以後依然簽名失效

上面的問題解決以後，項目上線了，不少ios的用戶反饋個別頁面仍是沒法成功調用自定義分享，前期的解決方案很暴力...懟用戶，讓用戶刷新一下當前頁面，誒不成想，就行了！

後來愈來愈多的反饋..沒辦法了，必須得想一想轍解決一下...

就開始找緣由，發現android一點問題沒有。 可是在ios上，不管路由跳轉多少次，複製出來的連接都是首次進入的頁面的連接，因而改造一下上面的調用函數。

首先記錄首次進入頁面的url

Vue.prototype.firstUrl = window.location.href;
複製代碼

而後在wxShare函數中加了一個判斷。 大體意思就是判斷當前設備是否是ios，若是是，簽名用的url就使用firstUrl，若是不是，就使用window.location.href

而後上線，發現就沒有再出過問題咯。