详解vue项目接入微信JSSDK的坑


Posted in Javascript onDecember 14, 2018

用于记录接入微信JS-SDK的坑,以后方便查询 第一次接入公众号微信支付、分享、定位等等的坑的时候,心里是迷茫而又恐惧。因为,听说坑特别多,后来发现自己的亲身体验到了这一点。

支付的坑

1、当前URL未注册

详解vue项目接入微信JSSDK的坑

问题: 微信公众号H5调起支付时,点击支付按钮出现“当前页面的URL未注册”的提示。

解决办法:由于2017年8月1日微信官方把关于支付的信息转移到了商户平台:公众平台微信支付公众号支付授权目录、扫码支付回调URL配置入口已于8月1日迁移至商户平台(pay.weixin.qq.com )

所以进入以下位置:

登录微信商户平台-产品中心-开发配置,配置支付授权路径。如果掉起支付的页面在 域名/pay.html中,那么就在此添加授权路径, 如我的掉起支付的页面在www.weixinPay.com/pay.html 中,那么授权目录就配置为htt://www.weixinPay.com/

tip: 注意:后面的 / 一定要加上,表示该路径下的页面都可以调起微信的支付接口。

详解vue项目接入微信JSSDK的坑

2、如果按照以上还是弹出当前URL未注册 因为微信支付对spa项目的hash路由兼容还是不很好。需要加上一个 "?" 如图:

详解vue项目接入微信JSSDK的坑

代码如下:

watch: {
 $route() {
  this.directRightUrl()
 }
},
methods: {
 directRightUrl() {
 let { href, protocol, host, pathname, search, hash } = window.location
 search = search || '?'
 let newHref = `${protocol}//${host}${pathname}${search}${hash}`
 if (newHref !== href) {
  window.location.replace(newHref)
 }
 }

我这里是根据App.vue文件,进行路由监控。然后给每个页面都加上问号,虽然会些许性能消耗。但是方便省事,具体可以根据自己的页面适当修改。

微信JS-SDK说明文档

分享的坑

根据JS-SDK的文档,很多人都是在初始化的wx配置的时候,传入的当前的URL地址不正确。 然后就导致如下结果:

详解vue项目接入微信JSSDK的坑

解决办法: 请在保证后台能正确返回初始化需要的配置参数的情况下

详解vue项目接入微信JSSDK的坑

修改前:
// let currentUrl = window.location.href
修改后
let currentUrl = window.location.href.split('#')[0]

神奇成功了开心

详解vue项目接入微信JSSDK的坑

需要注意的几点:

jsApList: [] 需要加入对应参数。比如,分享加入'onMenuShareTimeline', 'onMenuShareAppMessage'。 具体的对应接口的参数可以参考文档

所有接口的调用,请保证在wx.ready()执行后,才调用。文档里面是这么建议的。

详解vue项目接入微信JSSDK的坑

定位的坑

刚开始定位的,内心是有点小激动的。因为觉得这个功能很高大尚,当然了这只是我个人的想法。好了~,不扯了。

同样的,给微信初始化的 jsApList 加入对应的参数。 然后在wx.ready()函数执行,但是,发现无论如何第一次进入页面都无法成功弹出授权弹框。

详解vue项目接入微信JSSDK的坑

后来发现,在页面完成之后。延迟一秒再进行获取定位,即可 百分百成功!坑爹有木有。 代码如下

详解vue项目接入微信JSSDK的坑

详解vue项目接入微信JSSDK的坑

目前遇到这个三个坑,后期遇到再写上吧。痛苦的经历需要不要再有了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery focus(fn),blur(fn)方法实例代码
Dec 16 Javascript
jquery 插件学习(六)
Aug 06 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
JS中操作JSON总结
Dec 06 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
js实现自定义右键菜单
May 18 Javascript
vant实现购物车功能
Jun 29 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 #Javascript
javascript中的event loop事件循环详解
Dec 14 #Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 #Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 #Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 #Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 #Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 #Javascript
You might like
input file获得文件根目录简单实现
2013/04/26 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php-fpm配置详解
2014/02/12 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
python中将阿拉伯数字转换成中文的实现代码
2011/05/19 Python
python不带重复的全排列代码
2013/08/13 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
华润集团网上药店:健一网
2016/09/19 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
服装机修工岗位职责
2013/12/26 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
欢迎新生标语2015
2015/07/16 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript