前言
目前手机应用市场上的 APP 类型主要为以下两种:
-
Native App(原生应用):直接针对平台(Android、iOS 等手机系统)进行开发,属于性能最优的方案,也是开发成本最大的方案。
-
Hybrid App(混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一套 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维护成本较低。最大的缺点就是性能远不及原生应用,交互上也做不到原生的那么自然。
React Native 和 Weex 之类的框架不是本文讨论的主题,这里就不展开了。
本文主要讲解如何制作一个安卓原生的“壳”来加载我们的 H5 网页,最终实现一个简单的 Hybrid App(套壳应用)。
文中创建的示例项目已上传至码云,在文章底部传送门处获取
正文
本文不涉及到复杂的 Android 与 Java 知识,小朋友不需要在家长的陪同下也能观看 😉
1. 创建安卓项目
创建安卓项目需要用到 Android Studio,关于如何安装 Android Studio 可以阅读官方文档。
安装 Android Studio:https://developer.android.com/studio/install
1.1 创建新项目
首先打开 Android Studio,点击 Start a new Android Studio Project(创建一个新的 AS 项目)。
1.2 选择项目模板
项目模板这里我们选择 Empty Activity(空白活动),点击 Next(下一步)。
1.3 项目配置
来到项目配置页面,分别设置好以下选项:
- Name:应用名
- Package Name:包名
- Save Location:项目保存路径
- Language:项目使用的编程语言
- Minimum SDK:最低兼容 SDK 版本
这里语言选择 Java(因为我没写过 Kotlin 😂),而最低 SDK 则选择了 API 23(示例用随便选的 😕),配置完成后点击 Finished(完成)。
至此我们已经完成了项目的创建,接下来让我们正式开始我们今天的主题。
2. 开发套壳程序
2.1 添加 WebView 布局
修改 app/res/layout/activity_main.xml 文件,去掉原有的 TextView
标签,添加一个 WebView
标签并保存。
添加的代码如下:
<!-- 展示一个 WebView -->
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
在 Android 工程中,app/res/layout/ 目录主要用于存放定义用户界面布局的 XML 文件。
上文提到的 activity_main.xml 即为应用主界面的布局文件。
2.2 在入口处创建 WebView 实例
选择 app/java/{创建项目时指定的包名}/ 目录下的 MainActivity.java 文件(我这里是 app/java/example/webviewdemo/MainActivity.java)。
随后在 MainActivity.java 文件中添加一个 createWebView
函数(不要忘记导入用到的包),并在生命周期 onCreate
中调用该函数,来创建一个 WebView 实例并对其进行配置。
MainActivity.java 完整代码如下:
package com