使用vue开发微信公众号下SPA站点的填坑之旅
2017-01-31 22:37
309 查看
原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅
本文为我创业过程中,开发项目的填坑之旅。作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^。
考虑到体验,前端做成SPA站点,也就是单页面应用
需要使用微信的JSSDK
需要有微信支付功能
作为一个偏后端的半专业前端人士,经过一两周的调研和学习后,
webpack实现前端代码打包
vue实现数据绑定,vue-router实现前端路由
weui提供UI框架
vux,提供各种组件,包括对weui的组件化封装
然后
微信支付签名出错
微信支付路径要求二级或以上路径
开启调试模式后,微信支付仍然没有错误提示
授权回调处理
微信的模板消息,会自动把url中的问号(?)去掉
一一详述
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获取
解决办法
所有前端url,统一加一个/frontend前缀
不过我对比发现,ios下的各种提示,要比android下全面很多,如有必要,推荐大家在ios下进行调试
解决办法
使用iphone进行开发调试
每次加载页面后,我都会调用后台接口判断是否登陆,如果没登陆,则跳转回到后台url进行授权,授权后再跳转回当前页面
解决办法
如果页面没有问号(?),则跳转到正确的url,代码如下
以上代码有三个作用
自动添加问号(?)
自动把分隔符由#!变成#
分隔符后面,自动判断是否为斜杠(/),没有则添加上
另外介绍一下我的公众号启奏陛下
这是一个提供“一句话新闻”的公众号,没有标题,标题即内容
扫描以下二维码可以关注
本文为我创业过程中,开发项目的填坑之旅。作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^。
我决定实现如下功能
架构上,实现前后端分离。方便以后前后端的分工考虑到体验,前端做成SPA站点,也就是单页面应用
需要使用微信的JSSDK
需要有微信支付功能
作为一个偏后端的半专业前端人士,经过一两周的调研和学习后,
我决定使用如下技术
后端使用php搭建接口,本文主要讲前端,不细说webpack实现前端代码打包
vue实现数据绑定,vue-router实现前端路由
weui提供UI框架
vux,提供各种组件,包括对weui的组件化封装
然后
我遇到了如下的坑
微信JSSDK签名出错微信支付签名出错
微信支付路径要求二级或以上路径
开启调试模式后,微信支付仍然没有错误提示
授权回调处理
微信的模板消息,会自动把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 } }
以上代码有三个作用
自动添加问号(?)
自动把分隔符由#!变成#
分隔符后面,自动判断是否为斜杠(/),没有则添加上
结束语
以上就是我在开发过程中遇到的一些还记得的坑,欢迎大家探讨另外介绍一下我的公众号启奏陛下
这是一个提供“一句话新闻”的公众号,没有标题,标题即内容
扫描以下二维码可以关注
相关文章推荐
- 使用vue开发微信公众号下SPA站点的填坑之旅
- 使用vue开发微信公众号总结(持续更新ing)
- 使用vue开发微信公众号,解决微信缓存
- 微信公众号接口开发为什么不能使用循环语句?
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1
- 转载,点评:使用开源软件设计、开发和部署协作型 Web 站点
- 在2008 Beijing Perl 大会的演讲-使用Mason开发高性能的Web站点
- 开发WAP站点之---使用Firefox浏览器访问WAP手机站点
- 使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑
- 【转载】Python Web 框架: 使用 TurboGears 和 Python 开发 Web 站点
- 开发WAP站点之---使用PC电脑浏览器访问WAP手机站点
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 5 - 数据库设计
- 使用开放源码软件设计、开发和部署协作型 Web 站点,第 6 部分
- 从零开始,使用python快速开发web站点(2)
- 从零开始,使用python快速开发web站点(1)
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 2
- 开发WAP站点之---使用PC电脑浏览器访问WAP手机站点
- 使用开源软件设计、开发和部署协作型 Web 站点
- Python Web 框架,第 1 部分: 使用 Django 和 Python 开发 Web 站点
- 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证