详解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插件
Feb 24 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
Bootstrap框架的学习教程详解(二)
Oct 18 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
PHP实现加密的几种方式介绍
2015/02/22 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
php构造函数与析构函数
2016/04/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
JS Timing
2007/04/21 Javascript
js函数般调用正则
2008/04/08 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
2019/08/12 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
软件测试企业面试试卷
2016/07/13 面试题
大学生新闻专业个人自我评价
2013/11/12 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
党员民主评议个人总结
2014/10/20 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
盲山观后感
2015/06/11 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
2016预备党员培训心得体会
2016/01/08 职场文书