Add dynamic parameters to vue wechat sharing link

When sharing wechat, the carrying parameters of sharing link may not be fixed. You need to know that this is the basic code for dynamically setting sharing link before sharing, which is not so detailed, but the general process is as follows

1. Install and reference jssdk

npm install --save weixin-js-sdk

const wx=require('weixin-js-sdk')

 

2. Inject configuration information through config interface

const jsApiList = ['onMenuShareQQ', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData']

 



Methods in methods
getUrl () {
  if (window.entryUrl === '') {
    window.entryUrl = location.href.split('#')[0]
  }
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g
  return isAndroid ? location.href.split('#')[0] : window.entryUrl
},
getConfig () {
  var url = this.getUrl()
  return new Promise((resolve, reject) => {
    this.$axios.get('your requestUrl', {
      params: {
        url: url
      }
    }).then((response) => {
      var data = response.data.data
      var appId = data.appId
      var noncestr = data.nonceStr
      // var jsapi_ticket = res.jsapi_ticket;
      var timestamp = data.timestamp
      var signature = data.signature
      wx.config({
        debug: false, // Turn on debugging mode,All called api The return value of will be in the client alert To view the parameters passed in, go to the pc The end is open, and the parameter information will pass log Play, only in pc It will be printed at the end.
        appId: appId, // Required, the only sign of the public number.
        timestamp: timestamp, // Required, generate signature timestamp
        nonceStr: noncestr, // Required, generate random string of signature
        signature: signature, // Required, signature, see Appendix 1
        jsApiList: jsApiList // Required, required JS Interface list, all JS See Appendix 2 for interface list
      })
      wx.error(function (res) {
        console.log(JSON.stringify(res))
      })
      resolve()
    })
  })
},
shareToFriendsCircle () {
  wx.ready(() => {
    wx.onMenuShareTimeline({
      title: this.title,
      link: this.link,
      imgUrl: this.imgUrl,
      success: function () {
      }
    })
  })
},
shareToFriends () {
  wx.ready(() => {
    wx.onMenuShareAppMessage({
      title: this.title,
      desc: this.desc,
      link: this.link,
      imgUrl: this.imgUrl,
      success: function () {

      }
    })
  })
},

 


Calling getConfig method in mounted
The location code for calling the shared method is roughly as follows
this.link = location.origin + '/****/index.html#/share?openId=' + this.openId + '&shareId=' + shareId
this.desc = 'Share link add dynamic parameters'
this.shareToFriends()
this.shareToFriendsCircle()

 



Keywords: Javascript SDK npm Android Linux

Added by Dilb on Thu, 21 Nov 2019 16:23:22 +0200