vue 分享微信传参_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實現微信分享鏈接添加動態參數的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對我們網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
本文標題: vue實現微信分享鏈接添加動態參數的方法
本文地址: http://www.cppcns.com/wangluo/javascript/258001.html
總結
以上是生活随笔為你收集整理的vue 分享微信传参_vue实现微信分享链接添加动态参数的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python可视化分析网易云音乐评论_网
- 下一篇： axios vue 加载效果动画_vue