这篇文章主要介绍了详解vue项目接入微信JSSDK的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

支付的坑

1、当前URL未注册

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

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

所以进入以下位置:

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

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

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

代码如下:

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地址不正确。 然后就导致如下结果:

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

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

神奇成功了开心

需要注意的几点:

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

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

定位的坑

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
猿辅导回应获得10亿美元融资:消息不准确

猿辅导回应获得10亿美

针对媒体报道的获得10亿美元融资的消息,猿辅导对新浪科
坚果手机团队:新机或与罗永浩直播间合作 教育硬件将很快推出

坚果手机团队:新机或与

Smartisan 产品经理朱海舟透露,未来将会持续交朋友,希望
营收同比再度下滑 “百岁老人”IBM靠分拆能否焕发活力?

营收同比再度下滑 “

IBM能否借分拆重回历史高光?
美国司法部将在周二向谷歌发起反垄断诉讼

美国司法部将在周二向

据报道,美国司法部将在周二向谷歌发起反垄断诉讼。
“C端搭台、B端唱戏” 双面的名创优品

“C端搭台、B端唱戏”

随着国内门店趋于饱和、国外扩张尚存不确定性及竞争日
西瓜视频投入20亿元补贴 与B站竞争的火药味越来越重了

西瓜视频投入20亿元补

10月20日,在2020西瓜PLAY好奇心大会上,西瓜视频总裁任利
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,