vue实现微信分享链接添加动态参数的方法


Posted in Javascript onApril 29, 2019

微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下

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实现微信分享链接添加动态参数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
Angular短信模板校验代码
Sep 23 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 #Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 #Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 #Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 #Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
You might like
php读取数据库信息的几种方法
2008/05/24 PHP
php中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
取得父标签
2006/11/14 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
Python Web框架Flask中使用七牛云存储实例
2015/02/08 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
解决Python在导入文件时的FileNotFoundError问题
2020/04/10 Python
互动出版网:专业书籍
2017/03/21 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
个性与发展自我评价
2014/02/11 职场文书
2014年商场国庆节活动策划方案
2014/09/16 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript