不写代码，让 AI 生成手机 APP！保姆级教程
你现在看到的 APP，是我完全用 AI 生成的，一行代码都没写！怎么做到的呢？大家好，我是程序员鱼皮。AI 发展很快，现在随随便便就能生成一个网站，但是怎么纯用 AI 开发能在手机上运行的 APP 呢？网上基本上没有完整的教程。所以，我出手了，下面只用几分钟的时间，我会教大家如何利用 AI 生成 APP，依然是 保姆级教程。
⭐️ 本文对应视频，推荐观看：https://bilibili.com/video/BV17HMcziEye
下面有请我们的主角 Cordova！
一、什么是 Cordova？
Apache Cordova 是一个开源的移动应用开发框架，允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术开发 跨平台 的移动应用。它通过将 Web 技术封装在本地容器中，使得开发者可以编写一次代码，然后在 Android、iOS、Windows 等多个平台上运行。
Cordova 主要基于以下几个核心组件实现，感兴趣的同学可以了解一下：
也就是说，想要开发 APP，我们只需要把网站文件交给 Cordova，根据需要装一装插件、改一改配置，然后直接使用它提供的构建工具就能将 Web 应用打包成原生 APP 应用了（比如 APK 文件）！几乎不涉及任何代码编写和开发。
听起来很简单，有手就行？但是想使用 Cordova 开发 APP，必须要在电脑上安装对应的环境，比如 Android 和 IOS，而安装环境的难度可以说是 非常炸裂 了！
如果你自己折腾，可能至少要花个几天的时间，会踩很多坑，到网上搜各种方案还不一定能搞定。所以我才做了这个教程，该踩的坑我都帮大家踩完了，会 用最短的时间带你搞定环境，并且教你如何使用 AI + Cordova 生成 APP。开始之前记得 点赞收藏三连 哦，拜托，我的头发真的不多啦！
二、环境准备
安装 Cordova
首先我们要安装 Cordova。Cordova 的运行依赖 Node.js 和 NPM 前端工具，到 Node.js 官网 下载即可，会自动安装 NPM。
可以把 NPM 理解为快速安装各种软件的小工具，安装完成后打开终端，执行下列命令安装 Cordova：
npm install -g cordovaCordova 支持将网站打包为 Android 和 IOS 移动端、Electron 桌面端应用。下面鱼皮带大家安装我个人认为难度最大的 Android 环境。注意，接下来的每一步，操作其实都不难，但是一定要仔细看！一个细节不注意可能就报错了！
安装 Android 环境
首先，我们要根据 Cordova 的版本来确定所需环境和工具的版本，由于我们安装的 Cordova 是最新版本的，因此直接阅读 最新的官方文档 即可，比如我这里需要的依赖如下：
其中，最重要的是：
[*]Java 17
[*]Gradle 8.13
[*]Android API 级别 >= 24
下面我们分别安装这些依赖。
1、安装 Java
Java 版本必须是 17，最好找个现成的 Windows 系统的 Java 安装包：
安装 Java 时建议选择 自动配置环境变量（包括 Path 和 JAVA_HOME），就不用自己手动配置环境变量了。
安装完成后，打开终端执行 java -version 命令查看版本号，看到下列输出表示成功：
如果无法执行命令，大概率是没有配置 Path 环境变量。
2、安装 Gradle
根据上面的版本号，Gradle 必须是 8.13，直接到 官网 下载二进制压缩包即可。
解压下载完成的压缩包，移动到 不包含中文的路径 中，然后配置环境变量，包括 Path 和 GRADLE_HOME：
打开终端执行 gradle -v 命令，查看版本号：
如果命令无法执行，大概率是 Path 环境变量配置错误。
3、安装 Android
建议直接安装 Android 开发工具 Android Studio，会自动安装 Android 的开发 SDK 和运行环境。
到官网下载 Android studio，运行安装包，按照步骤安装即可：
安装完成后，第一次打开 Android Studio 时，会提醒你安装 Android SDK 环境：
注意不要把 SDK 组件安装到包含中文的目录下，好在安装包也给了限制，不然又得栽倒一片人。。。
接下来无脑安装即可，会自动安装各种 Android 开发常用的工具、还有安卓设备模拟器：
这一步可能会有点煎熬，有些地区的朋友可能需要一些特殊的网络支持，你懂的。
经过了漫长的等待，Android SDK 终于安装完成，然后需要配置 Android 的环境变量 ANDROID_HOME：
还要配置 platform-tools 到 Path 中，里面有一些命令行工具：
配置完成后，我们打开 Android Studio，右上角进入 SDK Manager 的设置，根据 Cordova 的版本号要求，安装对应 API Level 的 SDK，比如我这里安装了 34 和 35 版本。
这一步可能也会比较慢，耐心等待安装吧~
安装完 SDK 后，再进入 SDK 工具选项，安装 Command-line Tools 命令行工具，之后在电脑上运行安卓 apk 包时可能会用到：
同样，把 Command-line Tools 添加到环境变量 Path 中，路径为 %ANDROID_HOME%\cmdline-tools\latest\bin，这样一来，很多工具可以直接在终端中使用了，比如 apkanalyzer。
4、安装 Android 设备模拟器
下面我们要尝试在自己的电脑上运行 Android 手机模拟器，这样调试程序更方便。
打开 Android Studio 的设备管理器，添加一个新设备：
选择指定机型，建议选择 API 版本高一点的，我这里选择 Pixel 7：
安装推荐的系统镜像：
耐心等待后手机就创建成功了，直接运行：
结果，报错啦！
如果你也遇到这种情况，可以在终端 进入 Android 模拟器目录 手动运行虚拟设备，这样能够看到详细的错误信息，有利于排查问题。
比如我这里显然是由于路径包含了中文！可恶啊，当时年少轻狂不自卑一个没注意用了中文路径。。。
解决方法很简单，手动创建一个不包含中文路径的 avd 虚拟设备目录，然后设置环境变量 ANDROID_SDK_HOME：
然后再利用 Android Studio 创建一个设备并运行，这次成功运行了，恭喜你多了一个手机！
至此，环境终于搞定了，下面来实战 AI + Cordova 开发 APP。
三、AI + Cordova 实战
创建项目
打开终端，进入你想要创建项目的目录，先执行 cordova create <你的项目英文名称>命令来创建项目：
cordova create <你的项目英文名称>首次创建项目可能会有提示：
生成代码
此处有 2 种生成模式：
[*]先创建 Cordova 项目，然后在该项目内进行 AI 代码生成。告诉 AI 你要创建一个兼容 Cordova APP 的网站，直接让 AI 生成兼容 APP 的代码。这样做的好处是生成的代码 可以使用 Cordova 插件调用系统原生的能力，比如调用相机进行拍照。
[*]在 Cordova 项目外单独用 AI 生成网站项目，AI 不会关心你是否要把项目转为 Cordova APP，然后再把生成好的网站移动到 Cordova 项目中。这样做的好处是生成的网站代码更容易运行，同样 适合你已经有现成网站项目 的场景。
下面两种方式我都会给大家演示，先讲第一种模式，直接让 AI 生成一个【表情包生成器】的 Cordova APP。
用 Cursor 打开刚刚创建的 Cordova 项目目录，给 AI 输入下列提示词，提示词中需要包含 Cordova，并且提到 兼容性：
请帮我开发一个【移动端表情包生成器】Web APP，使用纯前端技术 + Cordova 实现。
如果需要，你可以通过 Cordova 调用系统原生功能。
请生成完整的项目代码，确保功能完整可用，而且所有功能都需要同时兼容网页端和移动设备。
##
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]