表情包生成器 APP

表情包生成器 APP 表情包生成器 APP Modified July 21, 2025 如果不一致，可能会影响 APP 的运行。可以修改 config.xml 的 targetSdkVersion 来修改版本号： 五）添加插件 由于我的项目需要调用摄像头，所以要添加对应的插件，执行下列命令： Code block Plain Text Copy cordova plugin add cordova plugin camera 添加插件成功： 六）打包运行安卓 APP 1、打包 安装完插件后，执行 cordova build 命令可以打包 Android apk： Code block Plain Text Copy cordova build android 看到下列信息表示打包成功： 得到 apk 包后，有 2 种运行方式： 1）手机运行 可以直接将 apk 包发送到手机安装运行： 运行效果如图： 如果不一致，可能会影响 APP 的运行。可以修改 config.xml 的 targetSdkVersion 来修改版本号： 五）添加插件 由于我的项目需要调用摄像头，所以要添加对应的插件，执行下列命令： 添加插件成功： 六）打包运行安卓 APP 1、打包 安装完插件后，执行 cordova build 命令可以打包 Android apk： 看到下列信息表示打包成功： 得到 apk 包后，有 2 种运行方式： 1）手机运行 可以直接将 apk 包发送到手机安装运行： 运行效果如图： 或者简单粗暴，移除配置文件中对图标的引用： 2、缺少环境变量 如果环境搭建不顺利，可能会遇到下列报错，根据报错信息去进行对应的配置即可： 3、命令执行失败 执行 cordova run 报错命令执行失败，可能是因为没有配置 cmdline tools 到环境变量 Path 中。 4、Gradle 无法安装 明明已经安装了 Gradle，但是 Cordova 仍然会安装 Gradle，而且可能因为网络原因下载失败： 这时，我们可以配置环境变量 CORDOVA ANDROID GRADLE DISTRIBUTION URL，指定从本地下载 Gradle。环境变量的值设置为我们自己下载的 Gradle 压缩包的路径。 如果修改配置后再次执行打包命令还是报错，建议删除项目内的 platforms/android/.gradle 缓存，然后重试。 四、已有项目打包为 APP 刚刚实战了直接用 AI 生成 Cordova APP 项目的方式，如果我们已经有现成的网站项目，也能够很方便地打包为 APP。 比如现在鱼皮有一个消消乐网页游戏项目，让我们来包装为 APP： 先创建 cordova 项目： 把已有的网页文件复制到 www 目录下： 执行 cordova 命令添加 Android 平台： 最后，打包或者直接运行： 运行成功的效果如图，还是很 nice 的 最后 OK，教程到这里就结束了，由于缺少设备等原因，IOS 就先不给大家演示了。 最后给大家一些建议，Cordova 比较适合中小型网站项目，尤其适合已经有网站项目想快速转为 APP 的场景；但如果你需要搞一个复杂的大项目，依赖很多移动设备的原生能力，使用 Cordova 就不是很合适了，不如 Flutter。 尤其是没有编程能力的同学来说，建议不要直接用 AI 生成复杂的 Cordova APP，很可能出现你搞不定的代码问题，但是做些小游戏、小工具还是很不错的，拜拜 大家好，我是小林，这篇教程作者是鱼皮，AI 编程开源知识库作者。 AI 发展很快，现在随随便便就能生成一个网站，但是怎么纯用 AI 开发能在手机上运行的 APP 呢？网上基本上没有完整的教程。所以，我出手了，下面只用几分钟的时间，我会教大家如何利用 AI 生成 APP，依然是保姆级教程。 下面有请我们的主角 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。 Node.js 官网 可以把 NPM 理解为快速安装各种软件的小工具，安装完成后打开终端，执行下列命令安装 Cordova： Cordova 支持将网站打包为 Android 和 IOS 移动端、Electron 桌面端应用。下面鱼皮带大家安装我个人认为难度最大的 Android 环境。注意，接下来的每一步，操作其实都不难，但是一定要仔细看！一个细节不注意可能就报错了！ 二）安装 Android 环境 首先，我们要根据 Cordova 的版本来确定所需环境和工具的版本，由于我们安装的 Cordova 是最新版本的，因此直接阅读 最新的官方文档 即可，比如我这里需要的依赖如下： 最新的官方文档 其中，最重要的是： • Java 17 • Gradle 8.13 • Android API 级别 = 24 下面我们分别安装这些依赖。 1、安装 Java Java 版本必须是 17，最好找个现成的 Windows 系统的 Java 安装包： 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 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 命令来创建项目： 首次创建项目可能会有提示： 二）生成代码 此处有 2 种生成模式： 1. 先创建 Cordova 项目，然后在该项目内进行 AI 代码生成。告诉 AI 你要创建一个兼容 Cordova APP 的网站，直接让 AI 生成兼容 APP 的代码。这样做的好处是生成的代码 可以使用 Cordova 插件调用系统原生的能力，比如调用相机进行拍照。 2. 在 Cordova 项目外单独用 AI 生成网站项目，AI 不会关心你是否要把项目转为 Cordova APP，然后再把生成好的网站移动到 Cordova 项目中。这样做的好处是生成的网站代码更容易运行，同样 适合你已经有现成网站项目 的场景。 下面两种方式我都会给大家演示，先讲第一种模式，直接让 AI 生成一个【表情包生成器】的 Cordova APP。 用 Cursor 打开刚刚创建的 Cordova 项目目录，给 AI 输入下列提示词，提示词中需要包含 Cordova，并且提到兼容性： 三）网页浏览 AI 生成的网站文件会放到 www 目录下。生成代码完成后，AI 可能会自动提醒你打包 APP 并且运行的命令，要依次添加安卓平台、安装插件、打包、运行。 这些命令我们等会儿就会用到，现在先不要自动执行，因为生成的代码不一定直接可用，我们需要先利用网页端进行调试。 可以直接双击生成的 HTML 文件 www/index.html 查看效果；当然，更推荐的是通过 cordova 命令添加平台并运行。 先添加浏览器平台： 如果你在执行命令时遇到了报错，可以直接问 AI，比如鱼皮遇到了缺少命令执行权限的错误： 解决方案是，执行下列命令来修改 PowerShell 的执行策略： 添加平台成功后，可以输入 cordova run 命令运行平台： 然后就能够查看到网站的运行效果了。需要注意的是，因为 Cordova Browser 平台的特殊性，通过这个命令运行的网页效果可能和直接双击、或者启动本地服务器运行有区别。 除了上面的命令外，如果你想快速调试多个不同的平台，可以运行下列命令，统一查看各个平台： 四）添加安卓平台 接下来执行类似的命令来添加安卓平台： 如图，添加安卓平台成功，注意要确保输出的 Target SDK 和 Compile SDK 版本一致： 2）电脑运行 先打开 Android Studio 并启动安卓虚拟设备，然后执行 cordova run 命令： 就可以将 apk 安装到虚拟设备中，并且运行 APP 了，效果如图： 七）常见报错 打包运行是最容易遇到报错的地方，可能会遇到很多种报错，比如缺少插件、缺少文件、无法安装依赖、无法运行等等，建议直接把报错信息发给 AI，让它帮你解决。 下面鱼皮分享一些自己遇到的坑点。 1、项目缺少文件 比如鱼皮的项目缺少了图标文件： AI 尝试帮我创建图标：