vue微信分享链接添加动态参数
前端  /  管理员 发布于 5年前   94
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下
1.安装引用jssdk
npm install --save weixin-js-sdkconst 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=' + shareIdthis.desc = '分享链接添加动态参数'this.shareToFriends()this.shareToFriendsCircle()
来自:https://www.cnblogs.com/jjlinsblog/archive/2019/04/28/10784319.html
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号