Vue微信分享實現全解析

一、微信分享是什麼

微信分享，指網頁在微信中分享時調用微信JS-SDK提供的接口，將網頁分享至微信好友或微信朋友圈，以實現讓更多的人看到該網頁內容的目的。

二、Vue微信分享實現原理

在Vue中實現微信分享的基本思路是先獲取頁面的分享所需參數，再使用微信JS-SDK提供的接口進行分享。分享所需的參數包括：URL、nonceStr、timestamp、signature，其中signature的生成需要後端進行處理。

三、微信JS-SDK基本使用步驟

1、創建公眾號，在微信公眾平台進行設置，填寫JS接口安全域名，將URL配置進去。

2、配置JS-SDK，在微信官方文檔中申請appid和appsecret，並在自己的項目中調用wx.config()方法進行配置。

3、通過wx.checkJsApi()方法判斷當前客戶端版本是否支持分享功能。

4、通過wx.ready()方法進行分享處理，分享處理中需要調用wx.onMenuShareAppMessage()和wx.onMenuShareTimeline()方法對分享內容進行設置。

四、Vue中實現微信分享

實現微信分享的基本流程如下：

1、調用後端接口獲取簽名signature（包含nonceStr和timestamp），並將其保存到Vue實例中。

2、使用Vue生命周期鉤子函數created()獲取當前頁面的URL，並通過Vue實例的$set方法將其保存到Vue實例中。

3、在Vue實例中使用wx.config()方法進行JS-SDK的配置。

4、在Vue實例中使用wx.checkJsApi()方法判斷當前客戶端版本是否支持分享功能。

5、在Vue實例中使用wx.ready()方法進行分享處理，改方法與普通的JS應用程序中相同。

//調用後端接口獲取簽名signature
this.$axios.post('/getSignature', {
  url: window.location.href.split('#')[0] //獲取當前頁面的URL
}).then(res => {
  if (res.status === 200) {
    const data = res.data
    //將獲取到的簽名保存至Vue實例中
    this.signature = {
      nonceStr: data.noncestr,
      signature: data.signature,
      timestamp: data.timestamp
    }
  }
})

created() {
  //獲取當前頁面的URL
  const index = window.location.href.indexOf('#')
  const url = window.location.href.substring(0, index)
  //保存至Vue實例中
  this.$set(this, 'url', url)

  //配置JS-SDK
  wx.config({
    debug: false,
    appId: 'yourAppid',
    timestamp: this.signature.timestamp,
    nonceStr: this.signature.nonceStr,
    signature: this.signature.signature,
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
  })

  //判斷當前客戶端版本是否支持分享功能
  wx.checkJsApi({
    jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'],
    success: (res) => {
      console.log(res)
    }
  })
},
mounted(){
  //分享處理
  wx.ready(() => {
    wx.onMenuShareAppMessage({
      title: '分享標題',
      desc: '分享描述',
      link: this.url,
      imgUrl: '分享的圖片地址',
      type: 'link',
      dataUrl: '',
      success: function () { },
      cancel: function () { }
    })

    wx.onMenuShareTimeline({
      title: '分享標題',
      desc: '分享描述',
      link: this.url,
      imgUrl: '分享的圖片地址',
      success: function () { },
      cancel: function () { }
    })
  })
}

五、注意事項

1、JS-SDK中默認開啟調試模式，在終端會有相應的輸出，正式環境要關閉調試模式。

2、在瀏覽器端調式微信分享，需要使用微信開發者工具。

3、微信分享的縮略圖必須是網頁中的圖片鏈接，如果使用的是base64編碼圖片，則會導致分享失敗。

六、總結

Vue微信分享的實現需要後端和前端共同配合完成，步驟繁瑣但是實現起來並不難。當然，在實際項目中，還需要考慮安全性、穩定性等問題。