最近需要把我使用的几个程序从 Web 移植到 Android，因为我没有学过 Java 和 Kotlin，也没有学过 Dart ，所以准备直接使用 JavaScript 来开发。

我使用的是 Capacitor，Capacitor 也是一个使用 HTML CSS JS 来开发 Android 和 iOS App 的框架，类似于 Electron，只是不能使用 Node。

Capacitor 可以直接使用原生 JavaScript 开发，也可以使用 Vue 或 React，相比 React Native 和 uni-app 来说要更自由，也更容易上手。不过 Capacitor 使用的是 WebView 渲染，性能和稳定性可能不如 React Native，也不能开发小程序。

我使用的是 Windows，下面的环境变量配置只能用于 Windows，Mac 和 Linux 的环境变量配置会有些不一样，但是开发和打包都是差不多的。

配置开发环境

Capacitor 的 Android 程序打包也需要依赖 JDK 和 Android SDK，官方推荐的是直接使用 Android Studio。

我使用的 Capacitor 方案，大多数时候都是在 VSCode 或 WebStorm 中编写 JavaScript，只有打包和调试会用到 Android SDK 和相关的工具包，不需要使用性能分析和可视化设计之类的功能，没有必要使用 Android Studio 这种完整功能的 IDE。

Android Command Line Tools 是一个命令行的 Android 程序构建工具，使用 Command Line Tools 也可以方便的下载 Android SDK。Command Line Tools 的程序大小差不多在 150MB，对于我这种不需要 Android Studio 的情况，Command Line Tools 就是最好的选择。

JDK + Android Command Line Tools 的方案，除了打包 Capacitor 外，也能用于 Java 和 React Native 的 Android 程序打包。

我这里使用的 Android Command Line Tools 相比 Android Studio 会麻烦一些，如果你更喜欢图形化操作，也可以直接下载安装 Android Studio。

下载和配置 JDK

我这里使用的是 Eclipse Temurin 的 OpenJDK，我使用的是 JDK21。

Eclipse Temurin OpenJDK 官网 https://adoptium.net/zh-CN

我下载的是 zip 免安装版，解压后有一个 openjdk21 的目录，目录中有 bin conf include jmods legal lib NOTICE release 文件和目录。

下面添加 JDK 的环境变量：

直接在底部任务栏搜索框中输入 环境变量 ，选择 编辑系统环境变量 ，在打开的系统属性窗口中选择 环境变量 。

双击 系统变量 列表中的 Path ，选择 新建 ，把 JDK 目录中的 bin 路径添加到 Path 环境变量：

在path中添加jdk的bin目录

还需要新建一个系统变量，直接在 系统变量 列表下方点击 新建 ，变量名使用 JAVA_HOME ，变量值使用存放 JDK 程序的目录路径，在这个 JDK 目录中应该能看到 bin conf 之类的目录：

存放JDK的目录

配置JAVA_HOME环境变量

配置完成后 确定 。

下面检查一下 JDK 是否配置正确，打开命令行，输入：

java -version

正确应该能看到类似：

openjdk version "21.0.11" 2026-04-21 LTS
OpenJDK Runtime Environment Temurin-21.0.11+10 (build 21.0.11+10-LTS)
OpenJDK 64-Bit Server VM Temurin-21.0.11+10 (build 21.0.11+10-LTS, mixed mode, sharing)

输入：

echo %JAVA_HOME%

正确应该能看到你存放 JDK 的目录。

下载和配置 Android Command Line Tools

访问 Android Studio 的官网 https://developer.android.com/studio?hl=zh-cn，找到 仅限命令行工具 ，下载对应平台的 zip 包。

选择一个存放目录解压，最好是空目录，我这里解压到 D:\www\bin\android 目录，解压后应该有一个 cmdline-tools 目录，目录中有 bin lib NOTICE.txt source.properties 目录和文件。

在 cmdline-tools 目录中创建一个 latest 目录，把之前 cmdline-tools 目录中的 bin lib NOTICE.txt source.properties 移动到 latest 中，目录结构如下：

Command Line Tools目录结构

下面添加 Command Line Tools 的环境变量：

按照上面 JDK 的方式打开环境变量编辑，在系统变量的 Path 中添加 Command Line Tools 的 bin 目录路径：

在环境变量的path中添加Command Line Tools的bin路径

继续新建一个系统变量，变量名使用 ANDROID_HOME ，变量值使用你解压 Command Line Tools 的目录，我的 Command Line Tools 解压到了 D:\www\bin\android ，我的变量值就是 D:\www\bin\android ：

添加Command Line Tools的ANDROID_HOME

添加完成后 确定 。

下面会用到一个 sdkmanager，这是 Command Line Tools 的包管理器。

列出可用的软件包：

sdkmanager --list

下面使用 sdkmanager 下载 Android SDK 和相关的工具包：

sdkmanager "platform-tools" "platforms;android-34" "build-tools;34.0.0"

不同的 Android 版本使用的 platforms;android 也会不一样，你可以根据你的 Android App 支持的 Android 版本来下载。我这里下载的 34 最高支持 Android 14，目前最高的 36 支持 Android 16。

我上面同时下载了 3 个软件包，如果需要 Android 模拟器的话，可以再加一个 emulator ，不过我不太想用官方的 Android 模拟器，所以就不下载 emulator 了。

下载完成后在上面环境变量的 ANDROID_HOME 目录中就可以看到 platform-tools platforms licenses build-tools 目录。

在 platform-tools 目录中就有 adb fastboot 之类的工具。

项目初始化

下面实现一个 Hello World 程序，点击按钮后用浏览器的 alert 显示一个 Hello World ，然后打包一个 apk 安装包，暂时不会用到 Android 的原生功能。

除了上面配置的 Android Command Line Tools 和 JDK 外，Node.js 也是必须的。

创建一个项目目录，在项目目录初始化：

npm init -y

在项目目录内再创建一个 www 或 src 目录，HTML 和 JS 的页面文件就需要放到这个目录内，不要把页面文件直接放到项目目录。

下面初始化 Capacitor，在项目目录内安装 Capacitor：

npm install @capacitor/core @capacitor/cli --save-dev

初始化 Capacitor：

npx cap init

需要根据提示填写一些信息：

Name： 程序名称

Package ID: 程序 ID，也就是包名，比如 com.hello.app

Web asset directory: 你存放页面文件的目录，比如 www 或 src，如果你使用了构建工具，页面目录可能就是 dist

初始化完成后在项目目录会生成一个 capacitor.config.json 。

编写代码

我在项目目录中创建了一个 src 来存放页面文件，下面在 src 中创建一个 index.html ，放一个按钮，引入一个 JS：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
<button type="button" id="show-hello">显示 Hello World</button>
<script src="app.js"></script>
</body>
</html>

这里和正常的 Web 开发是一样的，你也可以加一些 CSS。

上面引入了 app.js ，下面就创建一个 app.js ，点击按钮后弹出一个 alert ：

// 按钮点击
document.querySelector('#show-hello').addEventListener('click', () => {
  // 使用 navigator.vibrate 让手机震动 200 毫秒
  if (navigator.vibrate) {
    navigator.vibrate(200);
  } else {
    alert('当前环境不支持 navigator.vibrate');
  }
  alert('Hello world');
});

这里没有用到 Android 原生功能，你可以直接打开浏览器查看页面效果。

打包 Android apk

在项目目录安装 Capacitor Android：

npm install @capacitor/android

把 Android 工程添加到项目：

npx cap add android

在项目目录应该会生成一个 android 目录。

后面如果修改了页面代码，需要使用：

npx cap sync

把页面代码同步到 Android 工程。

下面进入项目目录中的 android 目录：

cd android

生成 apk：

.\gradlew.bat assembleDebug

第一次生成可能需要一些时间。

完成后可以在项目目录中的 android/app/build/outputs/apk/debug 目录看到 apk 文件。

我这里生成的一个显示 Hello World 的 apk 文件大小是 3.92MB。

尝试把 apk 传到手机运行一下：

Capacitor编写的 Android Hello World 程序

成功显示了 Hello World ，也触发了震动。

我这里测试使用的手机是小米13Pro，系统是 Android13 的 MIUI14。