vue微信分享链接添加动态参数
程序员文章站
2022-12-23 08:19:09
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下 1.安装引用jssdk 2.通过config接口注入配置信息 ......
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下
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()
上一篇: golang中的defer
下一篇: Vue 源码分析——构造函数原型