Web App开发--框架和库的选择

公司要新开发一个理财投资类的项目，需要开发微信公众号内的网页应用，也即Web App。

由于是创业公司，之前我的工作主要是后端开发和Android应用开发，网站前端不是工作重点，前端开发经验不多，只是负责开发过公司主营app的后台管理系统，以及节日推广的H5。

开发手机端的前端项目和PC端的项目是有很大不同的，手机端对页面加载速度，交互响应等用户体验的要求很高。当我开发差不多时给同事看，他还以为是native app（我们同时有iOS和android版本的项目）。

好，吹牛逼就到这，现在开始我们的踩坑之旅。

如果你有html，CSS，jQuery, js基础、开发过PC端的前端项目，但没有web app开发经验，想开发良好用户体验的web app，那 这个系列的文章就是为你而写的。

前端框架很多，鱼龙混杂，很多刚入门的开发者往往会头大，不知从何选择。理论上讲，只要你懂html，css和js，不需要任何框架，你就可以开发出完全满足需求的项目。但缺点是，数据和界面的耦合度会非常高，必须写大量的dom操作；代码可读性差，项目大一点就非常难以维护了。

在这里就不陈列各种各样的框架和库了，这个链接全面地收集和整理了当前的一些流行的优秀的框架和库：前端框架和库大全。

框架和库的选择最好遵循一个原则：小而专一。大而全的框架，能不用就不用，除非非常好（基于vue.js的Mint UI就是一款非常好的移动端UI组件库）。

我阅读和分析了很多微信公众号的网页的源码（浏览器上是打不开微信网页的，需要微信授权，如何获取微信网页源码），提取了一些流行的优秀的前端框架和库。

1. vue.js。vue.js是一个MVVM框架，数据和界面分离，大大提高界面和业务逻辑的开发。而且小巧灵活，非常适合开发手机前端网页，特别是单页面应用。我选择vue.js 2.0以上的版本。另外还用了vuex.js，vuex.js是vue.js 2.0的数据状态管理方案，解决vue的组件之间的数据和事件传递的问题。关于vue.js 1.0版本用broadcast和dispatch机制传递数据和事件，关于vuex.js的优点，请阅读vue官方文档和vuex官方文档。单页面应用最好用上vue-router.js，vue-router官方文档。结合一些动画库，比如animate.css，可以实现native app一样的进场和退场动画效果。

2. layerMobile。layerMobile是layerUI的移动版。一款很好的弹出层插件。弹出窗效果比native app的弹窗还好。可自定义实现任意的弹窗。

3. echarts。echarts是百度的一款图表插件，功能丰富，特别适合绘制股票分时图和K线图。

4. md5.js。网络数据传输要保证数据的安全性，签名要用到md5后的请求数据和后端进行检验。

5. animate.css。一个非常小的纯css3的动画插件。我的项目中主要用于页面的进场和退场过度效果。animate.css可以在vue.js上完美的结合。

6. iosSelect.js。一个个人开发的iOS风格的日期选择小插件。由于该插件不能完全满足我们的项目需求，我稍稍改动了插件，添加上支持初始化日期为指定的自定义日期（该插件的默认日期只能是今天）和直接选择今天的按钮。需要修改版的插件可联系我QQ: 1549925103。

7. iscroll.js。对于列表，移动端的滚动不像PC端，PC端是鼠标滚轮滚动，移动端是手指触摸滚动。网页列表在移动端的触摸滚动效果很不理想，iscroll.js插件就是专门用于提高列表触摸滚动流畅度的插件。

8. fastclick.js。iphone手机浏览器对页面点击事件有200毫秒到300毫秒的延迟，Android手机上的浏览器一般没有这个问题。为了消除这个延迟，提高页面响应速度，专门用fastclick插件消除这个延迟。

我们的这个项目就用到这么多框架和插件。一般插件都分开发版和发布版。发布版的文件名基本上都形如xxx.min.js，发布版是压缩和代码混淆后的，我们发布自己的项目时用的也必须是发布版。

下一篇： Web App开发--Vue入门与实践