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

如果公司想开发一个新的金融投资项目，它需要在微信公众号中开发一个webApp，即web App。

作为一家创业公司，我之前的工作主要集中在后端开发和AndroidApp开发。网站的前端不是我工作的重点，我在前端开发方面几乎没有经验。我只负责开发公司主要App和H5的后台管理系统，用于节日促销。

用于手机开发的前端项目与用于PC的项目非常不同，并且手机需要高页面加载速度、交互式响应和其他用户体验。当我准备开发它时，我把它展示给了我的同事，他认为这是一个原生App（我们有该项目的iOS和Android版本）。

好了，这就是吹牛的理由。现在让我们开始我们的旅程。

如果您有html、CSS、jQuery和js基础，并且开发了PC前端项目，但没有webApp开发经验，并且希望开发具有良好用户体验的webApp，那么本系列文章就是为您编写的。

有很多前端框架。许多新开发人员往往头脑发热，不知道从哪里选择。理论上，只要你理解html、css和js，你就可以开发完全满足你需求的项目，而不需要任何框架。但缺点是数据和接口之间的耦合非常高，必须编写大量dom操作；代码的可读性很差，很难维护更大的项目。

这个链接没有在这里显示各种框架和库，而是全面收集和整理了一些流行的优秀框架和库：。

框架和库的选择应遵循一个原则：小而具体。除非非常好（vue.js是一个非常好的移动UI组件库），否则可以不用使用大型而全面的框架。

我阅读并分析了许多微信公众号页面的源代码（微信页面无法在浏览器上打开，需要微信授权），并提取了一些流行且优秀的前端框架和库。

1.虚幻。jsvue。Js是一个MVVM框架。数据和接口是分离的，这大大提高了接口和业务逻辑的开发。它还小而灵活，非常适合开发移动前端网页，尤其是单页App。我选择vue Js 2.0或更高版本。此外，vuex。js 2.0的数据状态管理解决方案解决了vue组件之间的数据和事件传输问题。关于vue 1.0版本的js使用广播和调度机制来传输数据和事件。因为vuex的优点。js，请阅读和。最好使用vue路由器。js用于单页App，。结合一些动画库，如animate Css，可以实现与原生App相同的进入和退出动画效果。

2.层移动LayerMobile是layerUI的移动版本。一个好的弹出层插件。弹出窗口效果优于原生应用。可以自定义任何弹出窗口。

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

4.md5.js网络数据传输应确保数据的安全性，并且签名应在md5之后由请求数据和后端进行检查。

5.动画。css一个非常小的纯css3动画插件。我的项目主要用于页面进入和退出的过度效果。使有生气css可以在vue.js上完美组合。

6.iosSelect。js个人iOS风格的日期选择小部件。由于插件不能完全满足我们的项目要求，我对插件进行了轻微更改，添加了一个支持初始化日期作为指定自定义日期的按钮（插件的默认日期只能是今天），并直接选择了今天。如果您需要修改插件，请通过QQ:1549925103与我联系。

7.旋转。js对于列表，移动端的滚动与PC端的滚动不同，在PC端，鼠标滚轮滚动，手指触摸滚动。移动终端上的网页列表的触摸滚动效果并不理想。iscroll。js插件旨在提高列表的触摸滚动平滑度。

8.快速点击。jsiPhone浏览器的页面点击事件延迟为200毫秒至300毫秒。Android手机上的浏览器通常没有这个问题。为了消除这种延迟并提高页面响应速度，fastclick插件专门用于消除这种延迟。

这个项目使用了很多框架和插件。通常，插件分为开发版本和发布版本。发布版本的文件名