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

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

在Web 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: 15889936763。

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

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

我们的这个项目就用到这么多框架和插件。一般插件都分开发版和发布版。发布版的文件名基本上都形如xxx.min.js。







相关问题推荐