vue项目接入微信JSSDK的坑

lieeps 发布于2019-08-30 15:55 / 3384人阅读

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。

date: 2018-12-13 15:23:09

用于记录接入微信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()函数执行，但是，发现无论如何第一次进入页面都无法成功弹出授权弹框。

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

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

关注公众号"前端树"，更多实用性的干货

混合云服务器托管微信jssdk jssdk微信图片微信jssdk不稳定微信jssdk多图上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117159.html

vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

jsdt 2019-08-02 14:00 评论0 收藏0
vue项目接入微信JSSDK的坑

摘要：微信说明文档分享的坑根据的文档，很多人都是在初始化的配置的时候，传入的当前的地址不正确。同样的，给微信初始化的加入对应的参数。 date: 2018-12-13 15:23:09 用于记录接入微信JS-SDK的坑，以后方便查询第一次接入公众号微信支付、分享、定位等等的坑的时候，心里是迷茫而又恐惧。因为，听说坑特别多，后来发现自己的亲身体验到了这一点。支付的坑 1、当前URL未注册 ...

nodejh 2019-08-23 14:24 评论0 收藏0
使用vue开发微信公众号下SPA站点的填坑之旅

摘要：原文见我的博客，点击进入使用开发微信公众号下站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱。原文见我的博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅本文为我创业过程中，开发项目的填坑之旅。作为一个技术宅男，我的项目是做一个微信公众号，前后端全部自己搞定，不浪费国家一分钱^_^。 ...

yeyan1996 2019-08-21 15:09 评论0 收藏0
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）

摘要：在系统的手机中，其实微信点击网页的图片会自动调用这个接口一次。然后在在下面进行微信的接口的调用判断是还是终端终端更新这个好像微信自己修复了，现在无论还是，如果不调用这个方法，微信自己不会去调用了。 1.微信网页开发调用jssdk时报permission denied 大致是两个原因（1）首先注册时未将你所调用的接口名字添加至jsApiList （2）第二个就是你的这个公众号没有权限使...

JowayYoung 2019-08-05 14:29 评论0 收藏0
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）

摘要：在系统的手机中，其实微信点击网页的图片会自动调用这个接口一次。然后在在下面进行微信的接口的调用判断是还是终端终端更新这个好像微信自己修复了，现在无论还是，如果不调用这个方法，微信自己不会去调用了。 1.微信网页开发调用jssdk时报permission denied 大致是两个原因（1）首先注册时未将你所调用的接口名字添加至jsApiList （2）第二个就是你的这个公众号没有权限使...

Little_XM 2019-08-02 11:00 评论0 收藏0