前端流行框架技术选型大纲-PC端、移动端、微信端 - 好文

平台定位：PC网站、H5网站、微信公众号、微信小程序、iOS APP、Android APP；

IonicReact（For React Native）React NativeWeex原生iOS原生AndroidPWAXamarin微信公众号微信小程序

公司Google+ApacheFacebookFacebookAli(https://weex.apache.org/)AppleGoogle
Google(https://developers.google.com/web/progressive-web-apps/ )
Microsoft(https://www.xamarin.com/)腾讯腾讯
核心技术ionic+angular+cordova+html+cssreact+redux+html+css+jsxreact+redux+react
native+html+css+jsxVue.js+Rax+Vuex+Vue-routerObjective-C/Swift
Java/Kotlin+AndroidJavascript+service worker+app shell+offline+native api
C#+.Net Core+Razorangular/react/vue/js均可，需要申请公众号angular/react/vue/js均可
广告语write once，run anywherelearn once，write anywherelearn once，write anywhereA
framework for building Mobile cross-platform Uislearn，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、微信公众号、微信小程序、混合式APPiOS+Android APP
IOS+Android+WebiOS APPAndroid APP浏览器(Web, IOS, Android, 微信..)
IOS,Android,Mac,WindowsiOS+Android+webiOS+Android+web
学习成本中等一般高中最高最高简单高简单简单
开发成本低低中等中最高最高低中低低
布局实现易易易难难难易中易易
性能较差较好中等，接近原生较好最好最好较好最好一般较好
同款APP运行时内存消耗（仅供参考）100M50M65M-40M45M----
用户体验一般较好较好较好最好最好较好(需要培养用户习惯)最好一般较好
交互简单一般一般一般复杂复杂较好(需要培养用户习惯)最好一般较好
项目规模中小型均可中小型均可中大型中大型均可(游戏除外)中小型中小型中小型
开发工具Visual Studio CodeVisual Studio CodeVisual Studio CodeVisual Studio Code
XcodeAndroid StudioVisual Studio Code…Xamarin Studio/Xamarin.Forms/Xamarin for
Visual StudioVisual 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%20workers1. 第三方库资源少
1、微信相关，公司访问不了，mac机可以网页版1、微信相关，公司访问不了，mac机可以网页版
2、内存占用高，APP包比较大；2、跨平台支持力度不够；2. 模块组件不足2、开发速度慢；2、开发速度慢；2. 要求HTTPS2.
需要了解较多Native知识2、体验一般2、需要学习小程序开发知识
3、自定义插件难；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://mp.weixin.qq.com/https://github.com/fritx/awesome-wechat https://developers.weixin.qq.com
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要求不高的场景
只适合开发微信公众号，推广个人或企业品牌只适合开发微信小程序，适合轻应用

热门工具换一换