前言

目前手机应用市场上的 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
    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.example.webviewdemo;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.createWebView();
    }

    /* 创建 WebView 实例 */
    @SuppressLint("SetJavaScriptEnabled")
    private void createWebView() {
        // 创建 WebView 实例并通过 id 绑定我们刚在布局中创建的 WebView 标签
        // 这里的 R.id.webview 就是 activity_main.xml 中的 WebView 标签的 id
        final WebView webView = (WebView) findViewById(R.id.webview);

        // 设置 WebView 允许执行 JavaScript 脚本
        webView.getSettings().setJavaScriptEnabled(true);

        // 确保跳转到另一个网页时仍然在当前 WebView 中显示
        // 而不是调用浏览器打开
        webView.setWebViewClient(new WebViewClient());

        // 加载指定网页
        String url = "https://chenpipi.cn";
        webView.loadUrl(url);
    }

}

在 Android 项目中，app/java/ 目录主要用于存放项目的源代码。

在项目包名目录（文中项目包名为 com.example.webviewdemo）下的 MainActivity.java 文件为应用的主入口。

2.3 添加联网权限

选择 app/minifests/AndroidMinifest.xml 文件，在 application 标签前添加一个 uses-permission 标签来声明应用的网络访问权限，最后保存。

添加的代码如下：

<uses-permission android:name="android.permission.INTERNET" />

AndroidManifest.xml 文件用于描述应用的基本特性并定义了每个应用组件。

2.4 使用虚拟机运行应用

我们开发的时候可以随时使用模拟器来预览我们的应用，也可以将手机连接到电脑上进行调试（这里就不展开了）。

如果想要打包成 APK 文件安装到手机上运行，执行顶部菜单栏的 [ Build -> Build Bundle(s) / APK(s) -> Build APK(s) ] 即可。

调试工具栏在窗口右上方，选择或安装一个虚拟机（模拟器）。

点击绿色播放键（三角形），然后 Android Studio 会自动帮我们编译并在虚拟机 📱 中启动我们的应用。

随后可以看到我们的应用已经成功加载了 MainActivity.java 中设置好的链接 https://chenpipi.cn，计划通 👌。

如果没有安装虚拟机的话，需要点击窗口顶部菜单栏的 [ Tools -> AVD Manager ] 进入 AVD 管理器安装安卓虚拟机（模拟器）。

AVD 管理器：https://developer.android.com/studio/run/managing-avds#createavd

3. 加点料

3.1 隐藏标题栏

修改 app/res/values/styles.xml 文件，将 name 为 AppTheme 的 style 标签的内容换成以下代码：

<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>

修改完成后，重新预览应用发现之前骚得不行紫色标题栏已经不见啦~（希望标题栏没事 🙏）

3.2 隐藏状态栏

该方案在异形屏下会有些问题，且本文将不考虑异形屏的适配。

光隐藏标题栏浏览体验还不够沉浸，得把状态栏也隐藏了，不能让用户看到时间和电量！😏

修改 MainActivity.java 文件，在生命周期 onCreate 内调用 setContentView 函数之前添加以下两行代码：

// 设置为全屏（隐藏状态栏）
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

再保存看看，duang~ 状态栏也消失啦！（也希望状态栏没事 🙏）

3.3 接管返回键

默认情况下，在这个只有的 WebView 应用中无论在什么页面触发返回（按键或手势）都是会直接退出应用的，当然这肯定不是我们想要的效果。

一般来说在应用中触发返回操作应该是返回到上一个浏览的页面，没有上一个页面时才会退出应用。

我们可以通过以下两种方法来修改：

1. 修改 WebView 实例的按键监听器：

// 设置 WebView 的按键监听器，覆写监听器的 onKey 函数，对返回键作特殊处理
// 当 WebView 可以返回到上一个页面时回到上一个页面
webView.setOnKeyListener(new View.OnKeyListener() {
    @Override
    public boolean onKey(View v, int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
            webView.goBack();
            return true;
        }
        return false;
    }
});

2. 重写当前 Activity 的 onBackPressed 函数：

private WebView webView = null;

// 创建 WebView 实例时保存到 this.webView 中

/*
 * 接管返回键
 */
@Override
public void onBackPressed() {
    if (this.webView.canGoBack()) {
        this.webView.goBack();
    } else {
        super.onBackPressed();
    }
}

3.4 支持明文传输（HTTP）

从 Android 9（API Level 28）开始默认不支持明文传输，在 WebView 中加载 HTTP 网页会报 net::ERR_CLEARTEXT_NOT_PERMITTED 的错误，不方便本地进行调试。

我们可以在 AndroidMinifest.xml 文件中的 application 标签内添加属性 android:usesCleartextTraffic="true" 以支持明文传输。

<application
    ...
    android:usesCleartextTraffic="true">

可以看到我本地的 Cocos Creator 项目已经成功在安卓的 WebView 上跑起来啦~ 🍗

文中创建的示例项目已上传至码云，在文章底部传送门处获取

---

相关资料

Android 开发者
https://developer.android.com/

---

传送门

微信推文版本

个人博客：菜鸟小栈

开源主页：陈皮皮

Eazax-CCC 游戏开发脚手架

安卓 WebView 套壳应用 Demo

---

更多分享

为什么选择使用 TypeScript ？

高斯模糊 Shader

一文看懂 YAML

Cocos Creator 性能优化：DrawCall

互联网运营术语扫盲

---

公众号

菜鸟小栈

我是陈皮皮，这是我的个人公众号，专注但不仅限于游戏开发、前端和后端技术记录与分享。

每一篇原创都非常用心，你的关注就是我原创的动力！

Input and output.