app开发技术方案对比

app开发主要有几种技术方案如下：

原生开发

原生开发简介

原生(native)开发从定义上来说 一般是指用原生开发语言开发，原生开发语言就是开发整个系统时使用的编程语言。

对于iOS来说就是Objective C，对于Android来说…不太好说，因为Android用的Linux内核是用C开发的，中间层的库是用C/C++开发的，但应用程序框架和应用程序都是用Java开发的。

但实际上原生开发的含义有所扩展，主要区别于前端框架的跨端语言开发。

目前做ios原生开发多使用Swift语言，Swift，苹果于2014年WWDC苹果开发者大会发布的新开发语言，可与Objective-C共同运行于macOS和iOS平台，用于搭建基于苹果平台的应用程序。

目前做Android原生开发一般用java, 也可以用新语言kotlin

除此之外，安卓APP还有很多其他开发语言，例如：
Scala，基于JVM的语言，已经比较成熟的用于安卓开发
C/C++，通过JNI实现原生调用，比较方便实现核心模块跨平台
移植方案，如：Python等
跨平台开发方案，如：JavaScript、HTML5等
注：在2017 Google I/O大会的主旨演讲中，宣布Kotlin语言将在安卓上正式受到官方支持。

原生开发学习路线

安卓官方推荐的Java、Kotlin、C/C++
iOS官方推荐Objective-C、Swift、C/C++

C/C++是通用的，如调用特别库时
Java开发安卓，Objective-C开发IOS
Kotlin、Swift属于新的快速开发语言。
所以主要学习 Java，Kotlin，Objective-C，Swift，C/C++（底层调用）

另外可以开发app后台服务端，可以使用java，java的后台框架丰富。

重点学java，Objective-C这两门语言.

如果要web html5集成，可以再学个js语言

原生开发优点

语言方面最贴近官方的解决方案，流畅性和兼容性上要好一些

原生开发缺点

学习成本大，安卓和ios需要分开学习开发，同一个功能需要实现两遍。

Flutter

Flutter简介

flutter是Google为Fuchsia操作系统设计的应用开发方式。

Fuchsia OS要兼容廉价物联网设备，要求对硬件的消耗降低，并且为了避免与oracle的java打官司，Fuchsia 使用了dart语言+flutter界面库的方式。

从设计上来看，这套方案的性能确实够高。dart虽然属于大前端范畴，但dart是和java一样的强类型语言，这让dart虚拟机可以做很多优化，性能方面超出了js。

dart曾经与typescript竞争，谁才是更好的js？但不幸输给了typescript，chrome也放弃了内置dart虚拟机的计划。

不过dart团队没有解散，几年后，他们借助flutter，再次出现在公众面前。

flutter作为界面库（注意它只是界面库，dart语言是另一个项目），它唯一要干的事情就是渲染界面。不像HTML5，flutter界面库连视频、定位等都没有，就是一个纯排版引擎，绘制文字、按钮、图片等常用界面控件。

这个排版引擎的特点是简单、高性能。

flutter的优点

性能好一丢丢。比rn有优势，但比拥有bindingx的weex/uni-app，在实际开发中没有很明显的差距。

flutter的缺点

1、需要原生协作，维护3套代码，无法有效降低开发成本，提升开发效率
2、嵌套地狱，代码难看难维护
3、不支持热更新
4、目前质量和成熟度很低，github上的issue有5k+，很容易掉坑里
5、原生可视控件融合不好，比如webview、video、map
6、ui库不适合国情
7、学习成本高
8、dart未来扑朔迷离

RN–react native

rn简介

React Native是Facebook在F8大会开源的JavaScript框架,(2015年9月15日发布)可以让广大开发者使用JavaScript和React开发跨平台的移动应用. 其核心设计理念：

既拥有Native的用户体验、又保留React的开发效率, 目前，React Native基本完成了对多端的支持，实现了真正意义上的面向配置开发:

开发者可以灵活的使用HTML和CSS布局,使用React语法构建组件, 实现：Android, iOS 两端代码的复用,核心设计理念: 既拥有Native的用户体验,又保留React的开发效率.

github地址：https://github.com/facebook/react-native/

rn的优点：

1、rn的坑虽然比weex的少，但uni-app已经填了weex的很多坑。这方面差别不大。

2、rn的生态虽然比weex丰富。但uni-app是反过来的，uni-app的国内应用生态丰富度超过了rn。

3、rn的app冷启动比uni-app快。这个问题uni-app已经改进完毕。

4、rn是纯单页的，嵌入原生App比较灵活。而uni-app是应用整体的概念，如果要内嵌入其他原生应用的话，要求原生应用内嵌uni-app应用整体进来

rn的缺点：

1、需要原生协作，维护3套代码，无法有效降低开发成本，提升开发效率

2、不支持小程序，发布到h5也无法直接发

3、ui库不适合国情

4、学习成本高，用人成本高，不利于开发商降低开发成本

5、rn是纯单页应用，如果一个应用的页面很多，用rn写会很崩溃，变量污染和干扰严重。而weex/uni-app支持多页面，页面之间上下文隔离，写页面较多的大型应用更合适

6、另外react在中国的市场占有率远不如vue。这也是中国与国外不同的特色情况。

结论

首先需要说明 讨论哪个语言是世界上最好的很难得到结论，每个语言和框架都有自己的粉丝和拥护者。

我们尽量从客观的角度来分析，基于 兼顾越多元素的框架，通信层面消耗越多的原则：

兼容性和性能层面：
原生 > flutter > rn > uniapp

尤其需要注意的是 uniapp有些层面的功能实现受到了限制，需要通过较复杂的插件才能实现跟 原生一样的功能。
而且 坑会比较多，相关资料以及解决方案会比原生少一些。

使用uniapp尽量用基础的、简单的Vue语法实现功能，尽量用官方推荐的、现有的组件实现业务，开发时多妥协，不要吹毛求疵，谨慎封装自定义组件。

如果你的应用以展示静态数据为主，那么在注意第1点的前提下用uniapp还是比较推荐的，真的能节约不少成本，可能局部需要注意一下长列表的优化。但是如果你的应用数据更新频繁，交互较为复杂，页面节点较多，做H5和小程序还是可以的，但是做APP请三思。

基于 跨平台功能实现和维护，代码套数越多，越复杂的原则：

使用的方便和维护层面：
uniapp > rn > flutter > 原生

如果是从个人的职场来考虑，肯定所有的语言和框架都掌握是最好的，从原生开发到前端语言跨端开发flutter，rn，uniapp，以及小程序wx等。

从企业层面，如果公司层面体量比较大，专人专职，那么肯定是走 靠近原生的 能够得到比较好的 兼容性和性能以及稳定性，出现什么问题和场景都有官方一起想解决方案。

而对于小型或者 初创型企业，尤其开发资源不充足的情况下，一套通用的框架 同时能实现 多端的功能 又显得很重要。

因此我们 这里 选择uniapp作为切入点，后续进行 app开发和小程序，官网开发等 初创型企业必备的 应用开发讲解。

主要基于以下理由：

uniapp–跨端能力更强

Airbnb曾是React Native 框架的倡导者和开发者代表。但他们于2019年正式发公告，弃用了react native。

原因是什么？

很简单，react native并不能提升Airbnb的开发效率，反而降低了他们的效率。

“本来我们可以只维护Android和iOS两套代码，但现在我们要维护三套（指多了一套react native的js代码），这让我们很疲惫” – aribnb

开发者选用跨平台开发引擎，本来是为了提高效率、降低成本。Airbnb正是在实践了几年后，发现rn根本无法实现他选用跨平台引擎的初衷时，无奈放弃了rn，用原生开发重写。

要想真的提升开发效率，降低开发成本，那么跨平台开发引擎，需要提供一个完整的应用开发平台，包含所有常用的应用开发能力的跨平台。在不常用的部分，提供插件市场以及免原生介入的插件使用方式。

在react native、flutter的社区，也有不少三方提供的原生插件，但是连Airbnb这样的国外开发者对此都不满意。更何况对于很多中国开发者常用的场景，其对应的插件的质量、跨端性都难以商用。

更麻烦的是如果你不会原生开发，就没法把这些插件与你的前端代码集成起来。

uni-app，它的设计目标不是跨平台排版引擎，而是跨平台应用开发引擎。

所以uni-app的排版部分，可以选择小程序强化webview引擎和weex引擎，可根据自己的需求切换。而能力层面，uni-app提供了htmlplus API、Native.js、插件市场，解决了原生能力js化的问题。

uni-app让开发者真的不用懂原生开发就能做出完整的跨平台应用。遇到极个别的需求，开发者也可以去插件市场找人订做一个原生插件，自己仍然使用js来集成，仍然可以云端直接打包。

uniapp–技术学习成本和难度更低

rn，要求开发者学习react，要求精通flex布局，要求原生开发协作。

flutter，要求开发者学习dart，了解dart和flutter的API、要求精通flex布局，要求原生开发协作。

weex已经内嵌到uni-app中，就不单独提了。

uni-app，要求开发者学习vue，了解小程序。

很明显uni-app的学习成本太低了，它没有附加专有技术，全部使用公共技术。

学习成本和难度，直接意味着：开发成本、招聘成本、上线速度、上线风险。

另外，dart究竟值不值得学，是一个大问题。

Google的天才工程师也发明了go语言，它确实有很多理论优势，但实际上市场的主流，仍然是c和c++。

语言的生态–uniapp更适合国内

任何开发引擎，都离不开生态。

对于国外的开发者，rn、flutter的生态肯定比uni-app好，比如facebook登陆分享、Google地图等。

但对于国内的开发者，那是反过来的，中国开发者需要的全端推送（UniPush集成了iOS、华为、小米、OPPO等众多原厂推送）、各种国内登陆、支付、分享SDK、各种国内地图、各种ui库、以及Echart图表等，都是在uni-app体系里，这方面生态可比rn、flutter丰富多了。

其他端的跨端性–uni-app更兼容h5端和小程序

flutter和rn，都是支持web技术的。但都是仅限于普通界面排版，涉及定位、摄像头、相册什么的，是要单独写代码的。

另外flutter的H5版，嗯，作为中国开发者，你不会想要一个如此浓郁的Material风格的H5版的。。。

更何况这个Material ui库大的很，编译出来的H5版要十几M的体积。

uni-app的H5端是包含完善的能力引擎的，丰富能力都可以直接跨端使用，风格也是跨端风格。uni-app的H5引擎体积只有1百K，gzip后只剩下30k（不含vue、vue rooter），比其他工具的引擎体积要小的多。

另外，中国离不开小程序，rn、flutter官方都不会支持小程序，由于架构差异太大，国内三方也做不到把rn代码良好的编译为小程序代码。uni-app则可以一套代码，同时编译为iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序、QQ小程序。

uniapp简介

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

即使不跨端，uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验，可快速上手uni-app

为什么要去学习uni-app？

相对开发者来说，减少了学习成本，因为只学会uni-app之后，即可开发出iOS、Android、H5、以及各种小程序的应用，不需要再去学习开发其他应用的框架，相对公司而言，也大大减少了开发成本。

uniapp官网

uniapp与vue的关系

很多同学都有疑惑，因为uniapp是基于vue js开发的，学习uniapp到底需不需要先学习vue。

首先有vue的基础肯定更好，在开发过程中遇到问题也能够更好的理解和解决。

但是 如果 没有vue的基础，也可以直接 学习uniapp，因为它们的语法 相似但不 完全相同，详见下节uniapp与vue的区别。

如果 需要紧急使用uniapp进行项目开发，可以直接学习uniapp官方文档进行使用开发。

如果 期望 系统的学习 ，可以先 学习下 vue的基础和语法，组件等知识，再开始学习uniapp，这样后续遇到问题解决问题可以 事半功倍。

uniapp与vue的区别

标签区别

uni使用小程序的标签，vue使用web端的标签

标签名变化的：

标签描述\类别	vue	uniapp
文本	span\font	text
链接	a	navigator/ router-link
图片	img	image
输入框	input	input[type=[confirmtype]]
多选	select	picker
外部框架	iframe	web-view
列表	ul、li	view

标签名未变的：

form, button,checkbox,label,textarea,video

不推荐使用的：

不内置audio标签，改成api方式由外部引入。

老的html标签是可以使用的，但为了兼容性，不做考虑。

新增手机端常用组件

scroll-view:可区域性公董视图容器
swiper:可滑动区域视图容器
icon图标
rich-text：富文本
progress:进度条
slider:滑块指示器
switch:开关选择器
progress:进度条
camera:照相机
map:地图
cover-view:可覆盖原生组件的视图容器。 cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件
更多组件相关请查看官网-基础组件

js api的区别

uniapp的js api是参考小程序的，因而与浏览器端的js api有所不同

标签描述\类别	原生js	uniapp
弹框	alert,confirm	uni.showmodel
发送网络请求	ajax axios	uni.request
存储	local.storage	uni.storage

cookie、session 在uni不被支持

在不同客户端，支持条件编译，可以无限制使用各端独有的api，如果有小程序基础，可以直接将
wx.*
改为 uni.*，请见这里

3.路由：
uni不支持vue-router,使用自带的路由。

当然 uniapp随着版本的更新，也会做一些关于vue语法的兼容，例如：

uni-app 1.8发布，微信端性能翻倍，并增加若干 Vue 语法支持

为提升开发体验，新版本增加了部分 Vue 语法，其实这些语法在微信小程序中本身是不支持的；为支持这些语法，uni-app 会在编译、运行时分别做一些额外的工作，若开发者希望追求性能极致，则建议尽量少用或者不用新增语法。

更多区别 详见官网api文档

uniapp学习路线

基础部分：

• 环境搭建
• 页面外观配置
• 数据绑定
• uni-app的生命周期
• 组件的使用
• uni-app中样式学习
• 在uni-app中使用字体图标和开启scss
• 条件注释跨端兼容
• uni中的事件
• 导航跳转
• 组件创建和通讯，及组件的生命周期
• uni-app中使用uni-ui库
• uni-app运行在unicloud上
• 增加运营服务
• vue学习
• nvue学习

关于各端的管理规则需要耐心学习
uni-app并不难学，但我们注意到很多新人在适应各个平台的规则限制时比较急躁。

每个端，有每个端的管理规则，这不是uni-app在技术层面上可以抹平的：

比如H5端的浏览器有跨域限制；
比如微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；
比如App端，iOS对隐私控制和虚拟支付控制非常严格；
比如App端，Android、国产rom各种兼容性差异，尤其是因为谷歌服务被墙，导致的push、定位等开发混乱的坑；
如果你的App要使用三方sdk，比如定位、地图、支付、推送…还要遵循他们的规则和限制；
遇事耐心，不急不躁，虽然这不是成功的唯一要素，但它是你技术路上长远走下去的基础。

更多学习资料 参考官网—如何学习uniapp

参考文章

https://www.cnblogs.com/hjk1124/p/12818286.html

https://blog.csdn.net/aaaaaaliang/article/details/100121493

https://blog.csdn.net/wuchuanpingstone/article/details/104936575/

https://zhuanlan.zhihu.com/p/62950364

https://www.zhihu.com/question/309490398/answer/1115413613

https://www.zhihu.com/question/309490398/answer/1115413613

https://www.jianshu.com/p/7125360f3d2a

https://zhuanlan.zhihu.com/p/87685252