平台定位:PC网站、H5网站、微信公众号、微信小程序、iOS APP、Android APP; | ||||||||||||
Ionic | React(For React Native) | React Native | Weex | 原生iOS | 原生Android | PWA | Xamarin | 微信公众号 | 微信小程序 | |||
公司 | Google+Apache | Ali(https://weex.apache.org/) | Apple | Google(https://developers.google.com/web/progressive-web-apps/ ) | Microsoft(https://www.xamarin.com/) | 腾讯 | 腾讯 | |||||
核心技术 | ionic+angular+cordova+html+css | react+redux+html+css+jsx | react+redux+react native+html+css+jsx | Vue.js+Rax+Vuex+Vue-router | Objective-C/Swift | Java/Kotlin+Android | Javascript+service worker+app shell+offline+native api | C#+.Net Core+Razor | angular/react/vue/js均可,需要申请公众号 | angular/react/vue/js均可 | ||
广告语 | write once,run anywhere | learn once,write anywhere | learn once,write anywhere | A framework for building Mobile cross-platform Uis | learn,write,run each once(custom) | learn,write,run each once(custom) | Escaping the Tab: Progressive, Not Hybrid | - | 再小的个体,也有自己的品牌 | |||
跨平台支持力度 | 支持度高 | 支持度较高 | 支持度中等 | 支持度高 | 不支持 | 支持 | 支持 | 支持度高 | 支持 | 支持 | ||
跨平台支持方式 | 封装cordova plugin(自定义+开源) | 依赖其他框架 | 涉及原生需针对不同平台编写不同的代码,混合式 | WeexSDK负责解析Week bundle, 并发送到native端做一系列操作 | 针对不同平台编写不同的原生代码,独立 | 针对不同平台编写不同的原生代码,独立 | 原生web+增强型功能 | .net+MCW+ACW+Apple Compiler | 能运行微信之处 | 能运行微信之处 | ||
支持平台 | Web、iOS+Android APP、微信公众号、微信小程序 | Web、微信公众号、微信小程序、混合式APP | iOS+Android APP | IOS+Android+Web | iOS APP | Android APP | 浏览器(Web, IOS, Android, 微信..) | IOS,Android,Mac,Windows | iOS+Android+web | iOS+Android+web | ||
学习成本 | 中等 | 一般 | 高 | 中 | 最高 | 最高 | 简单 | 高 | 简单 | 简单 | ||
开发成本 | 低 | 低 | 中等 | 中 | 最高 | 最高 | 低 | 中 | 低 | 低 | ||
布局实现 | 易 | 易 | 易 | 难 | 难 | 难 | 易 | 中 | 易 | 易 | ||
性能 | 较差 | 较好 | 中等,接近原生 | 较好 | 最好 | 最好 | 较好 | 最好 | 一般 | 较好 | ||
同款APP运行时内存消耗(仅供参考) | 100M | 50M | 65M | - | 40M | 45M | - | - | - | - | ||
用户体验 | 一般 | 较好 | 较好 | 较好 | 最好 | 最好 | 较好(需要培养用户习惯) | 最好 | 一般 | 较好 | ||
交互 | 简单 | 一般 | 一般 | 一般 | 复杂 | 复杂 | 较好(需要培养用户习惯) | 最好 | 一般 | 较好 | ||
项目规模 | 中小型 | 均可 | 中小型 | 均可 | 中大型 | 中大型 | 均可(游戏除外) | 中小型 | 中小型 | 中小型 | ||
开发工具 | Visual Studio Code | Visual Studio Code | Visual Studio Code | Visual Studio Code | Xcode | Android Studio | Visual Studio Code… | Xamarin Studio/Xamarin.Forms/Xamarin for Visual Studio | Visual Studio Code+微信web开发者工具 | Visual Studio Code+小程序开发工具 | ||
优点 | 1、代码重合度最高; | 1、简单易学; | 1、代码重合度高; | 1. Vue技术栈首选 | 1、性能和交互体验好; | 1、性能和交互体验好; | 1. 移动端特性(离线/AppShell/消息推送/桌面图标) | 1. .net团队转型首选 | 1、适合建立品牌 | 1、用完即走 | ||
2、开发速度快,难度低; | 2、灵活; | 2、开发速度相当较快,难度适中; | 2. 开发速度快 | 2、适用iOS系统; | 2、适用Android系统; | 2. 渐进式增强 | 2. 开发速度快,复用性高 | 2、文档齐全,开发容易 | 2、文档齐全,开发容易 | |||
3、新手易转入,尤其是做过web开发; | 3、适合多个场景; | 3. 轻量 | 3、资料齐全; | 3、资料齐全; | 3. WebApp的进化方向 | 3、体验更接近原生 | ||||||
4、性能较好; | 4. 性能优于RN | |||||||||||
缺点 | 1、性能一般; | 1、不能一次编写,到处运行; | 1、学习点多; | 1. Dom及部分CSS, Web事件等不支持 | 1、学习知识多; | 1、学习知识多; | 1. 浏览器支持不够完美(Safari)https://caniuse.com/#search=service%20workers | 1. 第三方库资源少 | 1、微信相关,公司访问不了,mac机可以网页版 | 1、微信相关,公司访问不了,mac机可以网页版 | ||
2、内存占用高,APP包比较大; | 2、跨平台支持力度不够; | 2. 模块组件不足 | 2、开发速度慢; | 2、开发速度慢; | 2. 要求HTTPS | 2. 需要了解较多Native知识 | 2、体验一般 | 2、需要学习小程序开发知识 | ||||
3、自定义插件难; | 3、发展速度快,资料不够齐全; | 3. 用户习惯需要培养 | 3、需要学习公众号开发知识 | |||||||||
4、不适合UI超频繁更新的场景,如复杂的动画等; | ||||||||||||
案例 | WOW项目 | 街电(网站和管理系统) | Eufylife(应用市场可下载) | 阿里双11主会场 | AnkerBox(App Store) | AnkerBox(Google Play) | FlipKart Lite、饿了么 | 街电公众号(可关注) | 街电小程序(可搜索) | |||
相关资料 | https://ionicframework.com/https://github.com/ionic-team/ionichttps://github.com/Alexintosh/Awesome-Ionic | https://reactjs.org/https://github.com/facebook/reacthttps://github.com/enaqx/awesome-react | https://facebook.github.io/react-native/https://github.com/jondot/awesome-react-native | https://weex.apache.org/https://github.com/joggerplus/awesome-weex | https://developer.apple.com/ios/http://www.cocoachina.com/https://github.com/vsouza/awesome-ios | https://www.android.com/https://github.com/wasabeef/awesome-android-uihttps://www.oschina.net/android | https://developers.google.com/web/progressive-web-apps/https://github.com/hemanth/awesome-pwa | https://www.xamarin.com/https://github.com/benoitjadinon/awesome-xamarinhttps://www.visualstudio.com/zh-hans/xamarin/?rr=https%3A%2F%2Fcn.bing.com%2F | https://github.com/justjavac/awesome-wechat-weapphttps://github.com/opendigg/awesome-github-wechat-weapp | |||
结论 | 适合跨平台中小项目,如PC Web、Mobile Web、Mobile APP(iOS、Android)等,一套代码实现多个平台功能 | 适合前端各个场景,依赖其他技术或者框架 | 适合跨移动端中小项目,如iOS APP、Android APP,专注APP | 较新的一个跨平台解决方案,支持Vue.js和Rax,性能是其最大的优势 | 适合大型或者复杂交互体验iOS APP | 适合大型或者复杂交互体验Android APP | 适合纯Web团队及部分Native功能要求不多的项目(https://whatwebcando.today/) | 适合中小型项目,对于UI要求不高的场景 | 只适合开发微信公众号,推广个人或企业品牌 | 只适合开发微信小程序,适合轻应用 |
文章来源: 前端流行框架技术选型大纲-PC端、移动端、微信端