详解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 相关文章推荐
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jquery获取复选框被选中的值
Mar 22 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
js实现移动端轮播图
Dec 21 Javascript
js实现登录时记住密码的方法分析
Apr 05 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
php图片加中文水印实现代码分享
2012/10/31 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
vue组件中的数据传递方法
2018/05/14 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
Python 装饰器深入理解
2017/03/16 Python
python将回车作为输入内容的实例
2018/06/23 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
婚礼证婚人证婚词
2014/01/13 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
协议书模板
2014/04/23 职场文书
求职信怎么写
2014/05/23 职场文书
教师党员自我评价范文
2015/03/04 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
七年级作文之英语老师
2019/10/28 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android