VUE使用微信JDK(附踩坑记录)
VUE使用微信分享SDK(附踩坑记录)
安装JS-SDK
npm i -S weixin-jsapi
引入包
ES5 写法
const wx = require('weixin-jsapi')
ES6 写法
import wx from 'weixin-jsapi'
使用
完整版
$.ajax({ url: 'https://*******/auth/jsapisignature', type: 'Get', async: false, dataType: 'jsonp', jsonp: 'callback', // 值可变,名称随意,但一般设为callback就可以了 jsonpCallback: 'gdd', success: function (data) { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: data.AppId, // 必填,公众号的唯一标识 timestamp: data.Timestamp, // 必填,生成签名的时间戳 nonceStr: data.NonceString, // 必填,生成签名的随机串 signature: data.Signature.toLowerCase(), // 必填,签名,见附录1 jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage' ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 }) wx.ready(function () { // var IMG_SRC = *** var LINK = location.href.split('#')[0] // 微信分享 document.title = title let TITLE = document.title // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 wx.onMenuShareTimeline({ title: TITLE, // 分享标题 link: LINK, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: Logo, // 分享图标 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }) wx.onMenuShareAppMessage({ title: TITLE, // 分享标题 desc: Description, // 分享描述 link: LINK, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: Logo, // 分享图标 type: '', // 分享类型,music、video或link,不填默认为link dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 }, cancel: function () { // 用户取消分享后执行的回调函数 } }) }) wx.error(function (err) { console.log(err) // alert(err.errMsg) }) } })
步骤详解
1、 调用后台返回微信签名的接口(为下面的config)
```JavaScript
$.ajax({
url: 'https://*******/auth/jsapisignature',
type: 'Get',
async: false,
dataType: 'jsonp',
jsonp: 'callback', // 值可变,名称随意,但一般设为callback就可以了
jsonpCallback: 'gdd',
success: function (data) {
}
```
2、 通过config接口注入权限验证配置
```JavaScript
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
```
3、 在微信JS-SDK准备好了就调用所需的方法
```JavaScript
wx.ready(function () {
// var IMG_SRC = ***
var LINK = location.href.split('#')[0]
// 微信分享
document.title = title
let TITLE = document.title
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.onMenuShareTimeline({
title: TITLE, // 分享标题
link: LINK, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: Logo, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
wx.onMenuShareAppMessage({
title: TITLE, // 分享标题
desc: Description, // 分享描述
link: LINK, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: Logo, // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
})
wx.error(function (err) {
console.log(err)
// alert(err.errMsg)
})
}
```
踩坑记录
1、 在微信里面刷新一下才出来分享图片
原因是本人在项目中 初始的进入域名为 www.aa.com/ID, 然后通过接口判断是什么模版的页面,直接跳向 一个新的路由 www.aa.com/模版/ID。 导致第一步获取签名失败
微信默认规则:
通过分享链接进去页面之后先获取document.location.href,跟你当时获取签名时的document.location.href做对比,不一致,就签名失败,分享失效,图片不出来
刷新一下出来:是当前的域名(www.aa.com/模版/ID 跳转或处理完毕的)是现在第一步获取签名时候微信获取当前的document.location.href
出现问题的机型是IOS
vue-router用的history模式,在微信签名验证的时候iOS验证URL竟然是第一次进来的URL 参考
结论:保证 微信 进入当前页面时获取的 document.location.href 与 个人 获取微信签名时的 document.location.href 时一致。例如:我上面的前后路由地址都为 www.aa.com/ID 就不存在这样的问题了
2、 VUE 安装的微信JS-SDK后台报错 wx is undefined
之前安装的是这个包weixin-js-sdk,在项目中报错,目前测试是不支持,应该用上面提到的 weixin-jsapi
3、 对于vue单页面history模式应用多路由跳转导致签名失败 参考
1、原因是使用了vue-router里面的history模式,这种模式下的url是不断变化的,而JS-SDK的在每一次url变化的时候都需要重新config,导致每一个跳转一个页面都需要重新去进行config,
2、而使用vue-router的默认模式,只是hash部分(#后面的内容)变化,这种变化是不需要重新进行config的
3、使用默认的vue-router的hash mode就可以,在根组件(一般是app.vue)里面配置config信息即可,代码如下
4、 Ts包安装微信JS-SDK问题
npm install @type/weixin-js-sdk
5、 ios上二次分享会出现签名错误, 并且莫名被拼接上了一串标识 此问题只有在ios上有 参考
本质上的错误是;当浏览者从分享窗口进入后,他从分享页按着正常路由跳转到其他页面,其他页面的逻辑中如果有需要获取当前页面url的需要,会发现这个url和正常路由跳转的不一样,导致签名不一致,所以获取不到正确的文案。
应使用下面方法获取分享地址(上面例子里的方式就是正确的)
var LINK = location.href.split('#')[0]
VUE使用微信JDK(附踩坑记录)的更多相关文章
- 我用EasyExcel优化了公司的导出(附踩坑记录)
背景介绍 最近要改一个导出的功能,在原有的基础上,在导出一份明细数据,要求导出内容加在原有 excel 的第二个 sheet 上.考虑到数据量还比较大,干脆引入阿里的 EasyExcel 来做. 下面 ...
- vue使用百度编辑器ueditor踩坑记录
一.使用 下载放入项目 main.js引入 import '../static/UE/ueditor.config.js'; import '../static/UE/ueditor.all.js'; ...
- vue cli3 + cube-ui 配置rem踩坑记录
在install cube-ui时,选择了后编译,选中使用rem的时候会发现,怎么刷新页面的html字体被设置成了37.5px 感觉太大了,于是去寻找修改的办法,第一反应是webpack的配置,于是去 ...
- unionId突然不能获取的踩坑记录
昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...
- vue 踩坑记录
1.绑定双击事件用 @dblclick 不要用@ondblclick 在vue中@=on 2.Vue中路由跳转踩坑. 比如我的路由如下定义 routes: [ { path: "/&quo ...
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- jvisualvm连接远程应用终于成功,附踩大坑记录!!(一:jstatd方式)
一.问题概述 连接远程java应用除了jstatd方式,还有jmx方式.不必拘泥于一种,一种不行可以果断尝试另一种,兴许就行了. 姊妹篇在这: jvisualvm连接远程应用终于成功,附踩大坑记录!! ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- ABP框架踩坑记录
ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...
随机推荐
- 3D柜体导出CAD优化参考方案
前言: 近期在做系统柜和衣柜导出CAD的工作,现阶段的工作是根据不同的厂商定制不同的CAD导出,其中房间平面图.顶脚线截面图.柜体立面图.侧视图.平面图.门板图等模块功能都基本固定,不同的是不同厂商的 ...
- hadoop启动脚本分析及常见命令
进程------------------ [hdfs]start-dfs.sh NameNode NN DataNode DN SecondaryNamenode 2NN [yarn]start-ya ...
- Stun方式的P2P实现原理(转)
转帖地址:http://www.cppblog.com/peakflys/archive/2013/01/25/197562.html 二.STUN方式的P2P实现 STUN是RFC3489规定的 ...
- C# WinForm 关闭登陆窗体后进程还再内存怎么办?
问题:我们通常再制作WinForm应用程序的时候,运行程序的第一个窗口一般是登陆窗口.代码如下: 那么这种方式有一个弊端,这种启动方式,其实就是把登陆窗口设置为主窗体.因此,再登陆后,我们通常是调用H ...
- Jsonp实现跨域请求Ajax
客户端 #!/usr/bin/env python import tornado.ioloop import tornado.web class MainHandler(tornado.web.Req ...
- TCP UDP HTTP 的关系和区别
TCP UDP HTTP 三者的关系: TCP/IP是个协议组,可分为四个层次:网络接口层.网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传 ...
- bootstrap媒体查询常用写法
@media (max-width: 768px) { /*超小屏幕设备 手机*/ } @media (min-width: 768px) and (max-width: 992px) { /*小屏幕 ...
- ngx-bootstrap使用03 Alerts组件、利用Object.assign复制对象
1 Alerts 该组件用于给用户操作提供反馈信息或者提供一些警告信息 2 用法 2.1 下载ngx-bootstrap依赖 参考博文:点击前往 2.2 在模块级别导入AlertModule模块 技巧 ...
- Web性能优化 高并发网站解决 单例 已看1
Web性能优化分为服务器端和浏览器端两个方面. 一.浏览器端,关于浏览器端优化,分很多个方面1.压缩源码和图片JavaScript文件源代码可以采用混淆压缩的方式,CSS文件源代码进行普通压缩,JPG ...
- ROS Learning-024 (提高篇-002) rviz的安装和使用
ROS 提高篇-002 - rviz 的安装和使用 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu 14.04.4 LTS ROS 版本:ROS ...