【Android】将 html 打包为 apk

文章目录

- - 第一步：准备工作
  - [第二步：导入 HTML 文件](#第二步：导入 HTML 文件)
  - 第三步：修改布局文件
  - [第四步：编写 Java/Kotlin 代码](#第四步：编写 Java/Kotlin 代码)
  - 第五步：配置权限
  - [第六步：打包生成 APK](#第六步：打包生成 APK)
  - 进阶提示：如何打包发布版？
  - 常见问题排查

在 Android Studio 中将一个 HTML 文件（或整个静态网站）打包为 APK，最核心的技术是使用 WebView 组件。
以下是详细的步骤指南，适用于 Android Studio 的最新版本：

第一步：准备工作

确保你已经安装了 Android Studio，并且创建了一个新的项目。

打开 Android Studio。
选择 New Project。
选择 Empty Views Activity (或 Empty Activity)，点击 Next。
命名你的应用，选择语言为 Java 或 Kotlin，点击 Finish。

第二步：导入 HTML 文件

你需要将 HTML 文件放入项目的资源文件夹中。

在项目左侧的文件目录中，找到 app > src > main。
右键点击 main 文件夹，选择 New > Directory ，输入名称 assets。
- (注意：如果已有 assets 文件夹则无需创建)。
将你的 HTML 文件（例如 index.html）以及相关的 CSS、JS、图片文件夹直接复制粘贴到 assets 文件夹中。
- 路径最终为：app/src/main/assets/index.html。

第三步：修改布局文件

我们需要在界面上放置一个 WebView 组件。

打开 app > src > main > res > layout > activity_main.xml。
删除默认的 TextView 组件。
拖入一个 WebView 组件，或者将代码替换为如下内容：

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

第四步：编写 Java/Kotlin 代码

这一步是核心，用于让 WebView 加载你的 HTML 文件。
如果你使用 Java (MainActivity.java)：

java 复制代码

package com.example.yourappname; // 记得换成你的包名
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        
        // 配置 WebView 设置
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 启用 JavaScript
        webSettings.setDomStorageEnabled(true); // 启用本地存储（如果需要）
        
        // 这一行至关重要：确保链接在应用内打开，而不是跳转到系统浏览器
        webView.setWebViewClient(new WebViewClient());
        // 加载 assets 文件夹下的 html 文件
        webView.loadUrl("file:///android_asset/index.html");
    }
    
    // 实现后退键导航（可选）
    @Override
    public void onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack();
        } else {
            super.onBackPressed();
        }
    }
}

如果你使用 Kotlin (MainActivity.kt)：

kotlin 复制代码

package com.example.yourappname
import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    private lateinit var webView: WebView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webView = findViewById(R.id.webView)
        
        val webSettings: WebSettings = webView.settings
        webSettings.javaScriptEnabled = true
        webSettings.domStorageEnabled = true
        webView.webViewClient = WebViewClient() // 防止跳转外部浏览器
        
        webView.loadUrl("file:///android_asset/index.html")
    }
    override fun onBackPressed() {
        if (webView.canGoBack()) {
            webView.goBack()
        } else {
            super.onBackPressed()
        }
    }
}

第五步：配置权限

如果你的 HTML 文件需要访问网络（例如加载在线图片或 API），你需要添加网络权限。

打开 app > src > main > AndroidManifest.xml。
在 <manifest> 标签内，<application> 标签之前添加一行：

xml 复制代码

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

如果仅仅是纯静态本地 HTML 文件，这一步可以跳过，但建议加上以防万一。

第六步：打包生成 APK

代码写好后，就可以生成安装包了。

点击 Android Studio 顶部菜单栏的 Build。
选择 Build Bundle(s) / APK(s)。
选择 Build APK(s)。
等待右下角进度条构建完成。
构建成功后，右下角会弹出一个提示框，点击 locate （或在 app/build/outputs/apk/debug/ 目录下找到 app-debug.apk）。
这个 APK 文件就可以安装到手机上运行了。

进阶提示：如何打包发布版？

上面生成的是 Debug 版本（未优化、未签名），如果你想做正式发布：

点击顶部菜单 Build -> Generate Signed Bundle / APK。
选择 APK，点击 Next。
创建一个新的密钥库或选择已有的，填写密码。
选择 release 构建变体。
完成后生成的 APK 是经过混淆优化并签名的，可以直接上传到应用商店。

常见问题排查

网页打不开或空白 ：检查路径是否为 file:///android_asset/index.html（注意是 asset 没有 s，但文件夹名是 assets）。
点击链接跳转到浏览器 ：确保添加了 webView.setWebViewClient(new WebViewClient());。
中文乱码 ：确保你的 HTML 文件头部包含 <meta charset="utf-8">。
无法下载Gradle：使用国内代理下载

复制代码
install Gradle distribution from 'https://services.gradle.org/distributions/gradle-8.13-bin.zip'.
Reason: java.net.SocketTimeoutException: Connect timed out
打开项目根目录下的 gradle/wrapper/gradle-wrapper.properties 文件。找到 distributionUrl 一行，将其值改为国内镜像地址，例如：
properties 复制代码
 distributionUrl=https://mirrors.aliyun.com/macports/distfiles/gradle/gradle-8.13-bin.zip
阿里云镜像地址为 https://mirrors.aliyun.com/macports/distfiles/gradle/，请确认该路径下存在 gradle-8.13-bin.zip 文件。若版本不同，需修改版本号。

其他可用镜像（使用时请自行验证链接有效性）：

腾讯云：https://mirrors.cloud.tencent.com/gradle/gradle-8.13-bin.zip

华为云：https://mirrors.huaweicloud.com/gradle/gradle-8.13-bin.zip

清华大学：https://mirrors.tuna.tsinghua.edu.cn/gradle/gradle-8.13-bin.zip

保存文件后，重新同步项目（点击工具栏的"Sync Project with Gradle Files"按钮）。