vue实现微信分享链接添加动态参数的方法
时间:2021-07-01 08:52:37|栏目: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+webpack解决css引用图片打包后找不到资源文件的问题
本文标题:vue实现微信分享链接添加动态参数的方法
本文地址:http://www.codeinn.net/misctech/151002.html