详解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 相关文章推荐
fromCharCode和charCodeAt 方法
Dec 27 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
关于express与koa的使用对比详解
Jan 25 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
解决Layui中layer报错的问题
Sep 03 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
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php存储过程调用实例代码
2013/02/03 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
JavaScript多线程详解
2015/08/12 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
jquery.validate提示错误信息位置方法
2016/01/22 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python简单实现Base64编码和解码的方法
2017/04/29 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
windows下python安装小白入门教程
2018/09/18 Python
python pyheatmap包绘制热力图
2018/11/09 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
nohup的用法
2012/11/26 面试题
初中三年学生的学习自我评价
2013/11/13 职场文书
学生感冒英文请假条
2014/02/04 职场文书
教师考核评语大全
2014/12/31 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
Python+pyaudio实现音频控制示例详解
2022/07/23 Python
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python