h5手机app开发简介:技术篇(H5做App开发流程)

学习手机APP开发的新人，一开始总会选择一条学习路径。

如果熟悉Java语言，可以学习Android开发；如果熟悉脚本语言(比如Python或者Ruby)，可以学习Swift语言，开发iOS。如果像我一样，我熟悉网页技术，那么H5开发是最容易入门的。

本系列教程的第一篇文章已经介绍了移动应用的类型[1]。所谓的H5页面实际上是混合应用的前端，外面是原生外壳，里面是网页。本文紧随第一篇，介绍了移动App开发的技术栈，尤其是H5开发的相关技术。

本文由最大的在线教育平台之一腾讯课堂赞助。他们现在已经推出了 "腾讯课堂101计划 "[3]推广优质课程资源。想学习和提高手机App开发技术的朋友可以关注本文末尾的安卓课程信息。

一、手机 App 的技术栈

手机App的技术栈可以分为三类。

(1) 原生 App 技术栈(原生技术栈)

原生技术栈是指只能用于特定手机平台的开发技术。比如Android平台的Java技术栈，iOS平台的Object-C技术栈或者Swift技术栈。

这个技术栈只能在一个平台上使用，不能跨平台使用。

(2) 混合 App 技术栈(混合技术栈)

混合技术栈(Hybrid technology stack)是指开发混合app的技术，即将网页放入特定的容器中，然后打包成各种平台的原生app。所以混合技术栈其实就是Web技术栈的容器技术栈，典型代表就是PhoneGap、Cordova、Ionic等框架。

如果你掌握了W跨平台 App 技术栈(跨平台技术栈)

跨平台技术栈是指使用一种技术，同时支持多个手机平台。它和hybrid technology stack的区别在于，它不使用Web技术，即它的页面不是HTML5页面，而是用自己的语法编写的UI层，然后编译成各个平台的原生app。

这个技术栈是一个纯容器技术栈，React Nativ小结

H5开发主要用于混合技术栈。但是也会使用一些跨平台技术栈的容器(比如React Nativ

二、WebView 控件

在解释具体的技术栈之前，你需要知道，无论是什么技术，你都必须需要一个w

三、原生技术栈

原生技术栈分为iOS和Android两个平台。

简单来说，iOS的原生技术栈就是用Object-C语言或者Swift语言在Xcod

3.1 Xcode

IOS开发需要安装Xcode。它是一个集成开发环境(IDE)，是苹果指定的iOS官方开发工具，所有苹果手机app都由它打包生成。

它可以通过app store在Mac电脑上免费安装。注意Xcode只支持Mac系统，不支持其他系统。

安装完成后，打开一个新项目，项目类型是单视图App，然后系统会询问一些项目参数和存储位置，于是我赢了 这里就不详细解释了。

然后，就进入了开发环境。

在左边的目录树中，找到文件ViewController.swifter，它负责视图逻辑。根据官方文件[4]，填写以下代码。

上面的代码意味着当应用程序加载视图(loadView())时，会创建一个WebView控件的新实例。视图加载成功后(viewDidLoad())，WebView会加载外部网页(红框部分)。

然后，您可以查看代码运行结果。点击工具栏的运行按钮，Xcode会弹出一个iPhone模拟器，这是当前代码的运行结果。

如果一切正常，可以让Xcod

3.2 Android Studio

Android的官方开发工具是Android Studio，可以从官网下载。

安装完成后，打开一个类型为 "空活动 "。

Android Studio会询问项目参数，包括项目名称，开发语言(Java)等等，然后进入开发环境。因为是基于Java IDE修改的，懂Java的朋友应该对这个界面比较熟悉。

根据这个在线教程[6]，接下来需要修改三个文件，其中最重要的是将MainActivity.java文件更改为以下内容。

上面红框中的代码是在页面上添加并设置一个WebView实例，并指定在生成视图(onCr

四、混合技术栈

上面的原生技术栈需要自己创建一个新的W

4.1 框架种类

在技术栈的各种容器框架中，PhoneGap[7]是最古老的，诞生于20年。22年了。后来在2011年被Adobe收购，改名为Adobe PhoneGap。

Adobe将PhoneGap的核心代码捐赠给Apache Foundation，作为一个全新的开源项目，命名为Apache Cordova[8]。

PhoneGap和Cordova是两个独立的开源项目，但它们之间有着密切的联系。可以简单理解为Cordova是PhoneGap的内核，PhoneGap是Cordova的发行版。

后来也有人开始基于Cordova封装自己的框架，所以市面上有很多基于Cordova的开源框架，比如Ionic[9]，Monaca[10]，Framework7[11]等等。

所有这些框架的共同点是使用Web技术(HTML5 CSS JavaScript)开发页面，然后打包成iOS和Android应用安装包。它们的优点是开发简单、周期短、成本低，缺点是功能和性能有限。

4.2 Ionic 实例

基于Cordova的框架，用法类似。让 让我们以Ionic为例来演示如何加载外部网页。

首先根据公文[12]生成项目的脚手架。

$ NPM install-g ionic @ latest $ ionic start myApp blank-type = react $ CD myApp

然后打开src/pages/Home.tsx文件并插入iframe标记。

在上面的代码中，因为页面本身就是一个网页，所以可以直接插入带有iframe标签的外部网页。

然后，在这台机器上启动一个Web服务，看看Demo的效果。

爱奥尼亚发球

以上命令会自动打开浏览器窗口，访问本机8100端口，在浏览器中显示网页效果。

如果一切正常，在命令行窗口中按Ctrl+c退出服务。编译成App安装包的方法可以参考官方文档[13]。

五、跨平台技术栈

上面的混合技术栈使用HTML语言编写页面，然后使用WebView控件加载页面，所以只需要编写一次页面就可以支持多种平台。跨平台技术栈也可以支持多个平台，但原理完全不同。

跨平台技术栈的框架使用自己的语法编写页面，不使用Web技术，然后在编译时将其变成原生控件，或者使用自己的底层控件生成原生app。。这就彻底解决了网页性能差的问题。这里有三个这样的框架。

react Nativ:用JavaScipt语言写页面Xamarin:用C#语言写页面Flutt

5.1 React Native

（1）原理

2022年，脸书发布了React框架。这个框架是为网页开发而设计的。核心思想是在网页之上建立一个UI的抽象层，所有的数据操作都在这个抽象层完成(也就是在内存中)，然后渲染到网页的DOM结构中，提高了性能。

很快，工程师们意识到UI抽象层本质上是一个数据结构，与底层设备无关。既可以渲染成网页，也可以渲染成手机原生页面。这样，只要编写一次React页面，就可以分别编译成iOS和Android的原生app。这就是React原生项目的由来。

注意，虽然React Native也使用JavaScript语言，看起来像网页，但实际上所有的控件都是自己定义的，并在编译时一一翻译成相应的原生控件。比如React Native的文本渲染控件是Text，翻译成iOS的UIView和Android的TextView。这种方法既保证了性能，又实现了跨平台支持，所以从诞生之日起就受到了开发者的关注，成为了热门技术。

还有一个NativeScript[14]框架，类似React Native。它也使用JavaScript语言，然后编译成原生控件。不过它的开发模式是基于Angular.js，而不是React。

（2）实例

下面是React Native加载外部网页的一个例子。为了使用方便，官方团队提供了一个打包的工具集，名为Expo[15]。第一步是安装Expo 手机上的s App客户端(App Store[16]，Google Play[17])。

然后，在命令行上安装脚手架工具expo-cli，以创建新的原理图项目。

$ NPM install-g Expo-CLI $ Expo init rn demo

创建新项目时，会要求您选择项目模板，您可以选择最小模板。然后，会要求你填写项目描述displayName，可以随便写。

那样地之后，安装React Native 自己的WebView控件。

$ cd rnDemo$ npm安装-保存react-native-webview

接下来，打开主页面的脚本文件App.js，将其改为以下代码。

在上面的代码中，React Nativ（3）React Native 的问题

React Native的想法虽然很美，但实际开发中存在各种各样的问题。

其中一个主要问题就是UI抽象层翻译的iOS和Android的原生页面可以 不要完全一致，尤其是对于具有不同风格或功能的复杂页面。从两个平台编译出来的原生App，往往一个是正常的，另一个会有各种奇怪的bug。React Native底层并没有进行无缝适配，也没有发布1.0版本(2022年底0.61版本)，这或多或少说明了一些问题。

如果想用React Native达到iOS和Android一样的体验，充分发挥原生控件的功能，需要同时熟悉React Native、iOS和Android三个平台，这对开发者的要求太高。使用React Native两年后，Airbnb宣布放弃，转用Native技术栈。他们写了一篇长文[18]解释他们为什么这么做，以及React Nativ

5.2 Xamarin

Xamarin是微软的跨平台App开发框架，原理类似React Native，只是语言是C#。

它的使用需要Visual Studio，所以我赢了 这里就不举例了。根据官方文件[19]，W

5.3 Flutter

Flutter[20]是Google最新的跨平台开发框架。这是为了解决采用了完全不同的方案来解决React Native的平台差异问题。

它自己实现了一组控件。打包的时候会把这套控件打包到每个App里，所以不存在调用原生控件的问题。无论什么平台，都可以调用自己的一套嵌入式控件，在iOS和Android之间都可以实现同样的体验。

颤动与颤动。;的历史不长，应用不广泛，API也没有稳定下来。但值得关注。

关于加载外部网页的例子，请参考Flutter 美国官方团队[21]。核心代码如下:

上面的代码使用了Dart语言。它是Flutter的官方语言，接近JavaScript语法，但是有更多的静态类型支持。

六、总结

通过上面的介绍，希望你已经了解了技术栈的特点。

(1) Native technology stack拥有最好的技能和经验。对于复杂的大型app，如果条件允许，应该这样开发。

(2)成本低、灵活性好、性能要求低的简单app，尤其是纯展示页面，混有技术栈，可以这样开发。

(3)跨平台技术栈适用于存在外部或内部约束，只有一个团队开发跨平台app的情况。

(正文结束)

安卓开发高级 UI 课程

手机App的UI(用户界面)往往是App成功的关键因素:产品外观是否美观，点击滑动是否流畅，意图是否明确都会影响用户 s留存率。一个好的UI不仅体现了产品经理和开发者的素质，还能有效降低新产品的绘制成本。

一般开发者收到产品的UI设计方案后，可能会去网上找类似的效果，看看有没有开源的代码。但是优秀的开发者会努力思考如何通过完全定制达到这种效果，达到功能和性能的最佳状态。

这就需要开发者具备实现高级UI的开发能力，了解Android UI的底层实现原理，比如onMeasure-onLayout-onDraw和交互设计(touch 《高级安卓 UI ——自定义 ViewGroup 与 UI 性能优化》，并研究了该系统的源代码 的框架布局和Vi只需要0.1元就能参与做讲座。如果上完课觉得满意，还可以学习Android的其他高级实用课程。

(完)

References

[1]手机App类型: -app-conc:

[3] "腾讯课堂101计划 ":

[4]公文: developer.apple.com/docum:,官方网站

[6]本教程:-w:

[8]阿帕奇·Cordova:

[9]Ionic:

[10]Monaca:

[11]Fram::-first-app.

[13]公文: -first-app # bui。本地应用程序

[14]nativescript: www . nativescript . org/

[15]:: itunes . apple . com/App/appl: . Google . com/stor: medium . com/Airbnb-engineering/sunsetting-react-nativ: docs . Microsoft . com/:: medium . com/flutter/the-power-of-webviews-in-flutter-a 56234 b 57 df 2。