前言
眾所周知，在使用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
然后上線，發現就沒有再出過問題咯。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
