详解vue中使用微信jssdk


Posted in Javascript onApril 19, 2019

首先,确保你安装了weixin-js-sdk。

如果还没有安装  npm install weixin-js-sdk

在页面中

import wx from 'weixin-js-sdk';

接下来,就需要在mounted里面进行wx.config()了。

由于使用微信js需要进行授权配置,所以需要使用ajax请求从服务端获取微信jssdk的授权参数,ajax请求我这里使用的axios

this.axios({
 method: 'post',
 url: 'http://my.service.com/index.php/opcode/6002',
 data:{ url:location.href.split('#')[0] } //向服务端提供授权url参数,并且不需要#后面的部分
}).then((res)=>{
 wx.config({
  debug: true, // 开启调试模式,
  appId: res.appId, // 必填,企业号的唯一标识,此处填写企业号corpid
  timestamp: res.timestamp, // 必填,生成签名的时间戳
  nonceStr: res.nonceStr, // 必填,生成签名的随机串
  signature: res.signature,// 必填,签名,见附录1
  jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
 });
})

就这样,只要服务端返回的签名没有错,就能配置成功,就可以使用微信js啦。

需要注意的是,每次url变化之后都需要重新微信jssdk授权,虽然每次授权url除去#后都是一样的,但是必须这么做,微信的机制。

还有一个需要注意的坑,使用微信自定义分享功能的时候,当分享链接中存在中文的时候,一定要进行encodeURIComponent(),否则在安卓手机上能成功自定义分享,ios手机上则不能成功分享。查阅资料后得知是安卓手机会自动encodeURIComponent,而ios不会。

以上所述是小编给大家介绍的vue中使用微信jssdk详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
探讨js字符串数组拼接的性能问题
Oct 11 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
jQuery实现右下角可缩放大小的层完整实例
Jun 20 Javascript
巧用canvas
Jan 21 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 #Javascript
this.$toast() 了解一下?
Apr 18 #Javascript
Vue-input框checkbox强制刷新问题
Apr 18 #Javascript
vue axios封装及API统一管理的方法
Apr 18 #Javascript
Vue组件系列开发之模态框
Apr 18 #Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 #Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 #Javascript
You might like
PR值查询 | PageRank 查询
2006/12/20 PHP
php header函数的常用http头设置
2015/06/25 PHP
tp框架(thinkPHP)实现三次登陆密码错误之后锁定账号功能示例
2018/05/24 PHP
发现的以前不知道的函数
2006/09/19 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
漂亮! js实现颜色渐变效果
2016/08/12 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
JS实现的简单分页功能示例
2018/08/23 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
最基础的Python的socket编程入门教程
2015/04/23 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
TensorFlow中权重的随机初始化的方法
2018/02/11 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
学术会议邀请函范文
2014/01/22 职场文书
社会实践单位意见
2015/06/05 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫