html+vue单页面应用(SPA)实践

记录一下去年年底做的一个小项目，用vue做的一个单页面应用，活动涉及页面5个，应该也不算小的单页面应用吧~

我们大部分人用vue做单页面或多页面项目都是直接用webpack和vue-cli脚手架一键创建，快速方便~但快速开发多了，很多人也就不了解vue.js其实也是可以直接在html引入使用的~当然两种方式如何使用根据具体的项目来分析的，对于一个不小且页面较多的项目用自动化工具构建的当然更便于维护~对于很多小的活动专题大部分时候也不需要用vue开发，技术选型还是要具体情况具体分析

项目名称：高校抽奖

项目说明：顾名思义这是一个运营在高校的抽奖活动专题，其实是蹭锦鲤的热度做的用户拉新和引导app下载。活动推广仅在微信和app里，用户可参与活动获取抽奖码[h5只能看活动相关信息，具体操作均引导至app进行交互]，同时用户可分享和邀请好友，好友成功参与则分享者也可获得一组抽奖码，活动会在规定时间进行开奖[中奖号码由后台跑任务得出]，中奖用户会短信和站内通知，中奖用户前台需填写奖品接收地址。

开发选型：按照最终给的设计稿，前台活动页面大体分为活动列表页，我的活动，活动详情页，我的抽奖码，中奖名单，地址收集~其中活动列表和我的活动样式一致，底部tab切换~活动详情页的业务交互最多，需要区分app和h5来显示不同活动状态下的不同交互操作。时间比较紧急，和同事商量后用了html+vue.js的方式去做，所有页面在一个html上开发，通过路由进行页面跳转。之前已经有过一些开发案例，但交互相对简单，页面之间也没有跨业务，虽然不知道会不会有坑，就先试一试

设计原型图，简单打码下

开发步骤：

step1 确定用vue后，先按照所需要的页面写出初步雏形，需要提前下载vue.min.js和vue-router.min.js进行引入，写好对应的component和路由。此外需要添加公司平时做专题时需要用到的基础方法，和app交互的jsbridge等~

html结构和js引用

vue各个模块编写

页面相关的路由

调试代码

这段代码添加后会出现调试按钮，和微信小程序的debug模式类似，方便手机端调试

【emmmm，不知道怎么加这种背景的文本代码只能插图了~】

step2 完善每个模块，并写上交互逻辑，其中活动列表和我的活动用同一个组件[样式和结构可复用]~活动详情页是先根据一种交互写效果，再添加业务判断~地址页面用的省市区联动直接下的jquery-ui的city-picker按照我们的主色调修改了下颜色~[放部分模块代码如下↓]

我的抽奖码

这个截图是简单又完整的vue组件交互，页面模板的编写，created里获取基础数据，赋值data里的具体参数，完成渲染

详情页的模板结构

详情页涉及的交互方法

大概这个页面的整个component的行数占了整个html页面的一半吧，┑(￣Д ￣)┍~判断炒鸡多~还涉及倒计时的效果渲染，临界判断~口令拷贝[用clipboard.js插件，复制后记得销毁对象~否则第二次操作会调用两次复制！]

step3 完善页面的微信分享和app分享逻辑，app口令复制打开等其他相关交互，冗余的代码优化~项目一期over~

微信分享，调用之前切记引入weixin的js和apiKey参数的获取

总结：很好的一次开发体验，按照以前的经验，这种涉及多页面、交互不单一的活动专题都是当做一个小项目去做，用老的技术[前后端不分离]开发~当然这也有一些弊端，毕竟涉及的页面比较多，所有东西都在一个html里，进行版本迭代的时候就会发现页面太重了~

有什么问题和建议可以留言和我交流~

完...