用于记录接入微信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 || '"external nofollow" target="_blank" href="https://mp.weixin.qq.com/wiki">微信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的坑

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

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

标签:
vue,接入微信JSSDK,vue,jssdk微信

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“详解vue项目接入微信JSSDK的坑”

暂无“详解vue项目接入微信JSSDK的坑”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。