使用vue开发微信公众号下SPA站点的填坑之旅

原文发表于本人博客，点击进入使用vue开发微信公众号下SPA站点的填坑之旅

本文为我创业过程当中，开发项目的填坑之旅。做为一个技术宅男，个人项目是作一个微信公众号，先后端所有本身搞定，不浪费国家一分钱^_^。

我决定实现以下功能

• 架构上，实现先后端分离。方便之后先后端的分工
• 考虑到体验，前端作成SPA站点，也就是单页面应用
• 须要使用微信的JSSDK
• 须要有微信支付功能

做为一个偏后端的半专业前端人士，通过一两周的调研和学习后，

我决定使用以下技术

• 后端使用php搭建接口，本文主要讲前端，不细说
• webpack实现前端代码打包
• vue实现数据绑定，vue-router实现前端路由
• weui提供UI框架
• vux，提供各类组件，包括对weui的组件化封装

而后

我遇到了以下的坑

1. 微信JSSDK签名出错
2. 微信支付签名出错
3. 微信支付路径要求二级或以上路径
4. 开启调试模式后，微信支付仍然没有错误提示
5. 受权回调处理
6. 微信的模板消息，会自动把url中的问号(?)去掉

一一详述

微信JSSDK签名出错

JSSDK在普通网站中是没问题的，可是在SPA站点中，签名常常出错

JSSDK官方文档是这么说的

全部须要使用JS-SDK的页面必须先注入配置信息，不然将没法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，因此使用pushState来实现web app的页面会致使签名失败，此问题会在Android6.2中修复）。

也就是说，android下的微信客户端里，不支持vue-router的history模式。

解决办法见支付签名问题

• vue-router使用hash模式
• 每次url更改的时候，从新调用JSSDK的config接口

微信支付签名出错

支付受权的坑，你们能够参考这篇文章
按照文中的描述，其实咱们也能够在js中根据android仍是ios，来分别进行处理；可是推荐采用文中的方式，逻辑上更统一，使用也更方便。

另外说明一点，文中的#!作分隔符的方式已经废弃了，你们使用#便可，叹号(!)去掉了

另外就是wx.config的签名url和支付签名url，微信处理也不同，见下面的解决办法

解决办法

• vue-router路由使用hash模式
• 每次url更改的时候，从新调用JSSDK的config接口
• hash分隔(#)前面加一个问号(?)，若是js判断没有问号，则跳转一次
• wx.config签名使用的url，经过window.location.href.split('#')[0]获取
• 微信支付签名使用的url，经过用window.location.href获取

微信支付路径要求二级或以上路径

在遇到这个问题以前，个人php接口都统一加了一个前缀api，也就是 http://example.com/api/other 这样的url，服务器会自动转发给php服务，其余url则转发给前端服务器。遇到微信这个问题后，我把前端url也统一加了一个前缀frontend，这样前端url就变成了 http://example.com/frontend/?#hash

解决办法

• 全部前端url，统一加一个/frontend前缀

开启调试模式后，微信支付仍然没有错误提示

不止微信支付，JSSDK的其余接口，也常常没有错误提示，或者提示很模糊，微信这简直是慢性谋杀。
不过我对比发现，ios下的各类提示，要比android下全面不少，若有必要，推荐你们在ios下进行调试
解决办法

• 使用iphone进行开发调试

受权回调处理

这个不算坑，只是说下个人处理。
每次加载页面后，我都会调用后台接口判断是否登录，若是没登录，则跳转回到后台url进行受权，受权后再跳转回当前页面

微信的模板消息自动去掉url的问号(?)

前面解决微信签名问题的时候，咱们给每一个url特地加了一个问号(?)，可是我发现，在发送微信模板消息的时候，即便给微信的url是对的，当用户点击模板消息的时候，微信打开的连接中，仍然把问号去掉了，这个很让人无语。考虑到尽可能本身解决问题的原则，最后个人解决方案是在js中进行判断处理，自动把缺失的问号加上

解决办法

• 若是页面没有问号(?)，则跳转到正确的url，代码以下

function directRightUrl () {
  let paths = window.location.href.split('#')
  paths[1] = paths[1] || '/'
  // 老式的#!分隔跳转
  if (paths[0].charAt(paths[0].length - 1) !== '?') {
    paths[0] = `${paths[0]}?`
  }
  if (paths[1].charAt(0) === '!') {
     paths[1] = paths[1].substr(1)
  }
  let url = `${paths[0]}#${paths[1]}`
  if (window.location.href !== url) {
    window.location.href = url
  }
}

以上代码有三个做用

1. 自动添加问号(?)
2. 自动把分隔符由#!变成#
3. 分隔符后面，自动判断是否为斜杠(/)，没有则添加上

结束语

以上就是我在开发过程当中遇到的一些还记得的坑，欢迎你们探讨

另外介绍一下个人公众号启奏陛下
这是一个提供“一句话新闻”的公众号，没有标题，标题即内容
扫描如下二维码能够关注