进入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组件库大都比较类似，特色在于某些组件的特殊交互，比如日期选择、联动地区选择，正所谓：“移动端组件库写的好不好，就看 Picker 组件写的好不好”。下面是目前国内比较火的组件库，推荐星级1~5星，3星以下不推荐使用。

Framework7

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

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

WeUI

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

• VueX  配合Vue库版本且扩展组件功能，新建项目也很方便，5星推荐，如果使用Vue方案请直接使用这个库，项目地址：https://vux.li/
• react-weui 官方配合React库版本，3星推荐， 项目地址：weui/react-weui
• jquery-weui  扩展版本，想法思路很好但实现一般，3星推荐，项目地址：lihongxun945/jquery-weui
• wepayui  微信官方支付相关扩展版本，3星推荐，项目地址：wepayui/wepayui

Ant Design Mobile

支付宝出品，基于react方案，Picker组件交互设计非常好，5星推荐，项目地址：https://github.com/ant-design/ant-design-mobile

Ionic

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

Vue

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

• lavas，百度出品的pwa应用框架，需要配合UI组件库，3星推荐，项目地址： https://lavas.baidu.com/
• Weex  阿里推出的类似React Native方案，需要配合UI组件库，3星推荐，项目地址：http://weex.apache.org/guide/
• vuetifyjs，Material Design样式，3星推荐，项目地址：https://vuetifyjs.com/
• cube-ui 滴滴组件库 ，脚手架新建项目很方便，但缺少常用CSS组件是一个大败笔（可以从项目Example中扣出来部分），3星推荐，项目地址：https://didi.github.io/cube-ui/#/zh-CN
• mint-ui 饿了么组件库，使用vue脚手架新建项目，但日期选择表现不够方便，4星推荐，项目地址： https://github.com/ElemeFE/mint-ui
• Vant 有赞移动组件库，3星推荐，项目地址：https://www.youzanyun.com/zanui/vant#/zh-CN/intro

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

附录：开发相关工具

NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……前端不断蹦出的名词让你一时间感到手足无措，好像根本学不完。其实工具的两大核心功能，就是“安装vs做事”。

安装类的工具（包管理）：npm、Bower、yarn，目前npm比较流行，yarn也在快速抢夺地盘，bower逐渐退出舞台。

做事类的工具（自动化打包）：Grunt、Require.js、Gulp、Webpack，目前流行用npm的简单脚本功能进行调用，使用nodejs功能配合Webpack进行自动化打包操作，Grunt已经死，Gulp逐渐退出舞台。

chao

微信支付

支付宝