提高手机App开发技术的技术栈，栈可以分成三类
发表时间：2023-09-08 08:01:39
文章来源：炫佑科技
浏览次数：175
菏泽炫佑科技
提高手机App开发技术的技术栈，栈可以分成三类
学习移动应用开发的新手总是必须在一开始就选择一条学习路径。
如果熟悉Java语言，可以学习开发； 如果你熟悉脚本语言（比如Ruby），可以学习Swift语言进行iOS开发； 如果你和我一样对网页技术比较熟悉，那么H5开发是*容易上手的。
本系列教程的**部分已经介绍了移动应用程序的类型。 所谓的H5页面，其实就是混合App的前端，外面是原生shell，里面是网页。 本文继上一篇文章之后，介绍了移动App开发的技术栈，特别是H5开发相关的技术。
本文由中国*大的在线教育平台之一“腾讯课堂”赞助。 他们现在推出了“腾讯课堂101计划”，推广优质课程资源。 想要学习和提高移动App开发技术的朋友可以关注本文*后的课程信息。
1. 移动应用技术栈
移动应用程序的技术栈可以分为三类。
（1） App技术栈（stack）
原生技术栈是指只能用于特定手机平台的开发技术。 比如平台的Java技术栈、iOS平台的-C技术栈或者Swift技术栈。
这个技术栈只能在一个平台上使用，不能跨平台。
(2) App技术栈(stack)
混合技术栈是指开发混合应用的技术，即将网页放入特定的容器中，然后打包成各个平台的原生应用。 因此，混合技术栈实际上是Web技术栈+容器技术栈，典型代表是、、、Ionic等框架。
如果你掌握了Web技术，这个技术栈主要学习容器提供的API，网页通过它们来调用底层硬件的API。
（3）跨平台App技术栈（cross-stack）
跨平台技术栈是指使用一种技术同时支持多个手机平台。 它与混合技术栈的区别在于，它不使用Web技术，即它的页面不是HTML5页面，而是使用自己的语法编写的UI层，然后编译成各个平台的原生应用程序。
这个技术栈是一个纯容器技术栈，React、React、、都属于这一类。 学习的时候，除了学习容器的API之外，还需要学习容器提供的UI层，即页面如何写。
（四）总结
H5开发主要采用混合技术栈。 不过，跨平台技术栈的一些容器也会被使用（比如React），因为它们的UI层借鉴了Web模型。
另外，混合技术栈和跨平台技术栈的基础是原生技术栈，因为它*终必须编译成原生App。 因此，无论使用哪种技术栈，都需要或多或少地了解一些各个平台的原生技术。
下面将依次介绍以上三类技术栈，每种技术栈都会举一个*简单的例子：加载网页。 通过各种技术栈加载网页的不同方式，帮助大家了解各自的特点，对App的技术实现有一个整体的了解。
2. 控制
在讲解具体的技术栈之前，大家需要知道，无论什么技术，*终在App中显示一个网页都需要一个网页引擎，以便能够解析网页。
通常，App内部使用控件作为网页引擎。 这是系统内置的一个控件，专门用来显示网页的。 只要放置应用程序的界面，就如同嵌入了一个浏览器窗口一样，可以显示网页。
不同的App技术栈都需要显示网页，唯一的区别就是如何处理这个原生控件。
注意，不同系统中的控件名称是不同的。 系统就叫它。 iOS系统有旧的和新的。 功能是一样的。 区别在于功能的强弱。
3. 原生技术栈
原生技术栈分为两个平台：iOS和。
简单来说，iOS的原生技术栈就是在Xcode开发环境中使用-C语言或者Swift语言进行编程。 原生技术栈采用Java语言或Java语言，开发环境为.
我们来看看他们是如何加载网页的。
3.1 代码
iOS开发需要安装Xcode。 它是一个集成开发环境（IDE），是Apple指定的官方iOS开发工具。 所有苹果手机应用程序都是由它打包和生成的。
它可以从 Mac 计算机上的 App Store 免费安装。 注意，Xcode仅支持Mac系统，不支持其他系统。
安装完成后，打开一个新项目，类型为单视图App，然后系统会询问一些项目参数和存储位置，这里不再详细解释。
然后，进入开发环境。
在左侧的目录树中，找到 . 文件，负责视图逻辑。 根据官方文档，填写以下代码。
上面代码的意思是，当App开始加载视图(())时，创建一个新的控件实例。 视图加载成功后（（）），加载外部网页（红框部分）。
然后就可以查看代码运行结果了。 点击工具栏上的运行按钮，Xcode会弹出一个模拟器，这是当前代码的运行结果。
如果一切正常，就可以让Xcode打包源码，生成App的二进制安装文件。
3.2
的官方开发工具是，可以去官网下载。
安装完成后，打开一个类型为“Empty”的新项目。
它会询问项目参数，包括项目名称、开发语言（Java）等，然后进入开发环境。 因为是基于Java IDE修改的，了解Java的朋友应该对这个界面很熟悉。
根据网上的这个教程，接下来需要修改三个文件，其中*重要的是将.java文件更改为以下内容。
上面红框中的代码是在页面上添加并设置一个实例，指定当视图生成时(())，该实例将加载外部网页。
在运行代码之前，需要连接到真实设备或安装模拟器。 完成后，点击工具栏上的运行按钮，运行代码看看效果。
如果一切正常，就可以让生成App的二进制安装文件了。
4. 混合技术栈
上述原生技术栈需要自己创建一个新的实例。 相比之下，混合技术栈要简单得多。 因为页面是网页，所以容器已经搭建好了，开发者可以直接编写页面。
4.1 框架类型
在混合技术栈的各种容器框架中，历史*悠久的是它诞生于2009年，后来在2011年被Adobe收购，更名为Adobe。
Adobe 的核心代码后来作为一个名为 .
和 现在是两个独立开发的开源项目，但它们彼此密切相关。 它们可以简单地理解为 的内核，和 的分布。
后来其他人也开始基于它封装自己的框架，所以市面上有很多基于它的开源框架，比较出名的有Ionic等。
所有这些框架的共同点是，它们都使用Web技术（HTML5 + CSS +）来开发页面，然后框架将其打包成iOS和 App安装包。 它们的优点是开发简单、周期短、成本低，但缺点是功能和性能有限。
4.2 离子实例
基于框架，用法类似。 我们以Ionic为例，演示如何加载外部网页。
首先，根据官方文档生成项目脚手架。
$ npm install -g ionic@latest
$ ionic start myApp blank --type=react
$ cd myApp
然后打开 src/pages/Home.tsx 文件并插入标签。
上面的代码中，由于页面本身就是一个网页，所以可以直接使用标签来插入外部网页。
然后，在本机启动一个Web服务，看看Demo的效果。
$ ionic serve
上述命令会自动打开一个浏览器窗口，访问本机的8100端口，并在浏览器中显示网页效果。
如果一切正常，在命令行窗口中按Ctrl+c退出服务。 请参考编译成App安装包的方法。
5. 跨平台技术栈
上述混合技术栈使用HTML语言编写页面，然后用控件加载页面，因此只需编写一个页面即可支持多个平台。 跨平台技术栈也可以实现多平台支持，但原理完全不同。
跨平台技术栈的框架使用自己的语法来编写页面，而不使用Web技术。 它在编译期间将它们转换为本机控件，或者使用自己的底层控件来生成本机应用程序。 这样就彻底解决了网页性能差的问题。 下面描述了三个这样的框架。
5.1 反应
(一)原理
2013年，该公司发布了React框架。 该框架专为 Web 开发而设计。 核心思想是在网页之上建立一个UI的抽象层。 所有的数据操作都是在这个抽象层中完成（即在内存中完成），然后渲染到网页的DOM结构中。 这提高了性能。
很快，工程师们意识到UI抽象层本质上是一种与底层设备无关的数据结构，不仅可以渲染成网页，还可以渲染成手机原生页面。 这样，只要编写一次React页面，就可以分别编译成iOS和的原生应用程序。 这就是 React 项目的用武之地。
注意，虽然React也使用语言，并且写得像网页一样，但实际上所有的控件都是自己定义的，并在编译时一一翻译成对应的原生控件。 例如，React 的文本渲染控件是 ，翻译为 iOS 控件为 ，翻译为 控件为 。 这种性能既保证了性能，又实现了跨平台的支持，因此一诞生就引起了开发者的关注，成为了热门技术。
还有一个框架，和React很相似，也是使用一种语言，然后编译成原生控件。 然而，它的开发模型是基于.js，而不是React。
(2) 举例
下面是 React 加载外部网页的示例。 为了方便使用，官方团队提供了一个名为Expo的打包工具集。 **步，在手机上安装Expo的App客户端（App Store、Play）。
然后，在命令行安装脚手架工具expo-cli，并创建原理图项目。
$ npm install -g expo-cli
$ expo init rnDemo
创建新项目时，会要求您选择项目模板，您可以选择模板。 然后会要求你填写项目描述，可以随便写。
然后，安装React自己的控件。
$ cd rnDemo
$ npm install --save react-native-webview
接下来，打开主页上的脚本文件App.js，将其更改为以下代码。
上面的代码中，React自带的控件在编译时会分别转换为iOS和的原生控件。
接下来预览页面效果。 您可以先将其编译成Web版本并在浏览器中预览。 这样速度更快，您可以立即看到效果。
$ npm run web
运行上述命令，命令行中会出现一个二维码。
此时app开发，您可以在手机上打开Expo客户端，扫描二维码，就会显示App页面。 注意电脑和手机必须在同一个局域网内。
(3) React 的问题
虽然React的想法很精彩，但是在实际开发中还是会出现各种各样的问题。
*重要的问题是，UI抽象层翻译出来的iOS和原生页面无法完全一致，尤其是样式或功能存在差异的复杂页面。 当为两个平台编译的原生应用程序通常都正常时，一个会显示正常，而另一个则会出现各种奇怪的故障。 React底层还没有实现无缝适配。 目前还没有发布1.0版本（2019年底发布0.61版本），这或多或少说明了一些问题。
如果想要使用React在iOS和上达到同样的体验，并且充分发挥原生控件的功能，就需要同时熟悉React、iOS、这三个平台，也就是对开发商的要求确实太高了。 使用 React 两年后，该公司宣布放弃并转向原生技术堆栈。 他们写了一篇长文解释为什么这样做以及 React 存在哪些问题。 你可以参考那篇文章。
5.2
它是微软的跨平台App开发框架。 原理与React非常相似，只不过它的语言是C#。
需要用到，这里就不举例了。 根据官方文档，其用法如下。
上面的代码中，首先创建了一个新的控件实例，然后将该实例放置在布局上，这与原生App的语法非常相似。
5.3
它是*新的跨平台开发框架。 它采用了完全不同的方案来解决React的平台差异问题。
它自己实现了一组控件。 打包时提高手机App开发技术的技术栈，栈可以分成三类，这套控件会被打包到每个App中，所以不存在调用原生控件的问题。 无论何种平台，只需使用自己的一套内置控件即可在 iOS 和 上实现完全一致的体验。
历史不长，应用还不广泛，API还不稳定。 但非常值得一看。
加载外部网页的示例请参考官方团队的这篇文章。 核心代码如下：
上面的代码使用了Dart语言。 它是的官方语言，语法接近，但有更多的静态类型支持。
六、总结
通过上面的介绍，希望大家已经了解了各种技术栈的特点。
（1）原生技术栈的技能和经验是*好的。 对于复杂、规模较大的App，如果条件允许，应该采用这种方式开发。
（2）混合技术栈成本低，灵活性好，性能要求不高的简单App，尤其是纯显示页面，可以采用这种方式开发。
（3）跨平台技术栈适用于受外部或内部条件限制，只有一个团队开发跨平台应用的情况。
（正文结束）
开发高级UI课程
移动应用的UI（用户界面）往往是应用成功与否的关键因素：产品外观是否美观、点击和滑动是否流畅、意图是否清晰等都会影响用户留存率。 好的UI不仅体现了产品经理和开发人员的素质，还可以有效降低新的获取成本。
一般开发者收到产品的UI设计方案后，可能会去网上寻找类似的效果，看看有没有开源代码。 然而，优秀的开发人员会认真思考如何通过完全定制来实现这种效果，以达到*佳的功能和性能。
这就要求开发者具备实现高级UI开发的能力，了解 UI的底层实现原理，比如自定义View的渲染流程（->->）和交互设计（触摸事件）。
如何高效学习高级 UI开发，尽快晋升为高级工程师？ 这里有香雪课堂的一门课程《 UI进阶——定制与UI性能优化》。 带你一行一行的实现一个京东定制，研究系统源码，*后阅读源码。 在设计过程中分析显示问题和性能问题。 下图是课程介绍（点击放大）。
本课程为直播课程，在线实时问答，特邀Alvin老师（前三星/小米高级研发经理）授课，只需0.1元即可参与。 如果您参加完课程后感觉满意，还可以参加其他高级实践课程。
现在您可以用微信扫描上图二维码（手机长按两次）即可加入群组报名。 还可免费领取15GB 进阶必备学习资料（文字资料+视频教程）。
（超过）
