详解vue项目接入微信JSSDK的坑-创新互联

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

支付的坑

1、当前URL未注册

所以进入以下位置：

登录微信商户平台-产品中心-开发配置，配置支付授权路径。如果掉起支付的页面在 域名/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)
 }
 }