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 ...
随机推荐
- 浅析10种常见的黑帽seo手法
虽然博主并不认同黑帽seo手法,但是一些常见的黑帽手法还是需要了解的,增加自己对黑帽的认知,也可以在自己优化网站时适时的规避开这些黑帽手法,从而避免自己的网站被搜索引擎惩罚.好了,话不多说,下面进入今 ...
- 2018.07.31 bzoj4569: [Scoi2016]萌萌哒(并查集+倍增)
传送门 对于每个限制,使用倍增的二进制拆分思想,用并查集数组fa[i][j]" role="presentation" style="position: rel ...
- sql笔试练习
转:http://www.360doc.com/content/16/0919/17/14804661_592046675.shtml 本文是在Cat Qi的参考原帖的基础之上经本人一题一题练习后编辑 ...
- webuploader php上传视频
webuploader 上传大视频文件 在网上找了一个,自己重新组合了下,两个主要的文件,再加上官方下载的文件.其中有几个重要的点. 1.上传存放视频目录为了测试 直接777 2.fileupload ...
- 3D UI场景中,把XY平面的尺寸映射为屏幕像素的数学模型推导
概述及目录(版权所有,请勿转载,欢迎读者提出错误) 之前用kanzi的3D UI引擎和cocos-2d的时候都有遇到过这个问题,就如何把3D场景中的XY平面的尺寸映射为与屏幕像素一一对应的,即XY平面 ...
- 20155302 2016-2017-2 《Java程序设计》第六周学习总结
20155302 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 Java中的流分为两种,一种是字节流,另一种是字符流,分别由四个抽象类来表示(每种流包括输入 ...
- 重复 桂林电子科技大学第三届ACM程序设计竞赛
题目链接:https://ac.nowcoder.com/acm/contest/558/B import java.util.HashSet; import java.util.Scanner; p ...
- 【算法33】LRU算法
题目来源 LeetCode: https://leetcode.com/problems/lru-cache/ LRU简介 LRU (Least Recently Used,最近最少使用)算法是操作系 ...
- LeetCode141:Linked List Cycle
题目: Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without usin ...
- js框操作-----Selenium快速入门(八)
js框,就是JavaScript中的警告框(alert),确认框(confirm),提示框(prompt),他们都是模态窗口.什么是模态窗口,大家可以自行百度一下,简单说就是弹出的窗口是在最顶端的,你 ...