前言
Google AI Studio 的 Build 模式默认生成的是 Web 应用代码(主要是 React 或纯 HTML/JS),而不是原生的 Android 代码。这意味着不能直接把它打包成 APK,需要先进行转换,把 Web 应用包裹成一个安卓应用。
案例演示
下面以一个小应用程序为例演示如何将它打包成 APK 文件并安装在手机上。
基础环境准备
注意:需确保 index.html 正确引入入口脚本,否则页面可能空白。
前提:电脑上需要安装 Node.js 和 Android Studio。
使用 Capacitor 进行转换
Capacitor 是一个可以将 Web 应用(React/Vue/JS)直接转化为 Android/iOS 应用的工具。
步骤 1:安装 Capacitor CLI
首先全局安装 Capacitor 命令行工具:
npm install -g @capacitor/cli
步骤 2:在项目中安装 Capacitor
进入你的项目目录并安装 Capacitor 核心和 Android 插件:
cd <项目路径>
npm install @capacitor/core @capacitor/android
步骤 3:初始化 Capacitor
现在初始化 Capacitor 项目,设置应用名称和包名:
npx cap init FlashFlow com.example.app
这里的 com.example.app 是你的应用包名,建议使用反向域名格式。
步骤 4:构建 PWA 项目
在添加 Android 平台之前,我们需要先构建项目:
npm install
npm run build
这将创建一个 dist 目录,包含构建后的 Web 应用文件。
步骤 5:配置 Capacitor 输出目录
确保 Capacitor 知道在哪里找到构建文件。打开 capacitor.config.json 文件(初始化后会自动创建),确保内容类似以下格式:
{
"appId": "com.example.app",
"appName": "FlashFlow",
"webDir": "dist",
"bundledWebRuntime": false
}

