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

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

Ionic

React（For React Native）

React Native

Weex

原生iOS

原生Android

PWA

Xamarin

微信公众号

微信小程序

公司

Google+Apache

Facebook

Facebook

Ali(https://weex.apache.org/)

Apple

Google

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. 用户习惯需要培养

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要求不高的场景

只适合开发微信公众号，推广个人或企业品牌

只适合开发微信小程序，适合轻应用