Cordova 支持将网站打包为 Android 和 IOS 移动端、Electron 桌面端应用。下面鱼皮带大家安装我个人认为难度最大的 Android 环境。注意，接下来的每一步，操作其实都不难，但是一定要仔细看！一个细节不注意可能就报错了！

安装 Android 环境

首先，我们要根据 Cordova 的版本来确定所需环境和工具的版本，由于我们安装的 Cordova 是最新版本的，因此直接阅读 最新的官方文档 即可，比如我这里需要的依赖如下：

其中，最重要的是：

• Java 17
• Gradle 8.13
• Android API 级别 >= 24

下面我们分别安装这些依赖。

1、安装 Java

Java 版本必须是 17，最好找个现成的 Windows 系统的 Java 安装包：

安装 Java 时建议选择 自动配置环境变量（包括 Path 和 JAVAHOME），就不用自己手动配置环境变量了。

解压下载完成的压缩包，移动到 不包含中文的路径 中，然后配置环境变量，包括 Path 和 GRADLEHOME：

如果命令无法执行，大概率是 Path 环境变量配置错误。

3、安装 Android

建议直接安装 Android 开发工具 Android Studio，会自动安装 Android 的开发 SDK 和运行环境。

到官网下载 Android studio，运行安装包，按照步骤安装即可：

安装完成后，第一次打开 Android Studio 时，会提醒你安装 Android SDK 环境：

注意不要把 SDK 组件安装到包含中文的目录下，好在安装包也给了限制，不然又得栽倒一片人。。。

接下来无脑安装即可，会自动安装各种 Android 开发常用的工具、还有安卓设备模拟器：

这一步可能会有点煎熬，有些地区的朋友可能需要一些特殊的网络支持，你懂的。

经过了漫长的等待，Android SDK 终于安装完成，然后需要配置 Android 的环境变量 ANDROIDHOME：

4、安装 Android 设备模拟器

下面我们要尝试在自己的电脑上运行 Android 手机模拟器，这样调试程序更方便。

打开 Android Studio 的设备管理器，添加一个新设备：

选择指定机型，建议选择 API 版本高一点的，我这里选择 Pixel 7：

安装推荐的系统镜像：

耐心等待后手机就创建成功了，直接运行：

结果，报错啦！

如果你也遇到这种情况，可以在终端 进入 Android 模拟器目录 手动运行虚拟设备，这样能够看到详细的错误信息，有利于排查问题。

比如我这里显然是由于路径包含了中文！可恶啊，当时年少轻狂不自卑一个没注意用了中文路径。。。

解决方法很简单，手动创建一个不包含中文路径的 avd 虚拟设备目录，然后设置环境变量 ANDROIDSDKHOME：

然后再利用 Android Studio 创建一个设备并运行，这次成功运行了，恭喜你多了一个手机！

至此，环境终于搞定了，下面来实战 AI + Cordova 开发 APP。

三、AI + Cordova 实战

创建项目

首次创建项目可能会有提示：

生成代码

此处有 2 种生成模式：

1. 先创建 Cordova 项目，然后在该项目内进行 AI 代码生成。告诉 AI 你要创建一个兼容 Cordova APP 的网站，直接让 AI 生成兼容 APP 的代码。这样做的好处是生成的代码 可以使用 Cordova 插件调用系统原生的能力，比如调用相机进行拍照。
2. 在 Cordova 项目外单独用 AI 生成网站项目，AI 不会关心你是否要把项目转为 Cordova APP，然后再把生成好的网站移动到 Cordova 项目中。这样做的好处是生成的网站代码更容易运行，同样 适合你已经有现成网站项目 的场景。

下面两种方式我都会给大家演示，先讲第一种模式，直接让 AI 生成一个【表情包生成器】的 Cordova APP。

用 Cursor 打开刚刚创建的 Cordova 项目目录，给 AI 输入下列提示词，提示词中需要包含 Cordova，并且提到 兼容性：

请生成完整的项目代码，确保功能完整可用，而且所有功能都需要同时兼容网页端和移动设备。

📋 功能需求

1. 图片获取

• 支持摄像头拍照
• 支持从本地选择图片文件
• 自动缩放图片到合适尺寸

2. 表情包模板

• 提供8-10个常用表情包模板（惊呆了、无语、赞、点赞、emo了等）
• 网格布局展示模板，点击选择应用

3. 文字编辑

• 输入自定义文字内容
• 调整字体大小（20px-50px）
• 选择文字颜色（白色、黑色、红色等基础色彩）
• 添加文字描边效果
• 拖拽移动文字位置

4. 贴纸功能

• 提供常用emoji表情贴纸（😂🤣😭😍🤔等5-10个）
• 提供简单装饰贴纸（星星、爱心、箭头等）
• 支持拖拽移动和简单缩放

5. 保存功能

• 将编辑后的表情包导出为图片
• 支持下载保存到本地

🎨 界面要求

• 移动端优先：适配手机屏幕，大按钮设计
• 页面布局：
• 主页：拍照按钮、选择图片按钮
• 编辑页：顶部工具栏 + 中央画布 + 底部功能区
• 操作简单：实时预览效果，一键保存

📱 操作流程

1. 拍照或选择图片
2. 选择表情包模板
3. 编辑文字内容和样式
4. 添加emoji或装饰贴纸
5. 预览效果并保存图片

这些命令我们等会儿就会用到，现在先不要自动执行，因为生成的代码不一定直接可用，我们需要先利用网页端进行调试。

网页浏览

先添加浏览器平台：

如果你在执行命令时遇到了报错，可以直接问 AI，比如鱼皮遇到了缺少命令执行权限的错误：

解决方案是，执行下列命令来修改 PowerShell 的执行策略：

然后就能够查看到网站的运行效果了。需要注意的是，因为 Cordova Browser 平台的特殊性，通过这个命令运行的网页效果可能和直接双击、或者启动本地服务器运行有区别。

除了上面的命令外，如果你想快速调试多个不同的平台，可以运行下列命令，统一查看各个平台：

添加安卓平台

接下来执行类似的命令来添加安卓平台：

如图，添加安卓平台成功，注意要 确保输出的 Target SDK 和 Compile SDK 版本一致：

添加插件

由于我的项目需要调用摄像头，所以要添加对应的插件，执行下列命令：

添加插件成功：

打包运行安卓 APP

打包

看到下列信息表示打包成功：

得到 apk 包后，有 2 种运行方式：

手机运行

可以直接将 apk 包发送到手机安装运行：

运行效果如图：

电脑运行

就可以将 apk 安装到虚拟设备中，并且运行 APP 了，效果如图：

常见报错

打包运行是最容易遇到报错的地方，可能会遇到很多种报错，比如缺少插件、缺少文件、无法安装依赖、无法运行等等，建议直接把报错信息发给 AI，让它帮你解决。

下面鱼皮分享一些自己遇到的坑点。

1、项目缺少文件

比如鱼皮的项目缺少了图标文件：

AI 尝试帮我创建图标：

或者简单粗暴，移除配置文件中对图标的引用：

2、缺少环境变量

如果环境搭建不顺利，可能会遇到下列报错，根据报错信息去进行对应的配置即可：

3、命令执行失败

4、Gradle 无法安装

明明已经安装了 Gradle，但是 Cordova 仍然会安装 Gradle，而且可能因为网络原因下载失败：

四、已有项目打包为 APP

刚刚实战了直接用 AI 生成 Cordova APP 项目的方式，如果我们已经有现成的网站项目，也能够很方便地打包为 APP。

比如现在鱼皮有一个消消乐网页游戏项目，让我们来包装为 APP：

1）先创建 cordova 项目：

2）把已有的网页文件复制到 www 目录下：

3）执行 cordova 命令添加 Android 平台：

4）最后，打包或者直接运行：