详解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 相关文章推荐
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
jQuery中 noConflict() 方法使用
Apr 25 Javascript
单元选择合并变色示例代码
May 26 Javascript
javascript折半查找详解
Jan 26 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
vue实现拖拽进度条
Mar 01 Vue.js
微信小程序实现动态显示和隐藏某个控件功能示例
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
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
用javascript做拖动布局的思路
2008/05/31 Javascript
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
基于jQuery的前端数据通用验证库
2011/08/08 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
2014/03/10 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
浅析Python基础-流程控制
2016/03/18 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
tensorflow的计算图总结
2020/01/12 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
中专生自我鉴定范文
2014/02/02 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
代收款委托书范本
2014/10/01 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
php 原生分页
2021/04/01 PHP
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python