[聚合文章] 2017移动Web APP开发指南

进入2017年，移动开发中采用前端Web技术来取代原生App进行开发越来越风靡，这些得益于JS框架的发展，框架设计演变也更加偏向于移动端，在库体积、效果、性能都比原来版本有长足的进展。本文是对2017年移动WebApp开发库的总结，方便各位读者进行技术选型，同时提供示例来方便学习。

文章目录

JS框架

2017年国内移动Web APP开发中Vue可谓一枝独秀，可以看到很多公司基于Vue 2.0制作了组件库并完成App的制作。Vue在入门学习曲线、库体积以及使用设计上相比React或Angular2都有优势，性能上也完全没有问题。如果你的移动Web APP项目功能不太复杂，团队参与人数不多，那么使用Vue相关组件和库来进行技术栈构建是2017年最佳的选择。

React在移动Web开发中推出了React Native解决方案，可惜这个方案因为原生编译的难度，目前仍然没有完全适应生产要求。在移动端直接使用React库需要配合其他UI组件库，例如Framework7。如果是单页应用场景，React还是有性能上的优势，但是工程维护比较困难，对项目成员对react熟悉程度有一定要求。

Angular2新版更替后在性能上有比较大的提升，移动Web开发方面也有Ionic这种老牌框架，上手还是颇为简单的，唯一需要适应的是新版的Angular语法，对老版用户可能不太友好，但如果是新人入门还是很推荐的。

也有使用其他JS框架来构建移动WebAPP的，比如使用Backbone或纯粹使用Jquery，仍然是想要性能方面匹敌原生应用的不二法门，但是相较之下仍然对工程维护要求较高。特别是2017年三大JS框架在性能和体积上都有不小的提升，配合各个互联网公司不断涌现的开源UI库，应付日常移动WebAPP的场景应该是绰绰有余了。

组件库ui-kit

移动端UI组件库大都比较类似，特色在于某些组件的特殊交互，比如日期选择、联动地区选择。下面是目前国内比较火的组件库。

Framework7

实现统一IOS样式或Material Design样式，适合配合React或Vue，5星推荐，项目地址： http://framework7.taobao.org/

• sui  淘宝扩展，完全不活跃，2星推荐，项目地址： http://m.sui.taobao.org/

WeUI

微信官方网页样式，堪称移动端的Bootstrap，适合简单的App应用，5星推荐，项目地址： Tencent/weui ， Tencent/weui.js

• react-weui 官方配合React库版本，3星推荐， 项目地址： weui/react-weui
• VueX  配合Vue库版本，4星推荐，项目地址： https://vux.li/
• jquery-weui  扩展版本，3星推荐，项目地址： lihongxun945/jquery-weui

Ionic

新版基于Angular5框架，同时支持Native开发，功能全面，5星推荐，项目地址： http://ionicframework.com/docs/

Vue

各个互联网公司基于vue开源了一系列组件库

• vuetifyjs，Material Design样式，4星推荐，项目地址： https://vuetifyjs.com/
• lavas，百度出品的pwa应用框架，4星推荐，项目地址：  https://lavas.baidu.com/
• Weex  阿里推出的类似React Native方案，需要UI设计来支持，3星推荐，项目地址： http://weex.apache.org/guide/
• cube-ui 滴滴组件库 ，3星推荐，项目地址： https://didi.github.io/cube-ui/#/zh-CN
• mint-ui 饿了么组件库，3星推荐，项目地址：  https://github.com/ElemeFE/mint-ui

omijs

腾讯AlloyTeam出品，react类似方案，2星推荐，项目地址： http://omijs.org

Frozen UI

qq会员前端出品，不够活跃，2星推荐，项目地址： http://frozenui.github.io/

wex5

国人出品，实现了不少模仿样式，2星推荐，项目地址： http://www.wex5.com/downloads/

示例

微信页面开发、html5页面、webapp、pwa

1. 饿了么，vue开发pwa https://h5.ele.me/msite/
2. 铁友订票，http://m.tieyou.com/#index