vue项目接入微信JSSDK的坑

---

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

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

支付的坑

一、当前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: 注意：后面的 / 必定要加上，表示该路径下的页面均可以调起微信的支付接口。

二、若是按照以上仍是弹出当前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()函数执行，可是，发现不管如何第一次进入页面都没法成功弹出受权弹框。

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

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

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