详解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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
Vue函数式组件的应用实例详解
Aug 30 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 Google的translate API代码
2008/12/10 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python列出目录下指定文件与子目录的方法
2015/07/03 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
2016/05/12 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
乡村文明行动实施方案
2014/03/29 职场文书
三严三实对照检查材料
2014/08/25 职场文书
总经理检讨书
2014/09/15 职场文书
小学端午节活动总结
2015/02/11 职场文书
自主招生英文自荐信
2015/03/25 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript