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