這篇文章主要為大家展示了“vue做微信自定義分享的問題有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue做微信自定義分享的問題有哪些”這篇文章吧。

創(chuàng)新互聯(lián)是一家集網站建設,江西企業(yè)網站建設,江西品牌網站建設,網站定制,江西網站建設報價,網絡營銷,網絡優(yōu)化,江西網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。

問題及解決方式

hash模式

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

那么我這里的解決方式就是直接不用hash模式了，問題又多，鏈接也不好看，直接使用mode: 'history'。

切換頁面簽名失效

這個在網上也有很多解決方案。由于我這里的項目里不需要細致到每個頁面都必須做自定義分享，只需要在觸發(fā)某些條件的時候觸發(fā)自定義分享，所以是這么做的。

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

// 微信自定義分享
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的用戶反饋個別頁面還是無法成功調用自定義分享，前期的解決方案很暴力...懟用戶，讓用戶刷新一下當前頁面，誒不成想，就好了！

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

就開始找原因，發(fā)現(xiàn)android一點問題沒有。

但是在ios上，無論路由跳轉多少次，復制出來的鏈接都是首次進入的頁面的鏈接，于是改造一下上面的調用函數(shù)。
首先記錄首次進入頁面的url

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

然后在wxShare函數(shù)中加了一個判斷。

大致意思就是判斷當前設備是不是ios，如果是，簽名用的url就使用firstUrl，如果不是，就使用window.location.href

然后上線，發(fā)現(xiàn)就沒有再出過問題咯。

以上是“vue做微信自定義分享的問題有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊頻道！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

名稱欄目：vue做微信自定義分享的問題有哪些-創(chuàng)新互聯(lián)
URL標題：http://weahome.cn/article/dchsoh.html