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 相关文章推荐
封装的原生javascript弹出层代码
Sep 24 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 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应用程序实现摘要式身份验证的方法详解
2013/06/08 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
JavaScript 的继承
2011/10/01 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
jQuery实现Email邮箱地址自动补全功能代码
2015/11/03 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
JavaScript原型式继承实现方法
2019/11/06 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
为什么从Python 3.6开始字典有序并效率更高
2019/07/15 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
Python yield的用法实例分析
2020/03/06 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
体育学院毕业生自荐信
2013/11/03 职场文书
银行学习十八大感想
2014/01/11 职场文书
设计专业自荐信
2014/06/19 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript