详解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 相关文章推荐
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
three.js绘制地球、飞机与轨迹的效果示例
Feb 28 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
vue v-on监听事件详解
May 17 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 Javascript
JavaScript多种图形实现代码实例
Jun 28 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
wordpress之wp-settings.php
2007/08/17 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
JavaScript 事件系统
2010/07/22 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
2016/05/05 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python ddt实现数据驱动
2018/03/14 Python
浅析Python函数式编程
2018/10/06 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
教育见习报告范文
2014/11/03 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
网吧员工管理制度
2015/08/05 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
Python中rapidjson参数校验实现
2021/07/25 Python
关于使用Redisson订阅数问题
2022/01/18 Redis