几种混合模式移动应用开发框架的对比

一、Vonic

1、vonic 是什么？

vonic 是一个基于 vue.js和 ionic 样式的UI 组件框架，简约漂亮、体验接近原生 App ，主要用于快速构建移动端单页应用，也就是用我们熟悉的 html+css，javascript 来开发App。

2、和 ionic 的关系

在样式方面，在 ionic 的 css 文件的基础上做了一些调整

3、推荐 vonic 的理由

整个 UI 框架基于 Vue.js、vue-router 和 axios.js，符合国内主流开发者的技术选型UI 视觉设计和体验上直逼原生组件，几乎看不出和原生应用的区别官网文档写得非常详细，在 Github 上star高达3.4k，样式简单好看，组件比较全面。

4、依赖

vonic 依赖以下几个库，在创建 vonic 项目之前，请确保引入它们。

• vue.js
• vue-router.js
• axios.js (vue.js 官方推荐的 ajax 方案)

二、Ionic

Ionic提供了一个免费且开源的移动优化HTML，CSS和JS组件库，来构建高交互性应用。基于Sass构建和Angular优化。

即将发布的Ionic4是一次重大的升级，它第一次实现了与框架无关，不再必须使用Angular，你可以使用Vue，React，JQuery或者干脆不使用任何框架来进行Ionic开发，这一切都是因为可以使用Stencil来构建标准web components

三、MUI

1、MUI介绍

MUI 是最接近原生APP体验的高性能前端框架，MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

2、特点

不依赖于任何框架，有很多原生APP的组件，适合开发APP，单独做移动端的网页的话比较麻烦，比较适合做APP混合开发

原生UI：鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件。

有配套的开发工具HBuilder,提供完善的代码提示以及打包流程的简化，同时也提供相应的DEMO，对于入门来说，应该算是非常人性化和简单的。

缺点

官方文档优点过于简陋，对于JS部分的文档偏少，如有需要进行定制或者修改的话，不方便。对框架的实现原理和代码缺少解释性的文档，不便于定制化开发和排查问题。

对vue的支持目前还存在问题，当用vue对数据进行渲染后，mui的组件很多时候都无法做出合适的响应，比如无法下拉之类的问题。

对于三方的SDK的支持不够完善。目前对于地图的支持并不好。

四、uni-app

uni-app是一套可以适用多端的开源框架，是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uni-app对前端开发人员比较友好，学习成本比较低，因为uni-app是基于vue.js。并且它的封装的组件和微信小程序的组件一样，所以对于现在的主流前端人员来说学习成本几乎为0。

uni-app使用HbuildX进行开发。使用HBuilderX进行开发可以说是速度杠杠的。开发速度比较快，ps：我是一个webstom党（vue很上手），但是对于开发纯静态页这种会用HBuilderX，个人觉得很不错无论是环境还是提示效果都很丰富。

缺点

很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。

uni-app问世时间比较短，有很多地方还不是完善。

快应用仅支持 vivo 、oppo、华为

五、React Native

React Native是Facebook 开源的跨平台移动应用开发框架，使用JavaScript编写原生移动应用，通过声明式的组件机制来搭建丰富多彩的用户界面。React Native 经过 3 年多的发展，已经比较成熟，虽然至今没有发布 1.0 版本，但其社区很活跃

React Native所使用的基础UI组件和原生应用完全一致。 基础组件使用JavaScript和React的方式组合起来。

六、Weex

Weex 集成了 WeexSDK 之后，可以使用 JavaScript 和现代流行的前端框架来开发移动应用，使用同一套代码来构建 Android、iOS 和 Web 应用。目前主要支持 Vue.js和 Rax这两个前端框架。起步比较晚，社区没有 React Native 活跃，资料和开源项目也相对较少。

开发者可以根据不同需求和场景选择适合的框架进行开发。