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

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微信分享链接添加动态参数的更多相关文章

  1. vue,一路走来(13)--vue微信分享

    vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...

  2. iOS 学习 - 13.微信分享链接、QQ 分享图片

    准备工作---原文来自这个 首先要在微信开放平台申请 AppID 和 QQ ID(我第一天晚上申请的,第二天中午就通过了),接着导入 SDK,也就是3个 .h 和一个 .a 文件,详情见这里 如果你是 ...

  3. 通过微信分享链接,后面会被加上from=singlemessage&isappinstalled=1可能导致网页打不开

    微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈   from=timeline&isappinstalled=0 微信群   from=groupmessage&isapp ...

  4. 通过微信分享链接,后面被加上from=singlemessage&isappinstalled=1导致网页打不开

    微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈   from=timeline&isappinstalled=0微信群   from=groupmessage&isappi ...

  5. 微信分享链接出现config:invalid signature错误的解决方法

    首先贡献jssdk下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip  不建议大家在*SDN上花钱买积分下载 当开发微信时需要做特定的页面做分享时 ...

  6. 解决h5网页微信分享链接不能显示缩略

    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js& ...

  7. Ext.data.Store添加动态参数

    多条件查询页面的参数都是动态的,并且我们通常还会有默认加载页面.此时,动态添加参数非常重要,其中baseparam是解决问题的关键. @ 将查询条件定义为一个全局变量 var param_01 = & ...

  8. JMeter怎么在get URL请求、POST请求中添加动态参数用于服务器段安全验证

    从前一个页面(含有服务器段返回给客户端的参数,用于在下一次请求时验证)中添加后置处理器中的Regular Expression Extractor,使用正则表达式对参数进行提取. 在用到这些变量时可以 ...

  9. vue hash模式下微信分享后打开首页,三种完美解决方案

    微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...

随机推荐

  1. 26. The Greenhouse Effect and Its Consequences 温室效应及其后果

    26. The Greenhouse Effect and Its Consequences 温室效应及其后果 ①The greenhouse effect causes trouble by rai ...

  2. C#打印日志的小技巧

    public static void Log(params System.Object[] message) { string str = ""; if (message == n ...

  3. HDU 5956 The Elder (树上斜率DP)

    题意:给定上一棵树,然后每条边有一个权值,然后每个点到 1 的距离有两种,第一种是直接回到1,花费是 dist(1, i)^2,还有另一种是先到另一个点 j,然后两从 j 向1走,当然 j 也可以再向 ...

  4. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

  5. webuploader 文件上传总结

    $(function() { /** * 初始化Web Uploader */ var uploader = WebUploader.create({ swf : '../mobile/Uploade ...

  6. web大文件上传(web应用---SSH框架)

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  7. [FMX]将 Android 程序切换到后台及从后台切换到前台实现

    有时候,我们需要将自己的Android程序切换到后台运行,在必要时,将其切换到前台运行.下面提供了一种实现方式,首先需要引用三个单元:   1 uses Androidapi.JNI.App,Andr ...

  8. [leetcode] 18. Length of Last Word

    这个题目很简单,给一个字符串,然后返回最后一个单词的长度就行.题目如下: Given a string s consists of upper/lower-case alphabets and emp ...

  9. Activity-fragment-ListView展示

    在上一篇博客,Android-fragment简介-fragment的简单使用,介绍了简单的使用: 这篇博客主要讲解,在fragment做处理事情(Activity的事情) Activity pack ...

  10. Android-ByteUtil工具类

    Byte处理转换相关的工具类: public class ByteUtil { private ByteUtil(){} /** * 把byte[] 转成 Stirng * @param bytes ...