vue微信分享链接添加动态参数
微信分享时 分享链接携带参数可能不是固定的 需要在分享的前一刻才知道 这里就是动态设置分享链接的基本写法 代码不是那么详尽 但大致流程如下
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微信分享链接添加动态参数的更多相关文章
- vue,一路走来(13)--vue微信分享
vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...
- iOS 学习 - 13.微信分享链接、QQ 分享图片
准备工作---原文来自这个 首先要在微信开放平台申请 AppID 和 QQ ID(我第一天晚上申请的,第二天中午就通过了),接着导入 SDK,也就是3个 .h 和一个 .a 文件,详情见这里 如果你是 ...
- 通过微信分享链接,后面会被加上from=singlemessage&isappinstalled=1可能导致网页打不开
微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈 from=timeline&isappinstalled=0 微信群 from=groupmessage&isapp ...
- 通过微信分享链接,后面被加上from=singlemessage&isappinstalled=1导致网页打不开
微信分享会根据分享的不同,为原始链接拼接如下参数: 朋友圈 from=timeline&isappinstalled=0微信群 from=groupmessage&isappi ...
- 微信分享链接出现config:invalid signature错误的解决方法
首先贡献jssdk下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip 不建议大家在*SDN上花钱买积分下载 当开发微信时需要做特定的页面做分享时 ...
- 解决h5网页微信分享链接不能显示缩略
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js& ...
- Ext.data.Store添加动态参数
多条件查询页面的参数都是动态的,并且我们通常还会有默认加载页面.此时,动态添加参数非常重要,其中baseparam是解决问题的关键. @ 将查询条件定义为一个全局变量 var param_01 = & ...
- JMeter怎么在get URL请求、POST请求中添加动态参数用于服务器段安全验证
从前一个页面(含有服务器段返回给客户端的参数,用于在下一次请求时验证)中添加后置处理器中的Regular Expression Extractor,使用正则表达式对参数进行提取. 在用到这些变量时可以 ...
- vue hash模式下微信分享后打开首页,三种完美解决方案
微信分享功能给我们带来了很大的便利,使得基于微信开发出来的 H5 页面可以很好的通过微信平台进行传播.所以呢,基本上每个基于微信开发的 H5 都会集成微信分享功能.但是,前几天在对接微信分享 API ...
随机推荐
- 跳出思维定势,改变交谈习惯zz
一直以来我都是一个不折不扣的作者所划分的内向者,羞于在公众场合说话,也不愿意与陌生人交谈,甚至是与认识的人聊天,有时候也是一种痛苦,看着在办公室里夸夸其谈的同事们,我总是感觉格格不入.严格说来,我算是 ...
- 25. Green Living 绿色生活
25. Green Living 绿色生活 ①We all know that humans are damaging the environment,but what can we do about ...
- spring boot使用java读取配置文件,DateSource测试,BomCP测试,AnnotationConfigApplicationContext的DataSource注入
一.配置注解读取配置文件 (1)@PropertySource可以指定读取的配置文件,通过@Value注解获取值 实例: @PropertySource(val ...
- Servlet从浅入深
Servlet是什么 servlet 是运行在 Web 服务器中的小型 Java 程序(即:服务器端的小应用程序). servlet 通常通过 HTTP(超文本传输协议)接收和响应来自 Web 客户端 ...
- Java中JNI的使用详解第三篇:JNIEnv类型中方法的使用
转自: http://blog.csdn.net/jiangwei0910410003/article/details/17466369 上一篇说道JNIEnv中的方法的用法,这一篇我们就来通过例子来 ...
- HDU2553 N皇后问题 2016-07-24 13:56 283人阅读 评论(0) 收藏
N皇后问题 Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是, ...
- ajax和SSH请求中乱码的一些解决方法
乱码的原因无非就是两端的编码方式不同. ajax方的编码 ajax无论是get还是post,都可以在content-type中设置charset为utf-8,或者beforesend中在sethead ...
- Discoverer Table
http://www.cnblogs.com/fandychen/p/3182826.html EUL4_BAS Table gives list of Business Areas EUL4_OBJ ...
- ArcGIS下图层范围不正确的两种处理方式
ArcGIS下图层范围不正确,偶尔能碰上这种情况,主要表现为“缩放至图层”时,其显示范围与该图层内所有要素的外包围盒范围不一致.针对这个问题,有两种解决办法. 方法一:导出数据.新创建含有要素的Sha ...
- IDEA13 SVN配置
这个算是解决了,idea13是支持svn 1.8. 步骤: 1.下载svn客户端软件,小乌龟:TortoiseSVN.安装的时候,一定要选择安装svn命令行的那个选项.当前版本1.8默认只会忽略命令行 ...