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

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

创新互联公司公司2013年成立,先为阳朔等服务建站,阳朔等地企业,进行企业商务咨询服务。为阳朔企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

支付的坑

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)
 }
 }

标题名称:详解vue项目接入微信JSSDK的坑-创新互联
转载来于:http://scyanting.com/article/cdigjo.html