一个vue搭建的history模式的活动页项目

vue单页面应用我一直觉得适合做移动端项目,尤其是微信端的活动页那种活动
原因是

  • vue有通用的cli脚手架,有vue全家桶, 虽然当下的主流框架都有,但是vue应该是最容易上手的一个了
  • vue适合这种小型的项目,页面10个一下,少量的状态管理,稍微复杂的条件显示机制以及状态判断

可是我就是在用vue去写微信h5的时候遇到了一些坑。。。

1.移动端适配

移动端适配对于前端已经是不能再熟悉的了,比较主流的就是动态设置html的字体大小,以rem的单位来写页面,但是这有个问题,ipad上怎么做兼容,屏幕越大,显示越大,文字越大,图片也达到本身宽度导致显示模糊

2.路由模式

这次项目使用的是history模式,运维那边已经配置好了nginx代理,所有指向当前目录下的子目录都会指向index.html,但是前端打包发布一直没法达到真正的效果,页面不显示,最后是打包的配置,以及路由的base属性没有设置导致的

3.微信授权

在这之前,我做的微信授权都是后端处理的,做跳转的,所有授权操作后端一个人完成,现在是用微信跳转获取code,code请求接口种植session来验证用户信息

4.微信分享

vue的微信分享还是很坑的,正常的情况在获取微信jssdk授权之后,分享应该是可以调用的,但是作为但页面应用,微信授权在ios下会出现签名失败的情况,网上也搜索了很多方法,方法就是记录第一次的页面地址,之后每次初始化分享的时候,获取微信jssdk授权地址为第一次的入口地址即可

5.路由拦截

涉及到不同页面的状态进入不同页面,虽然主入口都一样,但是需要在进入之前就判断跳转到哪个页面就需要用到路由拦截,配合各种条件执行不同的next()