详解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 相关文章推荐
一些经常会用到的Javascript检测函数
May 31 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
使用vue-router设置每个页面的title方法
Feb 11 Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
浅谈Javascript常用正则表达式应用
Mar 08 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
layUI的验证码功能及校验实例
Oct 25 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
Vue获取DOM元素样式和样式更改示例
2017/03/07 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
js判断文件类型大小并给出提示的实现方法
2018/01/03 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
puppeteer库入门初探
2019/01/09 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
2020/11/11 Javascript
js实现电灯开关效果
2021/01/19 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python函数形参用法实例分析
2015/08/04 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python3中sorted函数里cmp参数改变详解
2020/03/12 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
本科生详细的自我评价
2013/09/19 职场文书
有创意的广告词
2014/03/18 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
音乐会主持人开场白
2015/05/28 职场文书
实习感想范文
2015/08/10 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers