日期：2018-12-1315:23:09记录一下接入微信JS-SDK的坑，方便查询第一次接入公众号微信支付和分享，定位等等，我感到迷茫和恐惧。因为，听说有很多坑，后来才知道自己亲身经历过这个。支付陷阱1、当前网址未注册：微信公众号H5发起支付时，点击支付按钮提示“当前页面网址未注册”。解决方案：自2017年8月1日微信正式将支付信息迁移至商户平台：公众平台微信支付公众号支付授权目录，扫码支付回调URL配置入口已于8月1日迁移至商户平台（支付.weixin.qq.com）所以进入如下位置：登录微商平台-产品中心-开发配置，配置支付授权路径。如果WeixinPay页面在域名/pay.html，则在此处添加授权路径。比如我的WeixinPay页面在www.weixinPay.com/pay.html，那么授权目录配置为htt://www.weixinPay.com/提示：注意：后面的/必须加，表示所有页面该路径下可以调用微信的支付接口。2、如果按照上面的操作，还是会弹出当前网址没有注册，因为微信支付对spa项目的hash路由不是很兼容。需要加一个“？”如图：代码如下：watch:{$route(){this.directRightUrl()}},methods:{directRightUrl(){let{href,protocol,host,pathname,search,hash}=window.locationsearch=搜索||“？”letnewHref=`${protocol}//${host}${pathname}${search}${hash}`if(newHref!==href){window.location.replace(newHref)}}我这里是根据App.vue文件来监听路由的。然后给每个页面加一个问号，虽然会消耗一点性能。但是方便又省事，可以根据自己的页面修改。微信JS-SDK描述文档分享坑根据JS-SDK文档，很多人在初始化wx配置的时候，传入的当前URL地址不正确。则导致如下结果：解决方法：请确保后台能够正确返回初始化所需的配置参数。修改前：//letcurrentUrl=window.location.href修改后letcurrentUrl=window.location.href.split('#')[0]奇迹般的成功，开心。需要注意的几点：jsApList:[]需要加上相应的参数。例如分享添加'onMenuShareTimeline'、'onMenuShareAppMessage'。对应接口的具体参数请参考文档中所有接口的调用。请确保在wx.ready()执行后调用。这是在文档中建议的。定位坑刚开始定位，心里有点小激动。因为我觉得这个功能非常高尚，当然这只是我个人的想法。好了~不说了。同样在微信初始化的jsApList中添加相应的参数。然后在wx.ready()函数中执行。但是发现无论你第一次如何进入该页面，都无法成功弹出授权弹框。后来发现，页面完成后。延迟一秒再获取定位，100%成功！作弊没有错。代码如下。这三个坑我目前都遇到过，以后遇到再写。惨痛经历需要停止关注公众号‘前端树’，更多实用干货
