详解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 相关文章推荐
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
真正面向对象编程:PHP5.01发布
2006/10/09 PHP
php session_start()关于Cannot send session cache limiter - headers already sent错误解决方法
2009/11/27 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
Laravel相关的一些故障解决
2020/08/19 PHP
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
用js实现博客打赏功能
2016/10/24 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
vue实现购物车的监听
2020/04/20 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[00:11]战神迅矛
2019/03/06 DOTA
Python中property属性实例解析
2018/02/10 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
python的re模块使用方法详解
2019/07/26 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python实现处理mysql结果输出方式
2020/04/09 Python
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
会议主持词
2014/03/17 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
大学生英文求职信范文
2015/03/19 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
详解Javascript实践中的命令模式
2021/05/05 Javascript
Linux系统下安装PHP7.3版本
2021/06/26 PHP
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技