vue实现微信分享链接添加动态参数的方法

微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下

1.安装引用jssdk

npm install --save weixin-js-sdk
const wx=require('weixin-js-sdk')

2.通过config接口注入配置信息

const jsapilist = ['onmenushareqq', 'onmenushareappmessage', 'onmenusharetimeline', 'updateappmessagesharedata', 'updatetimelinesharedata']

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, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
 appid: appid, // 必填，公众号的唯一标识
 timestamp: timestamp, // 必填，生成签名的时间戳
 noncestr: noncestr, // 必填，生成签名的随机串
 signature: signature, // 必填，签名，见附录1
 jsapilist: jsapilist // 必填，需要使用的js接口列表，所有js接口列表 见附录2
 })
 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 () {

 }
 })
 })
},

在mounted中调用 getconfig方法

调用分享方法的位置代码大致如下

this.link = location.origin + '/****/index.html#/share?openid=' + this.openid + '&shareid=' + shareid
this.desc = '分享链接添加动态参数'
this.sharetofriends()
this.sharetofriendscircle()

总结

以上所述是小编给大家介绍的vue实现微信分享链接添加动态参数的方法,希望对大家有所帮助