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

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. 2018.07.23[PA2015]Siano(线段树)

    [PA2015]Siano 描述 Description 农夫Byteasar买了一片n亩的土地,他要在这上面种草. 他在每一亩土地上都种植了一种独一无二的草,其中,第i亩土地的草每天会长高a[i]厘 ...

  2. hdu-1141

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1141 参考文章:https://blog.csdn.net/fei____fei/article/de ...

  3. 按条件设置gridcontrol 单元格属性

    等价代码设置:(注意这里使用都是FieldName, 即绑定对象的字段名) var cn = new StyleFormatCondition(FormatConditionEnum.Expressi ...

  4. Linux下一个简单sniffer的实现

    Sniffer(嗅探器)是一种基于被动侦听原理的网络分析方式.将网络接口设置在监听模式,便可以将网上传输的源源不断的信息截获.对于网络监听的基本原理我们不在赘述,我们也不开启网卡的混杂模式,因为现在的 ...

  5. UVa 11294 Wedding (TwoSat)

    题意:有 n-1 对夫妻参加一个婚宴,所有人都坐在一个长长的餐桌左侧或者右侧,新郎和新娘面做面坐在桌子的两侧.由于新娘的头饰很复杂,她无法看到和她坐在同一侧餐桌的人,只能看到对面餐桌的人.任意一对夫妻 ...

  6. spring p 标签

    需要引入命名空间 xmlns:p="http://www.springframework.org/schema/p" p 是什么含义 p 是 property 的缩写,为了简化be ...

  7. Yarn上运行spark-1.6.0

    目录 目录 1 1. 约定 1 2. 安装Scala 1 2.1. 下载 2 2.2. 安装 2 2.3. 设置环境变量 2 3. 安装Spark 2 3.1. 下载 2 3.2. 安装 2 3.3. ...

  8. (转) MVC 中 @help 用法

    ASP.NET MVC 3支持一项名为“Razor”的新视图引擎选项(除了继续支持/加强现有的.aspx视图引擎外).当编写一个视图模板时,Razor将所需的字符和击键数减少到最小,并保证一个快速.通 ...

  9. TurtleBot教程

    TurtleBot TurtleBot combines popular off-the-shelf robot components like the iRobot Create, Yujin Ro ...

  10. 层层递进Struts1(三)之Struts组成

    这篇博客我们来说一下Struts的主要组成我们,通过前几篇博客,我们知道这个框架最重要的几个步骤:获取路径.封装表单.获取转向列表.转向逻辑处理.转向,与此对应的是:ActionServlet.Act ...