用安卓 WebView 做一个“套壳”应用


title: 用安卓 WebView 做一个“套壳”应用
date: 2020/08/03
updated: 2020/08/03

前言

目前手机应用市场上的 APP 类型主要为以下两种:

  • Native App(原生应用):直接针对平台(Android、iOS 等手机系统)进行开发,属于性能最优的方案,也是开发成本最大的方案。

  • Hybrid App(混合应用):即为原生 WebView 加 HTML5 网页内容的形式。只需要开发一套 HTML5 业务逻辑,就可以同时运行在不同的平台上,相对比较灵活,内容可以快速更新,开发维护成本较低。最大的缺点就是性能远不及原生应用,交互上也做不到原生的那么自然。

React Native 和 Weex 之类的框架不是本文讨论的主题,这里就不展开了。

本文主要讲解如何制作一个安卓原生的“壳”来加载我们的 H5 网页,最终实现一个简单的 Hybrid App(套壳应用)。

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


正文

本文不涉及到复杂的 Android 与 Java 知识,小朋友不需要在家长的陪同下也能观看 :wink:

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 :joy:),而最低 SDK 则选择了 API 23(示例用随便选的 :confused:),配置完成后点击 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.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 会自动帮我们编译并在虚拟机 :iphone: 中启动我们的应用。

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

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

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

3. 加点料

3.1 隐藏标题栏

修改 app/res/values/styles.xml 文件,将 nameAppThemestyle 标签的内容换成以下代码:

<!-- 隐藏标题栏 -->
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>

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

3.2 隐藏状态栏

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

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

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

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

再保存看看,duang~ 状态栏也消失啦!(也希望状态栏没事 :pray:

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;
    }
});
  1. 重写当前 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 上跑起来啦~ :poultry_leg:

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


相关资料

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


传送门

微信推文版本

个人博客:菜鸟小栈

开源主页:陈皮皮

Eazax-CCC 游戏开发脚手架

安卓 WebView 套壳应用 Demo


更多分享

为什么选择使用 TypeScript ?

高斯模糊 Shader

一文看懂 YAML

Cocos Creator 性能优化:DrawCall

互联网运营术语扫盲


公众号

菜鸟小栈

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

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

Input and output.

13赞

我是no. 1

那是不是要举高高 :smile_cat:

看了你的标题,嗯,好吧教程没问题,我补充下:
1.如果里面套游戏的话,还是考虑集成x5内核,不然性能吃不消;
2.如果是原生大厅+h5集合类,注意跳转过程中的webview的销毁,否则内存泄漏很大;
3.js调用java的方式:webview.addJavascriptInterface(Class cls, String name); cls是java类的实例,name是js调用这个名字,自定义。

关键 性能怎么样

1赞

感谢大佬的补充与分享!!!

这篇其实只是开篇,后面我也会专门对“交互”进行讲解分享~

1赞

性能肯定不如原生,但是对于轻量级的游戏足以~

creator 不是 内置 了 webview组件吗?可以直接用的

如果只是单纯的浏览网页没问题,如果有与原生交互、h5游戏嵌入,那么就要修改代码或者原生接入

官方提供了, webview与原生之间的交互方案的。

https://docs.cocos.com/creator/manual/zh/components/webview.html?h=webview

大佬反过来了,再审一下题哦 :joy: 目的就是做个套壳,不是为了在应用里加载网页

android 还好,ios是明确禁止webview封装的应用上架的

另外如果声明了这个,google play也不让上架,google play强制要求https

1赞

lz 怎么解决缓存问题?貌似每次重开都会重新下载资源

大佬cocos creator 版本是多少

我用了cocos 封装的webview 就是原生大厅和h5子游戏的类型 您说的 webview销毁 内存泄漏问题可以指点下吗? 我这里确实会偶先崩溃