花150元,我用 AI 做出了千万播放的爆款视频!保姆级教程+完整提示词

大家好,我是程序员鱼皮。这两天正在研究 **怎么切显卡**,只切贵的,不切对的: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/JMe3h1xTY3ydG98S.webp) 我是怎么做到的呢?下面会分享。 这段时间,网上出现了很多利用 AI 制作 ASMR 视频的博主,其中比较有代表性的一位,几天的时间就涨了近 20 万粉丝!百万千万播放量的视频那是信手拈来~ ![](https://pic.code-nav.cn/post_picture/1601072287388278786/6piy1tyZA6pvBJgr.webp) 先聊聊 ASMR 是什么?专业的解释是 Autonomous Sensory Meridian Response 自发性知觉经络反应,又名耳音、颅内高潮等,指人体通过视、听、触、嗅等感知上的刺激,在颅内、头皮、背部或身体其他部位产生的令人愉悦的独特刺激感。 常见的 ASMR 触发音包括轻声细语、敲击声、刷子声、咀嚼声等,达到减压放松的效果。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/01hwQmUo99RWsu8m.webp) 我高中的时候有段时间挺沉迷这玩意,读书压力比较大,听着它更容易进入睡眠,**不过听的都是正经的**。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/34k0HWRBLuT8WRLx.webp) 传统的 ASMR 视频是需要准备一个高质量的人头麦克风(估计要几千块吧),从而达到更好的效果,但现在随着 AI 的发展,这种视频的制作成本直接拉到了最低。 下面我来教大家怎么快速复刻火爆全网的 ASMR 视频! 首先,我们要利用 Google Veo 3 这一个革命性的 AI 视频生成模型,于 2025 年 5 月一推出,立马掀起了一波 AI 视频创作热潮。它的特别之处在于:能直接通过文本提示词 **生成和视频画面同步的声音**,甚至都不需要你专门在 Prompt 中强调。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/GA4lJpGQ1V0A3seT.webp) 以前想制作 AI 视频,你要先生成视频,再生成声音,或者自己到剪辑软件中搜索音效进行配音,还是比较麻烦的。现在好了,直接输入一句 Prompt,AI 直出成品视频! ![](https://pic.code-nav.cn/post_picture/1601072287388278786/47EDtr0f6lCV2Weo.webp) 首先我们进入 Veo 3 官方网站:[https://gemini.google/overview/video-generation](https://gemini.google/overview/video-generation/) 注意避坑很多非官方网站!伪装的很像,但价格比官方贵很多,比如下面这种: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/J9jTIxYd4FmSzvRr.webp) 由于 Veo 3 生成目前只针对 Google AI 会员开放,所以接下来要先交一笔 “保护费”。Pro 会员就足够了,价格是每月 20 刀,差不多 150 元左右,还是挺贵的。不过大学生可免费升级会员直到 2026 年期末,这是一波薅羊毛的机会。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/lahXvC7ODHb8Rawh.webp) 而且比较难受的是,需要特定国家的 Google 账号才能订阅会员(还需要国外的银行卡),这一步估计会劝退很多人。大家各凭本事吧,过了这关后面就洒洒水了。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/JDM54WHRCG5lmTSQ.webp) 订阅后,进入 Gemini 聊天室,点击左上角切换模型,在下方选择 Video 模式: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/oCsiCl99sAfhd0W3.webp) 然后就可以输入提示词生成视频了,鱼皮基于网上热门的 ASMR 提示词自己改造了一下,成为了一个更通用的模板,使用时只需替换一部分参数就好: ```markdown 逼真的4K特写镜头,展示一把 [工具:比如锋利的小刀] 在木制砧板上精准地切割一个 [物体材质:比如玻璃] 制成的 [物体名称:比如鱼皮]。以稳定的节奏反复切割,每一片被切下后轻柔地倒下,划过物体表面发出 [声音形容词:比如清脆的] 声音。物体的内部结构[结构描述:比如清晰可见],切面光滑整齐。整个过程配有舒缓的 ASMR 音效,营造出极致的视听享受和解压体验。 ``` 对应的英文提示词: ```markdown Realistic 4K close-up shot showing a [tool: such as sharp knife] precisely cutting a [object material: such as glass] [object name: such as fish skin] on a wooden cutting board. Cutting with steady rhythm repeatedly, each slice falling gently after being cut, producing [sound adjective: such as crisp] sounds as it glides across the object surface. The object's internal structure is [structure description: such as clearly visible], with smooth and neat cut surfaces. The entire process features soothing ASMR sound effects, creating an ultimate audio-visual enjoyment and stress-relief experience. ``` 举个例子,我们先来做个切橙子的 ASMR,中文提示词如下: ```markdown 逼真的4K特写镜头,展示一把锋利的陶瓷刀在木制砧板上精准地切割一个透明水晶制成的橙子。以稳定的节奏反复切割,每一片被切下后轻柔地倒下,划过物体表面发出悦耳的声音。物体的内部结构层次分明,切面光滑整齐。整个过程配有舒缓的ASMR音效,营造出极致的视听享受和解压体验。 ``` 对应的英文提示词: ```markdown Realistic 4K close-up shot showing a sharp ceramic knife precisely cutting a transparent crystal orange on a wooden cutting board. Cutting with steady rhythm repeatedly, each slice falling gently after being cut, producing melodious sounds as it glides across the object surface. The object's internal structure is distinctly layered, with smooth and neat cut surfaces. The entire process features soothing ASMR sound effects, creating an ultimate audio-visual enjoyment and stress-relief experience. ``` 大概要等 2 分钟左右: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/Tb3W92Um3WAp5zuK.webp) 生成完成,视频时长目前固定为 8 秒,大家可以感受一下: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/HPlVZwoCkNeUf6Rp.webp) 注意!**每个账号,每天只能做 3 个视频**。是的,你没看错,Pro 会员每天也只能做 3 个视频!想做更多就得多开账号,或者每月花近 2000 元升级 Ultra 会员,但我测试下来每天也只能生成 6 次,我觉得真心贵了。。。所以大家要珍惜每一次使用机会。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/dRfh8FntfTgBgU6b.webp) 算下来 30 天 90 个视频花 150 元,相当于每输入一次就花了 1 块多 💰。你觉得这个价格贵不贵? ![](https://pic.code-nav.cn/post_picture/1601072287388278786/1Gma5PqRn6A96r4b.webp) 网上很多朋友说英文提示词的生成效果更好,不过我自己试了几个中文提示词,感觉效果跟英文的没什么区别,甚至有时候超越了英文提示词!(毕竟 AI 生成是随机的嘛)大家可以对比下: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/fvePFgh4fYfuTlek.webp) 你还可以发挥想象力,尝试更多有意思的提示词,随便分享几个: ```markdown 水晶果冻切割: - tool: 精致的银制蛋糕刀 - object material: 透明水晶般的 - object name: 彩虹果冻方块 - sound adjective: 清脆悦耳的 - structure description: 层次分明,内部有彩色渐变纹理 蜂蜡蜡烛切片: - tool: 温热的黄铜切刀 - object material: 天然蜂蜡制成的 - object name: 六角形蜡烛 - sound adjective: 柔和温润的 - structure description: 蜂巢纹理清晰可见,散发淡淡蜂蜜香气 软陶艺术品: - tool: 锐利的艺术刻刀 - object material: 彩色软陶制成的 - object name: 迷你汉堡模型 - sound adjective: 柔和舒缓的 - structure description: 层次丰富,每层颜色鲜艳,质感逼真 ``` 当然,直接让 AI 基于我提供的模板生成提示词就好,这种视频要多少有多少~ 嘿嘿,有了这项技术,这次终于能做我一直想做却又不敢的事情了。。。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/RPglJ4lqD81q1pU8.webp) 作为一名程序员,我一直很想切割一下主机里的东西!(什么毛病哈哈)来吧,先切个 CPU! 提示词如下: ```markdown Realistic 4K close-up shot showing a precision diamond-tipped scalpel precisely cutting a silicon-based CPU processor chip on a wooden cutting board. Cutting with steady rhythm repeatedly, each slice falling gently after being cut, producing sharp metallic sounds as it glides across the object surface. The object's internal structure is intricately layered with visible circuit pathways and transistor arrays, with smooth and neat cut surfaces revealing the complex semiconductor architecture. The entire process features soothing ASMR sound effects, creating an ultimate audio-visual enjoyment and stress-relief experience. ``` 虽然中间有一刀有明显的不自然,但整体效果还不错吧,声音真的很有质感,戴上耳机多听几遍非常解压! ![](https://pic.code-nav.cn/post_picture/1601072287388278786/3dZ6nxomqrIWwp2t.webp) 再来切个显卡,要切就切贵的,直接上 RTX 5090!壕无人性。提示词如下: ```markdown Realistic 4K close-up shot showing a precision laser-etched surgical knife precisely cutting a next-generation RTX 5090 graphics card on a wooden cutting board. Cutting with steady rhythm repeatedly, each slice falling gently after being cut, producing satisfying high-tech crackling sounds as it glides across the object surface. The object's internal structure is cutting-edge with advanced Blackwell GPU cores and GDDR7 memory modules clearly visible, with smooth and neat cut surfaces revealing the revolutionary cooling architecture and multi-layered PCB design. The entire process features soothing ASMR sound effects, creating an ultimate audio-visual enjoyment and stress-relief experience. ``` 效果比我想像的好多了,切得呲呲直冒火花,爽感直接拉满! ![](https://pic.code-nav.cn/post_picture/1601072287388278786/VB2MybGmkCmFCm3J.webp) 说实话,我有点切上瘾了,要不是限制次数,我接下来还想切内存、割硬盘、剁主板。。。反正方法交给大家了,欢迎交作业~ 我们不敢轻易尝试的事情,就交给 AI 吧! 当然,不止切割,你还可以发挥想象,比如生成一段经典的 ASMR 耳语视频: ```markdown 第一人称ASMR体验:优雅的中国女性身穿深色丝质衣物,在柔和暖光中轻柔地凑近镜头。她温柔地微笑着将脸庞靠近镜头一侧,仿佛在观众耳边轻声细语,声音甜美舒缓。然后她用手轻抚镜头边缘,动作优雅缓慢,表情温暖贴心,营造出宁静舒适的私密氛围。音效:温柔的耳语声、细微的呼吸声、丝质面料轻响、舒缓的环境音调。 ``` 英文提示词: ```markdown first-person ASMR experience: An elegant Chinese woman in dark silk clothing and black stockings gently approaches the camera under soft warm lighting. She smiles tenderly while bringing her face close to one side of the camera, as if whispering sweetly in the viewer's ear with a soothing voice. Then she softly caresses the camera edge with graceful, slow movements and a warm, caring expression, creating a peaceful, intimate atmosphere. Audio: gentle whispers, subtle breathing, silk fabric sounds, soothing ambient tones. ``` 效果还不错,可惜是英文对白,不过我对这东西不感兴趣了,大家可以自行改良下提示词。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/PLYGSU9D73nemPSU.webp) OK,方法免费分享给大家了,其实还是很简单的吧。只不过因为 Google 的产品本身就有使用门槛,所以才给了很多人靠卖教程来盈利的机会。 感兴趣的朋友可以玩玩看,说不定就创作出爆款视频了呢? 其实还有 **同一个账号每日生成更多视频** 的方法,欢迎关注鱼皮,下期就分享! ## 更多 💻 编程学习交流:编程导航:https://www.codefather.cn/ 📃 简历快速制作:老鱼简历:https://laoyujianli.com ✏️ 面试刷题神器:面试鸭:https://mianshiya.com 📖 AI 学习指南:AI知识库:https://ai.codefather.cn/

不写代码,让 AI 生成手机 APP!保姆级教程

你现在看到的 APP,是我完全用 AI 生成的,一行代码都没写!怎么做到的呢? ![](https://pic.code-nav.cn/post_picture/1601072287388278786/bX1dCDFiMxN4GxGo.webp) 大家好,我是程序员鱼皮。AI 发展很快,现在随随便便就能生成一个网站,但是怎么纯用 AI 开发能在手机上运行的 APP 呢?网上基本上没有完整的教程。所以,我出手了,下面只用几分钟的时间,我会教大家如何利用 AI 生成 APP,依然是 **保姆级教程**。 ⭐️ 本文对应视频,推荐观看:[https://bilibili.com/video/BV17HMcziEye](https://www.bilibili.com/video/BV17HMcziEye/) 下面有请我们的主角 `Cordova`! ## 一、什么是 Cordova? Apache Cordova 是一个开源的移动应用开发框架,允许开发者使用 HTML、CSS 和 JavaScript 等 Web 技术开发 **跨平台** 的移动应用。它通过将 Web 技术封装在本地容器中,使得开发者可以编写一次代码,然后在 Android、iOS、Windows 等多个平台上运行。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/SKyNNvtlZn5RXJlT.webp) Cordova 主要基于以下几个核心组件实现,感兴趣的同学可以了解一下: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/JW6k5RuUkjok2Bg5.webp) 也就是说,想要开发 APP,我们只需要把网站文件交给 Cordova,根据需要装一装插件、改一改配置,然后直接使用它提供的构建工具就能将 Web 应用打包成原生 APP 应用了(比如 APK 文件)!几乎不涉及任何代码编写和开发。 听起来很简单,有手就行?但是想使用 Cordova 开发 APP,必须要在电脑上安装对应的环境,比如 Android 和 IOS,而安装环境的难度可以说是 **非常炸裂** 了! 如果你自己折腾,可能至少要花个几天的时间,会踩很多坑,到网上搜各种方案还不一定能搞定。所以我才做了这个教程,该踩的坑我都帮大家踩完了,会 **用最短的时间带你搞定环境,并且教你如何使用 AI + Cordova 生成 APP**。开始之前记得 **点赞收藏三连** 哦,拜托,我的头发真的不多啦! ![](https://pic.code-nav.cn/post_picture/1601072287388278786/5SJxJnNlQUXp8Rvp.webp) ## 二、环境准备 ### 安装 Cordova 首先我们要安装 Cordova。Cordova 的运行依赖 Node.js 和 NPM 前端工具,到 [Node.js 官网](https://nodejs.org/zh-cn) 下载即可,会自动安装 NPM。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/KJxTNAHrPd48J1hL.webp) 可以把 NPM 理解为快速安装各种软件的小工具,安装完成后打开终端,执行下列命令安装 Cordova: ```bash npm install -g cordova ``` Cordova 支持将网站打包为 Android 和 IOS 移动端、Electron 桌面端应用。下面鱼皮带大家安装我个人认为难度最大的 **Android 环境**。注意,接下来的每一步,操作其实都不难,但是一定要仔细看!一个细节不注意可能就报错了! ### 安装 Android 环境 首先,我们要根据 Cordova 的版本来确定所需环境和工具的版本,由于我们安装的 Cordova 是最新版本的,因此直接阅读 [最新的官方文档](https://cordova.apache.org/docs/en/dev/guide/platforms/android/index.html) 即可,比如我这里需要的依赖如下: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/uOlGQU6K0OXWXttq.webp) 其中,最重要的是: - Java 17 - Gradle 8.13 - Android API 级别 >= 24 下面我们分别安装这些依赖。 #### 1、安装 Java Java 版本必须是 17,最好找个现成的 [Windows 系统的 Java 安装包](https://www.azul.com/downloads/?version=java-17-lts&os=windows&package=jdk#zulu): ![](https://pic.code-nav.cn/post_picture/1601072287388278786/3IVOga2jyXeXaLK7.webp) 安装 Java 时建议选择 **自动配置环境变量**(包括 Path 和 JAVA_HOME),就不用自己手动配置环境变量了。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/66fSiR2zK6hIInaa.webp) 安装完成后,打开终端执行 `java -version` 命令查看版本号,看到下列输出表示成功: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/q8vOYmYGzVQOpCpZ.webp) 如果无法执行命令,大概率是没有配置 Path 环境变量。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/9yHhrrWZBTPpulpA.webp) #### 2、安装 Gradle 根据上面的版本号,Gradle 必须是 8.13,直接到 [官网](https://gradle.org/releases/) 下载二进制压缩包即可。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/MGlnCXl1oBehhnqM.webp) 解压下载完成的压缩包,移动到 **不包含中文的路径** 中,然后配置环境变量,包括 Path 和 GRADLE_HOME: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/qcVDfWyX6ZDDczN5.webp) ![](https://pic.code-nav.cn/post_picture/1601072287388278786/1M6l1vhhURpGXUgk.webp) 打开终端执行 `gradle -v` 命令,查看版本号: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/jXzLT7plwQNhrPFN.webp) 如果命令无法执行,大概率是 Path 环境变量配置错误。 #### 3、安装 Android 建议直接安装 Android 开发工具 [Android Studio](https://developer.android.com/studio?hl=zh-cn),会自动安装 Android 的开发 SDK 和运行环境。 到官网下载 Android studio,运行安装包,按照步骤安装即可: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/xR28v46ptu3xVJoz.webp) 安装完成后,第一次打开 Android Studio 时,会提醒你安装 Android SDK 环境: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/5pB9wNUF2Nqkw5tU.webp) 注意不要把 SDK 组件安装到包含中文的目录下,好在安装包也给了限制,不然又得栽倒一片人。。。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/h24chaRCRCWYuMwx.webp) 接下来无脑安装即可,会自动安装各种 Android 开发常用的工具、还有安卓设备模拟器: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/qXVPP8tzJmh7ADjJ.webp) 这一步可能会有点煎熬,有些地区的朋友可能需要一些特殊的网络支持,你懂的。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/MY3SpyrrwYfubEKp.webp) ![](https://pic.code-nav.cn/post_picture/1601072287388278786/wDyPKXLVzxkrO3R5.webp) 经过了漫长的等待,Android SDK 终于安装完成,然后需要配置 Android 的环境变量 ANDROID_HOME: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/Mgo92C21SI45k75l.webp) 还要配置 platform-tools 到 Path 中,里面有一些命令行工具: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/PgAtPUkFqWxbMBxE.webp) 配置完成后,我们打开 Android Studio,右上角进入 SDK Manager 的设置,根据 Cordova 的版本号要求,安装对应 API Level 的 SDK,比如我这里安装了 34 和 35 版本。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/Hz3pH1XyIl4mYWTY.webp) 这一步可能也会比较慢,耐心等待安装吧~ ![](https://pic.code-nav.cn/post_picture/1601072287388278786/K3j1KfRAf6OWNoCK.webp) 安装完 SDK 后,再进入 SDK 工具选项,安装 Command-line Tools 命令行工具,之后在电脑上运行安卓 apk 包时可能会用到: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/vmr9ptTGa7qu37KM.webp) 同样,把 Command-line Tools 添加到环境变量 Path 中,路径为 `%ANDROID_HOME%\cmdline-tools\latest\bin`,这样一来,很多工具可以直接在终端中使用了,比如 apkanalyzer。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/RFCn4owE0oqqz5hN.webp) #### 4、安装 Android 设备模拟器 下面我们要尝试在自己的电脑上运行 Android 手机模拟器,这样调试程序更方便。 打开 Android Studio 的设备管理器,添加一个新设备: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/VF2QxueBFlSC51MZ.webp) 选择指定机型,建议选择 API 版本高一点的,我这里选择 Pixel 7: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/gUcja5SXOcPpqnp7.webp) 安装推荐的系统镜像: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/7d36iRH4G7c5N8Ss.webp) 耐心等待后手机就创建成功了,直接运行: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/yM91EsNrbd1OXc5I.webp) 结果,报错啦! ![](https://pic.code-nav.cn/post_picture/1601072287388278786/bKntmqys6rgbQo1R.webp) 如果你也遇到这种情况,可以在终端 **进入 Android 模拟器目录** 手动运行虚拟设备,这样能够看到详细的错误信息,有利于排查问题。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/I1ddDooDd3XfBsKV.webp) 比如我这里显然是由于路径包含了中文!可恶啊,当时年少轻狂不自卑一个没注意用了中文路径。。。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/uqEP6UNMyUO7Ntr2.webp) 解决方法很简单,手动创建一个不包含中文路径的 avd 虚拟设备目录,然后设置环境变量 ANDROID_SDK_HOME: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/ylH6tL77a7cFsqpo.webp) 然后再利用 Android Studio 创建一个设备并运行,这次成功运行了,恭喜你多了一个手机! ![](https://pic.code-nav.cn/post_picture/1601072287388278786/5AYUxx2HDoGrnbMB.webp) 至此,环境终于搞定了,下面来实战 AI + Cordova 开发 APP。 ## 三、AI + Cordova 实战 ### 创建项目 打开终端,进入你想要创建项目的目录,先执行 `cordova create` 命令来创建项目: ```bash cordova create <你的项目英文名称> ``` 首次创建项目可能会有提示: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/58gKkkLPvxmawhrK.webp) ### 生成代码 此处有 2 种生成模式: 1. 先创建 Cordova 项目,然后在该项目内进行 AI 代码生成。告诉 AI 你要创建一个兼容 Cordova APP 的网站,直接让 AI 生成兼容 APP 的代码。这样做的好处是生成的代码 **可以使用 Cordova 插件调用系统原生的能力**,比如调用相机进行拍照。 2. 在 Cordova 项目外单独用 AI 生成网站项目,AI 不会关心你是否要把项目转为 Cordova APP,然后再把生成好的网站移动到 Cordova 项目中。这样做的好处是生成的网站代码更容易运行,同样 **适合你已经有现成网站项目** 的场景。 下面两种方式我都会给大家演示,先讲第一种模式,直接让 AI 生成一个【表情包生成器】的 Cordova APP。 用 Cursor 打开刚刚创建的 Cordova 项目目录,给 AI 输入下列提示词,提示词中需要包含 Cordova,并且提到 **兼容性**: ```shell 请帮我开发一个【移动端表情包生成器】Web APP,使用纯前端技术 + Cordova 实现。 如果需要,你可以通过 Cordova 调用系统原生功能。 请生成完整的项目代码,确保功能完整可用,而且所有功能都需要同时兼容网页端和移动设备。 ## 📋 功能需求 ### 1. 图片获取 - 支持摄像头拍照 - 支持从本地选择图片文件 - 自动缩放图片到合适尺寸 ### 2. 表情包模板 - 提供8-10个常用表情包模板(惊呆了、无语、赞、点赞、emo了等) - 网格布局展示模板,点击选择应用 ### 3. 文字编辑 - 输入自定义文字内容 - 调整字体大小(20px-50px) - 选择文字颜色(白色、黑色、红色等基础色彩) - 添加文字描边效果 - 拖拽移动文字位置 ### 4. 贴纸功能 - 提供常用emoji表情贴纸(😂🤣😭😍🤔等5-10个) - 提供简单装饰贴纸(星星、爱心、箭头等) - 支持拖拽移动和简单缩放 ### 5. 保存功能 - 将编辑后的表情包导出为图片 - 支持下载保存到本地 ## 🎨 界面要求 - 移动端优先:适配手机屏幕,大按钮设计 - 页面布局: - 主页:拍照按钮、选择图片按钮 - 编辑页:顶部工具栏 + 中央画布 + 底部功能区 - 操作简单:实时预览效果,一键保存 ## 📱 操作流程 1. 拍照或选择图片 2. 选择表情包模板 3. 编辑文字内容和样式 4. 添加emoji或装饰贴纸 5. 预览效果并保存图片 ``` AI 生成的网站文件会放到 `www` 目录下。生成代码完成后,AI 可能会自动提醒你打包 APP 并且运行的命令,要依次添加安卓平台、安装插件、打包、运行。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/jCbomcH7l5QxVYEH.webp) 这些命令我们等会儿就会用到,现在先不要自动执行,因为生成的代码不一定直接可用,我们需要先利用网页端进行调试。 ### 网页浏览 可以直接双击生成的 HTML 文件 `www/index.html` 查看效果;当然,更推荐的是通过 cordova 命令添加平台并运行。 先添加浏览器平台: ```shell cordova platform add browser ``` 如果你在执行命令时遇到了报错,可以直接问 AI,比如鱼皮遇到了缺少命令执行权限的错误: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/iZb0ovMMzLhIHEG9.webp) 解决方案是,执行下列命令来修改 PowerShell 的执行策略: ```bash Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser ``` 添加平台成功后,可以输入 `cordova run` 命令运行平台: ```bash cordova run browser ``` 然后就能够查看到网站的运行效果了。需要注意的是,因为 Cordova Browser 平台的特殊性,通过这个命令运行的网页效果可能和直接双击、或者启动本地服务器运行有区别。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/yZWkAJ07SWExvRW3.webp) 除了上面的命令外,如果你想快速调试多个不同的平台,可以运行下列命令,统一查看各个平台: ```bash cordova serve --port 8000 ``` ![](https://pic.code-nav.cn/post_picture/1601072287388278786/aXAbJ2aoGNhQRy78.webp) ### 添加安卓平台 接下来执行类似的命令来添加安卓平台: ```bash cordova platform add android ``` 如图,添加安卓平台成功,注意要 **确保输出的 Target SDK 和 Compile SDK 版本一致**: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/vlFooBWv0zxR8sFy.webp) 如果不一致,可能会影响 APP 的运行。可以修改 `config.xml` 的 targetSdkVersion 来修改版本号: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/PVv5ud67yysriIrj.webp) ### 添加插件 由于我的项目需要调用摄像头,所以要添加对应的插件,执行下列命令: ```bash cordova plugin add cordova-plugin-camera ``` 添加插件成功: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/YDj1zN8L2oU0b6Wo.webp) ### 打包运行安卓 APP #### 打包 安装完插件后,执行 `cordova build` 命令可以打包 Android apk: ```bash cordova build android ``` 看到下列信息表示打包成功: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/tzs0auCYoOwt53LS.webp) 得到 apk 包后,有 2 种运行方式: #### 手机运行 可以直接将 apk 包发送到手机安装运行: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/HXKmxlsRF8EaF4Dn.webp) 运行效果如图: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/7Pscv21lRGtzjrFc.webp) ![](https://pic.code-nav.cn/post_picture/1601072287388278786/2IyKJy8Lh1wbhkdC.webp) #### 电脑运行 先打开 Android Studio 并启动安卓虚拟设备,然后执行 `cordova run` 命令: ```bash cordova run android ``` 就可以将 apk 安装到虚拟设备中,并且运行 APP 了,效果如图: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/8548RhgfI7Sv4Zvv.webp) ### 常见报错 打包运行是最容易遇到报错的地方,可能会遇到很多种报错,比如缺少插件、缺少文件、无法安装依赖、无法运行等等,建议直接把报错信息发给 AI,让它帮你解决。 下面鱼皮分享一些自己遇到的坑点。 #### 1、项目缺少文件 比如鱼皮的项目缺少了图标文件: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/P0FGXfw2XszdRTxE.webp) AI 尝试帮我创建图标: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/zElmwSTmtJmQqhyN.webp) 或者简单粗暴,移除配置文件中对图标的引用: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/4oSGERpl6pIhlmhe.webp) #### 2、缺少环境变量 如果环境搭建不顺利,可能会遇到下列报错,根据报错信息去进行对应的配置即可: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/HVaoJwUb3jtJ1yHN.webp) #### 3、命令执行失败 执行 `cordova run` 报错命令执行失败,可能是因为没有配置 `cmdline-tools` 到环境变量 Path 中。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/wp9CXROUx4qjOQt5.webp) #### 4、Gradle 无法安装 明明已经安装了 Gradle,但是 Cordova 仍然会安装 Gradle,而且可能因为网络原因下载失败: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/rs41w7ECVUMs57sR.webp) 这时,我们可以配置环境变量 `CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL`,指定从本地下载 Gradle。环境变量的值设置为我们自己下载的 Gradle 压缩包的路径。 ![](https://pic.code-nav.cn/post_picture/1601072287388278786/H6BtW3Mbzgdc5EPd.webp) 如果修改配置后再次执行打包命令还是报错,建议删除项目内的 `platforms/android/.gradle` 缓存,然后重试。 ## 四、已有项目打包为 APP 刚刚实战了直接用 AI 生成 Cordova APP 项目的方式,如果我们已经有现成的网站项目,也能够很方便地打包为 APP。 比如现在鱼皮有一个消消乐网页游戏项目,让我们来包装为 APP: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/AJNVvdQPUoj0abVK.webp) 1)先创建 cordova 项目: ```bash cordova create yu-game-web-app ``` 2)把已有的网页文件复制到 www 目录下: ![](https://pic.code-nav.cn/post_picture/1601072287388278786/LUqQLZ2IQKHpSE4u.webp) 3)执行 cordova 命令添加 Android 平台: ```bash cordova platform add android ``` 4)最后,打包或者直接运行: ```bash cordova run android ``` 运行成功的效果如图,还是很 nice 的~ ![](https://pic.code-nav.cn/post_picture/1601072287388278786/cAtGFfera9ulYiyk.webp) ## 最后 OK,教程到这里就结束了,由于缺少设备等原因,IOS 就先不给大家演示了。 最后给大家一些建议,Cordova 比较适合中小型网站项目,尤其适合已经有网站项目想快速转为 APP 的场景;但如果你需要搞一个复杂的大项目,依赖很多移动设备的原生能力,使用 Cordova 就不是很合适了,不如 Flutter。尤其是没有编程能力的同学来说,建议不要直接用 AI 生成复杂的 Cordova APP,很可能出现你搞不定的代码问题,但是做些小游戏、小工具还是很不错的。也希望我的分享对大家有帮助吧,想获取更多编程和 AI 干货的朋友记得关注鱼皮哦,拜拜~ ## 更多 💻 编程学习交流:[编程导航](https://www.codefather.cn/) 📃 简历快速制作:[老鱼简历](https://laoyujianli.com) ✏️ 面试刷题神器:[面试鸭](https://mianshiya.com) 📖 AI 学习指南:[AI 知识库](https://ai.codefather.cn/)

下载 APP