新人学习手机App开发，一开始总要选择一条学习路径。
如果你熟悉Java语言，可以学习安卓开发；如果熟悉脚本语言（比如Python或Ruby），可以学习Swift语言，进行iOS开发；如果像我一样，比较熟悉Web网页技术，那么H5开发是最容易上手的。
手机App的技术栈可以分成三类。
（1）原生App技术栈（nativetechnologystack）
原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的Java技术栈，iOS平台的Object-C技术栈或Swift技术栈。
这种技术栈只能用在一个平台，不能跨平台。
（2）混合App技术栈（hybridtechnologystack）
混合技术栈指的是开发混合App的技术，也就是把Web网页放到特定的容器中，然后再打包成各个平台的原生App。所以，混合技术栈其实是Web技术栈+容器技术栈，典型代表是PhoneGap、Cordova、Ionic等框架。
如果已经掌握了Web技术，这个技术栈就主要学习容器提供的APIBridge，网页通过它们去调用底层硬件的API。
（3）跨平台App技术栈（cross-platformtechnologystack）
跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用Web技术，即它的页面不是HTML5页面，而是使用自己的语法写的UI层，然后编译成各平台的原生App。
这个技术栈就是纯粹的容器技术栈，ReactNative、Xamarin、Flutter都属于这一类。学习时，除了学习容器的APIBridge，还要学习容器提供的UI层，即怎么写页面。
（4）小结
H5开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如ReactNative），因为它们的UI层借鉴了Web模型。
另外，混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。
下面就依次介绍上面三类技术栈，每个技术栈都会给出一个最简单的例子：加载网页。通过各种技术栈加载网页的不同做法，帮助大家理解它们的特点，对App的技术实现有一个总体的认识。
讲解具体的技术栈之前，大家需要知道，不管什么技术，最终在App里面显示网页，一定需要一个网页引擎，这样才能解析网页。
通常情况下，App内部会使用WebView控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上WebView，就好像内嵌了浏览器窗口，可以显示网页。
不同的App技术栈要显示网页，区别仅仅在于怎么处理WebView这个原生控件。
注意，不同系统的WebView控件名称不一样，安卓系统就叫WebView，iOS系统有较老的UIWebView，也有较新的WKWebView，作用都是一样的，差异在于功能的强弱。
原生技术栈分成iOS和安卓两个平台。
简单说，iOS的原生技术栈就是使用Object-C语言或Swift语言，在Xcode开发环境中编程。安卓的原生技术栈，则是使用Java语言或Kotlin语言，开发环境是AndroidStudio。
下面就来看看，它们怎么加载网页。
iOS开发需要安装Xcode。它是一种集成开发环境（IDE），也是苹果公司指定的iOS官方开发工具，所有苹果手机的App都由它打包生成。
它可以在Mac电脑上通过应用商店免费安装。注意，Xcode只支持Mac系统，不支持其他系统。
安装完成后，打开新建一个项目，类型是单视图App，然后系统会询问一些项目参数和储存位置，这里就不详细说明了。
然后，就进入了开发环境。
上面代码的意思是，启动App加载视图的时候（loadView()），新建一个WebView控件的实例。视图加载成功后（viewDidLoad()），WebView再去加载外部网页（红框部分）。
然后，就可以查看代码运行结果。点击工具栏的运行按钮，Xcode就会弹出一个iPhone模拟器，里面就是当前代码的运行结果。
如果一切正常，就可以让Xcode对源码打包，生成App的二进制安装文件。
安装完成后，打开新建一个项目，类型是"EmptyActivity"。
AndroidStudio会询问项目参数，包括项目名称、开发语言（Java）等，然后就进入了开发环境。因为它是基于JavaIDE修改的，懂Java的朋友应该对这个界面比较熟悉。
上面红框处的代码，就是在页面上添加并设置WebView实例，指定生成视图的时候（onCreate()），WebView实例去加载外部网页。
运行代码之前，AndroidStudio要求必须连接真机，或安装安卓模拟器。完成以后后，在工具栏上点击运行按钮，就可以运行代码查看效果了。
如果一切正常，就可以让AndroidStudio打包，生成App的二进制安装文件。
上面的原生技术栈需要自己新建WebView实例，相比之下，混合技术栈就简单多了。因为页面就是网页，所以容器已经设置好了WebView，开发者直接写页面即可。
PhoneGap和Cordova现在是两个独立发展的开源项目，但是彼此有密切的关系，可以简单理解成Cordova是PhoneGap的内核，PhoneGap是Cordova的发行版。
所有这些框架的共同点，都是使用Web技术（HTML5+CSS+JavaScript）开发页面，再由框架分别打包成iOS和安卓的App安装包。它们的优点是开发简单、周期短、成本低，缺点是功能和性能都很有限。
基于Cordova的框架，用法都大同小异，下面就以Ionic为例，演示如何加载外部网页。
$npminstall-gionic@latest$ionicstartmyAppblank--type=react$cdmyApp接着打开src/pages/Home.tsx文件，插入iframe标签即可。
上面代码中，由于页面本身就是网页，所以可以直接用iframe标签插入外部网页。
然后，在本机起一个Web服务，看看Demo的效果。
$ionicserve上面命令会自动打开浏览器窗口，访问本机的8100端口，在浏览器中显示网页效果。
上面的混合技术栈使用HTML语言编写页面，再用WebView控件加载页面，所以只写一次页面，就能支持多个平台。跨平台技术栈也能做到多平台支持，但是原理完全不同。
跨平台技术栈的框架，都是使用自己的语法编写页面，不使用Web技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生App。这样就完全解决了Web页面性能不佳的问题。下面介绍三个这样的框架。
（1）原理
2013年，Facebook公司发布了React框架。这个框架是为网页开发设计的，核心思想是在网页之上，建立一个UI的抽象层，所有数据操作都在这个抽象层完成（即在内存里面完成），然后再渲染成网页的DOM结构，这样就提升了性能。
很快，工程师们就意识到了，UI抽象层本质上是一种数据结构，与底层设备无关，不仅可以渲染成网页，也可以渲染成手机的原生页面。这样的话，只要写一次React页面，就能分别编译成iOS和安卓的原生App。这就是ReactNative项目的由来。
（2）实例
然后，在命令行安装脚手架工具expo-cli，新建一个示意项目。
$npminstall-gexpo-cli$expoinitrnDemo
新建项目时，会要求你选择项目模板，可以选minimum模板。然后，还会要求你填写项目描述displayName，这个可以随便写。
然后，安装ReactNative自己的WebView控件。
$cdrnDemo$npminstall--savereact-native-webview
接着，打开主页面的脚本文件App.js，将其改成下面的代码。
上面代码中，ReactNative自身的WebView控件，编译时会分别转为iOS和安卓的原生WebView控件。
接下来，预览页面效果。可以先把它编译成Web版，在浏览器预览，这样比较快，立刻就能看到效果。
$npmrunweb
运行上面的命令，命令行会出现一个二维码。
这时可以打开手机端的Expo客户端，扫描这个二维码，就会显示App的页面。注意，计算机和手机必须在同一个局域网。
（3）ReactNative的问题
ReactNative的想法虽然很美好，但是实际开发中出现了各种各样的问题。
最主要的一个问题是，UI抽象层翻译出来的iOS和安卓原生页面，做不到完全一致，尤其是复杂页面，样式或功能存在差异。编译出来两个平台的原生App往往是一个正常，另一个会出现各种奇怪的小毛病。ReactNative的底层还是没有做到无缝适配，它至今没有发布1.0版（2019年底是0.61版），这多多少少也说明了一些问题。
Xamarin是微软公司的跨平台App开发框架，原理跟ReactNative很相似，只不过它的语言是C#。
上面代码中，首先新建了一个WebView控件的实例，然后把这个实例放到布局上，跟原生App的语法很像。
它自己实现了一套控件。打包的时候，会把这套控件打包进每一个App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到iOS和安卓体验完全一致。
上面代码使用的是Dart语言。它是Flutter的官方语言，接近JavaScript语法，但是多了静态类型支持。
通过上面的介绍，希望大家已经了解了各种技术栈的特点。
（1）原生技术栈的技能和体验最好，对于复杂的大型App，如果条件允许，应该采用这种方式开发。
（2）混合技术栈的成本低，灵活性好，对性能要求不高的简单App，尤其是纯展示性的页面，可以采用这种方式开发。
（3）跨平台技术栈适用于，存在外部或内部条件的限制，只有一个团队开发跨平台App的情况。
（正文完）
手机App的UI（用户界面），往往是App成功的关键因素：产品的外观是否漂亮，点击和滑动是否流畅，意图是否清晰，都会影响到用户的留存率。一个好的UI不仅体现了产品经理和开发者的素质，还可以有效降低拉新成本。
一般的开发者接到产品的UI设计方案之后，可能就会去网上找类似的效果，看看有没有开源代码。但是，优秀的开发者会努力思考，如何通过完全自定义来实现这个效果，做到功能和性能的最佳状态。
这就要求开发者具有实现高级UI的开发能力，理解安卓UI的底层实现原理，比如自定义View的渲染流程（onMeasure->onLayout->onDraw），以及交互设计（touch事件）。
怎样才能高效地学习安卓高级UI开发，早日进阶成为高级安卓工程师呢？这里介绍享学课堂的一门课程《高级安卓UI----自定义ViewGroup与UI性能优化》，它带大家一行一行代码去实现一个京东自定义ViewGroup，研究系统的FrameLayout与ViewPager的源码，最后通过阅读源码，分析ViewPager设计过程中的显示问题和性能问题。下图是课程介绍（点击看大图）。
这个课程是直播课程，在线实时答疑，特别邀请了Alvin老师（前三星/小米高级研发经理）主讲，只需要0.1元就能参与。听课之后觉得满意，还可以学习其他Android高级进阶的实战课程。
（完）
DeathGhost说：
使用过IONIC,感觉还不错....最近发现又出来个Flutter
秀妍说：
我用vue写了一个h5的webapp，然后用hbuilder打包成了一个api的文件，可以实现安卓手机安装使用，效果还不错
Kevin说：
阮老师，讲得通俗易懂。我本人也是做H5app开发的，但在性能和页面体验上确实与原生体验差很多，比如在页面加载速度，颜色显示，布局方面，如果是纯展示的app可以用H5，比如论坛，贴吧。如果做电商，业务系统还是推荐原生app
Xu说：
Electron属于哪个技术栈？
sammy说：
阮老师，后续的博文会按混合模式的技术栈更新下去吗？
rockswang说：
引用Xu的发言：Electron属于哪个技术栈？
javascript
Dream4ever说：
引用秀妍的发言：我用vue写了一个h5的webapp，然后用hbuilder打包成了一个api的文件，可以实现安卓手机安装使用，效果还不错
是说打包成了APK吧？
路人说：
uniapp不配拥有姓名
Joker说：
靳广辉,(我更喜欢'干河陈锦'这个名字)说：
或许跟您本人相比，我差了很多的东西，我今天能有机会可以和您通过留言交流是有原因的。
比如我在2019年8月21日进入郑州智游前端培训，在开堂的第一节课，我有幸知晓了“阮一峰”这个名字，或许我的老师介绍了两个“大神”，可我现在只记住了一个。
距离今天2019年12月18日。我的前端或许学的甚不入流，很多知识点都没掌握住。但这不是我想表达的重点。
有关文学的，您所述的很多的文学作品我几乎闻所未闻。我认为我的启蒙文学作品是《平凡的世界》，这本书使我产生了极大的感触，至少在很多个时候使我不能忘记。它被我放在置顶的位置，而我的身边，阅读过它的人甚少，而知晓的人更少。
我或许应该和您交流一些有营养的文字，而不是一味地倾诉。我见到你的第一章照片，引起了我的思考，您的面容大概是我于茫茫人海中相逢而不识的一张面孔，而把您的思想以及成就与您掺连在一起，有会觉得“原来是这么一个人”的感叹于震撼、或者有那么点吃惊。
最后，我不得不结束我和您的交流了。我期待您的回复，或许您觉得我是个有意思的人，那我们可以交流更多（当但，前提是建立在您感兴趣的情况下）。我今年21岁，有很多大胆的想法，我的生活态度大概就是“没有谁的一生尽如其意，但是我依然决定携梦前行。”目前来讲，文学的喜爱大于“学习代码”，或许是因为我没有更好的去了解“代码”而不知其味。期待您的回信，以及提携。
DY说：
引用Kevin的发言：阮老师，讲得通俗易懂。我本人也是做H5app开发的，但在性能和页面体验上确实与原生体验差很多，比如在页面加载速度，颜色显示，布局方面，如果是纯展示的app可以用H5，比如论坛，贴吧。如果做电商，业务系统还是推荐原生app
淘宝是原生的吗用着贼卡。
江云说：
丢火车说：
Alwaysnativetechnologystack
Hsing说：
引用DeathGhost的发言：使用过IONIC,感觉还不错....最近发现又出来个Flutter
貌似国内Flutter刷KPI还挺火的
xiaoqufengdi说：
uniapp/taro算跨平台技术栈吗？
哈哈说：
kbin说：
uniapp呢
tron说：
引用kbin的发言：uniapp呢
国际庄hello范儿说：
AndyRon说：
Swift文件的后缀是`swift`，不是`swifter`。
yinyin说：
我们公司也要弃用ReactNative了，现在在把功能一个个往原生转
jl说：
我觉得概述的很好，目前我是一名学生，基本都看懂了，非常感谢。
春续说：
apk吧？
前端最菜的鸟说：
老师的总结很清楚了，看完有了些学习方向
5.1ReactNative原理部分，掉了个字“这种做法”，即=>既
Cwz.说：
想知道用的是什么字体,看着非常舒服
xulihang说：
用过各种跨平台技术，最后还是选择了B4X。它把B4X语言编译成原生平台的Java和Objective-C，和原生开发的性能和效果是一样的，但只需掌握一套工具