vue实现微信分享链接添加动态参数的方法
微信分享时分享链接携带参数可能不是固定的需要在分享的前一刻才知道这里就是动态设置分享链接的基本写法代码不是那么详尽但大致流程如下
1.安装引用jssdk
npminstall--saveweixin-js-sdk
constwx=require('weixin-js-sdk')
2.通过config接口注入配置信息
constjsApiList=['onMenuShareQQ','onMenuShareAppMessage','onMenuShareTimeline','updateAppMessageShareData','updateTimelineShareData']
methods中的方法
getUrl(){
if(window.entryUrl===''){
window.entryUrl=location.href.split('#')[0]
}
varu=navigator.userAgent
varisAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1//g
returnisAndroid?location.href.split('#')[0]:window.entryUrl
},
getConfig(){
varurl=this.getUrl()
returnnewPromise((resolve,reject)=>{
this.$axios.get('yourrequestUrl',{
params:{
url:url
}
}).then((response)=>{
vardata=response.data.data
varappId=data.appId
varnoncestr=data.nonceStr
//varjsapi_ticket=res.jsapi_ticket;
vartimestamp=data.timestamp
varsignature=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实现微信分享链接添加动态参数的方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！