不写代码，让 AI 生成手机 APP！保姆级教程
你現(xiàn)在看到的 APP，是我完全用 AI 生成的，一行代碼都沒(méi)寫！怎么做到的呢？
大家好，我是程序員魚皮。AI 發(fā)展很快，現(xiàn)在隨隨便便就能生成一個(gè)網(wǎng)站，但是怎么純用 AI 開(kāi)發(fā)能在手機(jī)上運(yùn)行的 APP 呢？網(wǎng)上基本上沒(méi)有完整的教程。所以，我出手了，下面只用幾分鐘的時(shí)間，我會(huì)教大家如何利用 AI 生成 APP，依然是 保姆級(jí)教程。
? 本文對(duì)應(yīng)視頻，推薦觀看：https://bilibili.com/video/BV17HMcziEye
下面有請(qǐng)我們的主角 Cordova！
一、什么是 Cordova？
Apache Cordova 是一個(gè)開(kāi)源的移動(dòng)應(yīng)用開(kāi)發(fā)框架，允許開(kāi)發(fā)者使用 HTML、CSS 和 JavaScript 等 Web 技術(shù)開(kāi)發(fā) 跨平臺(tái) 的移動(dòng)應(yīng)用。它通過(guò)將 Web 技術(shù)封裝在本地容器中，使得開(kāi)發(fā)者可以編寫一次代碼，然后在 Android、iOS、Windows 等多個(gè)平臺(tái)上運(yùn)行。
Cordova 主要基于以下幾個(gè)核心組件實(shí)現(xiàn)，感興趣的同學(xué)可以了解一下：
也就是說(shuō)，想要開(kāi)發(fā) APP，我們只需要把網(wǎng)站文件交給 Cordova，根據(jù)需要裝一裝插件、改一改配置，然后直接使用它提供的構(gòu)建工具就能將 Web 應(yīng)用打包成原生 APP 應(yīng)用了（比如 APK 文件）！幾乎不涉及任何代碼編寫和開(kāi)發(fā)。
聽(tīng)起來(lái)很簡(jiǎn)單，有手就行？但是想使用 Cordova 開(kāi)發(fā) APP，必須要在電腦上安裝對(duì)應(yīng)的環(huán)境，比如 Android 和 IOS，而安裝環(huán)境的難度可以說(shuō)是 非常炸裂 了！
如果你自己折騰，可能至少要花個(gè)幾天的時(shí)間，會(huì)踩很多坑，到網(wǎng)上搜各種方案還不一定能搞定。所以我才做了這個(gè)教程，該踩的坑我都幫大家踩完了，會(huì) 用最短的時(shí)間帶你搞定環(huán)境，并且教你如何使用 AI + Cordova 生成 APP。開(kāi)始之前記得 點(diǎn)贊收藏三連 哦，拜托，我的頭發(fā)真的不多啦！
二、環(huán)境準(zhǔn)備
安裝 Cordova
首先我們要安裝 Cordova。Cordova 的運(yùn)行依賴 Node.js 和 NPM 前端工具，到 Node.js 官網(wǎng) 下載即可，會(huì)自動(dòng)安裝 NPM。
可以把 NPM 理解為快速安裝各種軟件的小工具，安裝完成后打開(kāi)終端，執(zhí)行下列命令安裝 Cordova：
npm install -g cordova
Cordova 支持將網(wǎng)站打包為 Android 和 IOS 移動(dòng)端、Electron 桌面端應(yīng)用。下面魚皮帶大家安裝我個(gè)人認(rèn)為難度最大的 Android 環(huán)境。注意，接下來(lái)的每一步，操作其實(shí)都不難，但是一定要仔細(xì)看！一個(gè)細(xì)節(jié)不注意可能就報(bào)錯(cuò)了！
安裝 Android 環(huán)境
首先，我們要根據(jù) Cordova 的版本來(lái)確定所需環(huán)境和工具的版本，由于我們安裝的 Cordova 是最新版本的，因此直接閱讀 最新的官方文檔 即可，比如我這里需要的依賴如下：
其中，最重要的是：
Java 17
Gradle 8.13
Android API 級(jí)別 >= 24
下面我們分別安裝這些依賴。
1、安裝 Java
Java 版本必須是 17，最好找個(gè)現(xiàn)成的 Windows 系統(tǒng)的 Java 安裝包：
安裝 Java 時(shí)建議選擇 自動(dòng)配置環(huán)境變量（包括 Path 和 JAVA_HOME），就不用自己手動(dòng)配置環(huán)境變量了。
安裝完成后，打開(kāi)終端執(zhí)行 java -version 命令查看版本號(hào)，看到下列輸出表示成功：
如果無(wú)法執(zhí)行命令，大概率是沒(méi)有配置 Path 環(huán)境變量。
2、安裝 Gradle
根據(jù)上面的版本號(hào)，Gradle 必須是 8.13，直接到 官網(wǎng) 下載二進(jìn)制壓縮包即可。
解壓下載完成的壓縮包，移動(dòng)到 不包含中文的路徑 中，然后配置環(huán)境變量，包括 Path 和 GRADLE_HOME：
打開(kāi)終端執(zhí)行 gradle -v 命令，查看版本號(hào)：
如果命令無(wú)法執(zhí)行，大概率是 Path 環(huán)境變量配置錯(cuò)誤。
3、安裝 Android
建議直接安裝 Android 開(kāi)發(fā)工具 Android Studio，會(huì)自動(dòng)安裝 Android 的開(kāi)發(fā) SDK 和運(yùn)行環(huán)境。
到官網(wǎng)下載 Android studio，運(yùn)行安裝包，按照步驟安裝即可：
安裝完成后，第一次打開(kāi) Android Studio 時(shí)，會(huì)提醒你安裝 Android SDK 環(huán)境：
注意不要把 SDK 組件安裝到包含中文的目錄下，好在安裝包也給了限制，不然又得栽倒一片人。。。
接下來(lái)無(wú)腦安裝即可，會(huì)自動(dòng)安裝各種 Android 開(kāi)發(fā)常用的工具、還有安卓設(shè)備模擬器：
這一步可能會(huì)有點(diǎn)煎熬，有些地區(qū)的朋友可能需要一些特殊的網(wǎng)絡(luò)支持，你懂的。
經(jīng)過(guò)了漫長(zhǎng)的等待，Android SDK 終于安裝完成，然后需要配置 Android 的環(huán)境變量 ANDROID_HOME：
還要配置 platform-tools 到 Path 中，里面有一些命令行工具：
配置完成后，我們打開(kāi) Android Studio，右上角進(jìn)入 SDK Manager 的設(shè)置，根據(jù) Cordova 的版本號(hào)要求，安裝對(duì)應(yīng) API Level 的 SDK，比如我這里安裝了 34 和 35 版本。
這一步可能也會(huì)比較慢，耐心等待安裝吧~
安裝完 SDK 后，再進(jìn)入 SDK 工具選項(xiàng)，安裝 Command-line Tools 命令行工具，之后在電腦上運(yùn)行安卓 apk 包時(shí)可能會(huì)用到：
同樣，把 Command-line Tools 添加到環(huán)境變量 Path 中，路徑為 %ANDROID_HOME%\cmdline-tools\latest\bin，這樣一來(lái)，很多工具可以直接在終端中使用了，比如 apkanalyzer。
4、安裝 Android 設(shè)備模擬器
下面我們要嘗試在自己的電腦上運(yùn)行 Android 手機(jī)模擬器，這樣調(diào)試程序更方便。
打開(kāi) Android Studio 的設(shè)備管理器，添加一個(gè)新設(shè)備：
選擇指定機(jī)型，建議選擇 API 版本高一點(diǎn)的，我這里選擇 Pixel 7：
安裝推薦的系統(tǒng)鏡像：
耐心等待后手機(jī)就創(chuàng)建成功了，直接運(yùn)行：
結(jié)果，報(bào)錯(cuò)啦！
如果你也遇到這種情況，可以在終端 進(jìn)入 Android 模擬器目錄 手動(dòng)運(yùn)行虛擬設(shè)備，這樣能夠看到詳細(xì)的錯(cuò)誤信息，有利于排查問(wèn)題。
比如我這里顯然是由于路徑包含了中文！可惡啊，當(dāng)時(shí)年少輕狂不自卑一個(gè)沒(méi)注意用了中文路徑。。。
解決方法很簡(jiǎn)單，手動(dòng)創(chuàng)建一個(gè)不包含中文路徑的 avd 虛擬設(shè)備目錄，然后設(shè)置環(huán)境變量 ANDROID_SDK_HOME：
然后再利用 Android Studio 創(chuàng)建一個(gè)設(shè)備并運(yùn)行，這次成功運(yùn)行了，恭喜你多了一個(gè)手機(jī)！
至此，環(huán)境終于搞定了，下面來(lái)實(shí)戰(zhàn) AI + Cordova 開(kāi)發(fā) APP。
三、AI + Cordova 實(shí)戰(zhàn)
創(chuàng)建項(xiàng)目
打開(kāi)終端，進(jìn)入你想要?jiǎng)?chuàng)建項(xiàng)目的目錄，先執(zhí)行 cordova create 命令來(lái)創(chuàng)建項(xiàng)目：
cordova create <你的項(xiàng)目英文名稱>
首次創(chuàng)建項(xiàng)目可能會(huì)有提示：
生成代碼
此處有 2 種生成模式：
先創(chuàng)建 Cordova 項(xiàng)目，然后在該項(xiàng)目?jī)?nèi)進(jìn)行 AI 代碼生成。告訴 AI 你要?jiǎng)?chuàng)建一個(gè)兼容 Cordova APP 的網(wǎng)站，直接讓 AI 生成兼容 APP 的代碼。這樣做的好處是生成的代碼 可以使用 Cordova 插件調(diào)用系統(tǒng)原生的能力，比如調(diào)用相機(jī)進(jìn)行拍照。
在 Cordova 項(xiàng)目外單獨(dú)用 AI 生成網(wǎng)站項(xiàng)目，AI 不會(huì)關(guān)心你是否要把項(xiàng)目轉(zhuǎn)為 Cordova APP，然后再把生成好的網(wǎng)站移動(dòng)到 Cordova 項(xiàng)目中。這樣做的好處是生成的網(wǎng)站代碼更容易運(yùn)行，同樣 適合你已經(jīng)有現(xiàn)成網(wǎng)站項(xiàng)目 的場(chǎng)景。
下面兩種方式我都會(huì)給大家演示，先講第一種模式，直接讓 AI 生成一個(gè)【表情包生成器】的 Cordova APP。
用 Cursor 打開(kāi)剛剛創(chuàng)建的 Cordova 項(xiàng)目目錄，給 AI 輸入下列提示詞，提示詞中需要包含 Cordova，并且提到 兼容性：
請(qǐng)幫我開(kāi)發(fā)一個(gè)【移動(dòng)端表情包生成器】Web APP，使用純前端技術(shù) + Cordova 實(shí)現(xiàn)。
如果需要，你可以通過(guò) Cordova 調(diào)用系統(tǒng)原生功能。
?
請(qǐng)生成完整的項(xiàng)目代碼，確保功能完整可用，而且所有功能都需要同時(shí)兼容網(wǎng)頁(yè)端和移動(dòng)設(shè)備。
?
## 功能需求
### 1. 圖片獲取
- 支持?jǐn)z像頭拍照
- 支持從本地選擇圖片文件
- 自動(dòng)縮放圖片到合適尺寸
?
### 2. 表情包模板
- 提供8-10個(gè)常用表情包模板（驚呆了、無(wú)語(yǔ)、贊、點(diǎn)贊、emo了等）
- 網(wǎng)格布局展示模板，點(diǎn)擊選擇應(yīng)用
?
### 3. 文字編輯
- 輸入自定義文字內(nèi)容
- 調(diào)整字體大小（20px-50px）
- 選擇文字顏色（白色、黑色、紅色等基礎(chǔ)色彩）
- 添加文字描邊效果
- 拖拽移動(dòng)文字位置
?
### 4. 貼紙功能
- 提供常用emoji表情貼紙（等5-10個(gè)）
- 提供簡(jiǎn)單裝飾貼紙（星星、愛(ài)心、箭頭等）
- 支持拖拽移動(dòng)和簡(jiǎn)單縮放
?
### 5. 保存功能
- 將編輯后的表情包導(dǎo)出為圖片
- 支持下載保存到本地
?
## 界面要求
- 移動(dòng)端優(yōu)先：適配手機(jī)屏幕，大按鈕設(shè)計(jì)
- 頁(yè)面布局：
- 主頁(yè)：拍照按鈕、選擇圖片按鈕
- 編輯頁(yè)：頂部工具欄 + 中央畫布 + 底部功能區(qū)
- 操作簡(jiǎn)單：實(shí)時(shí)預(yù)覽效果，一鍵保存
?
## 操作流程
1. 拍照或選擇圖片
2. 選擇表情包模板
3. 編輯文字內(nèi)容和樣式
4. 添加emoji或裝飾貼紙
5. 預(yù)覽效果并保存圖片
AI 生成的網(wǎng)站文件會(huì)放到 www 目錄下。生成代碼完成后，AI 可能會(huì)自動(dòng)提醒你打包 APP 并且運(yùn)行的命令，要依次添加安卓平臺(tái)、安裝插件、打包、運(yùn)行。
這些命令我們等會(huì)兒就會(huì)用到，現(xiàn)在先不要自動(dòng)執(zhí)行，因?yàn)樯傻拇a不一定直接可用，我們需要先利用網(wǎng)頁(yè)端進(jìn)行調(diào)試。
網(wǎng)頁(yè)瀏覽
可以直接雙擊生成的 HTML 文件 www/index.html 查看效果；當(dāng)然，更推薦的是通過(guò) cordova 命令添加平臺(tái)并運(yùn)行。
先添加瀏覽器平臺(tái)：
cordova platform add browser
如果你在執(zhí)行命令時(shí)遇到了報(bào)錯(cuò)，可以直接問(wèn) AI，比如魚皮遇到了缺少命令執(zhí)行權(quán)限的錯(cuò)誤：
解決方案是，執(zhí)行下列命令來(lái)修改 PowerShell 的執(zhí)行策略：
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
添加平臺(tái)成功后，可以輸入 cordova run 命令運(yùn)行平臺(tái)：
cordova run browser
然后就能夠查看到網(wǎng)站的運(yùn)行效果了。需要注意的是，因?yàn)?Cordova Browser 平臺(tái)的特殊性，通過(guò)這個(gè)命令運(yùn)行的網(wǎng)頁(yè)效果可能和直接雙擊、或者啟動(dòng)本地服務(wù)器運(yùn)行有區(qū)別。
除了上面的命令外，如果你想快速調(diào)試多個(gè)不同的平臺(tái)，可以運(yùn)行下列命令，統(tǒng)一查看各個(gè)平臺(tái)：
cordova serve --port 8000
添加安卓平臺(tái)
接下來(lái)執(zhí)行類似的命令來(lái)添加安卓平臺(tái)：
cordova platform add android
如圖，添加安卓平臺(tái)成功，注意要 確保輸出的 Target SDK 和 Compile SDK 版本一致：
如果不一致，可能會(huì)影響 APP 的運(yùn)行。可以修改 config.xml 的 targetSdkVersion 來(lái)修改版本號(hào)：
添加插件
由于我的項(xiàng)目需要調(diào)用攝像頭，所以要添加對(duì)應(yīng)的插件，執(zhí)行下列命令：
cordova plugin add cordova-plugin-camera
添加插件成功：
打包運(yùn)行安卓 APP
打包
安裝完插件后，執(zhí)行 cordova build 命令可以打包 Android apk：
cordova build android
看到下列信息表示打包成功：
得到 apk 包后，有 2 種運(yùn)行方式：
手機(jī)運(yùn)行
可以直接將 apk 包發(fā)送到手機(jī)安裝運(yùn)行：
運(yùn)行效果如圖：
電腦運(yùn)行
先打開(kāi) Android Studio 并啟動(dòng)安卓虛擬設(shè)備，然后執(zhí)行 cordova run 命令：
cordova run android
就可以將 apk 安裝到虛擬設(shè)備中，并且運(yùn)行 APP 了，效果如圖：
常見(jiàn)報(bào)錯(cuò)
打包運(yùn)行是最容易遇到報(bào)錯(cuò)的地方，可能會(huì)遇到很多種報(bào)錯(cuò)，比如缺少插件、缺少文件、無(wú)法安裝依賴、無(wú)法運(yùn)行等等，建議直接把報(bào)錯(cuò)信息發(fā)給 AI，讓它幫你解決。
下面魚皮分享一些自己遇到的坑點(diǎn)。
1、項(xiàng)目缺少文件
比如魚皮的項(xiàng)目缺少了圖標(biāo)文件：
AI 嘗試幫我創(chuàng)建圖標(biāo)：
或者簡(jiǎn)單粗暴，移除配置文件中對(duì)圖標(biāo)的引用：
2、缺少環(huán)境變量
如果環(huán)境搭建不順利，可能會(huì)遇到下列報(bào)錯(cuò)，根據(jù)報(bào)錯(cuò)信息去進(jìn)行對(duì)應(yīng)的配置即可：
3、命令執(zhí)行失敗
執(zhí)行 cordova run 報(bào)錯(cuò)命令執(zhí)行失敗，可能是因?yàn)闆](méi)有配置 cmdline-tools 到環(huán)境變量 Path 中。
4、Gradle 無(wú)法安裝
明明已經(jīng)安裝了 Gradle，但是 Cordova 仍然會(huì)安裝 Gradle，而且可能因?yàn)榫W(wǎng)絡(luò)原因下載失敗：
這時(shí)，我們可以配置環(huán)境變量 CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL，指定從本地下載 Gradle。環(huán)境變量的值設(shè)置為我們自己下載的 Gradle 壓縮包的路徑。
如果修改配置后再次執(zhí)行打包命令還是報(bào)錯(cuò)，建議刪除項(xiàng)目?jī)?nèi)的 platforms/android/.gradle 緩存，然后重試。
四、已有項(xiàng)目打包為 APP
剛剛實(shí)戰(zhàn)了直接用 AI 生成 Cordova APP 項(xiàng)目的方式，如果我們已經(jīng)有現(xiàn)成的網(wǎng)站項(xiàng)目，也能夠很方便地打包為 APP。
比如現(xiàn)在魚皮有一個(gè)消消樂(lè)網(wǎng)頁(yè)游戲項(xiàng)目，讓我們來(lái)包裝為 APP：
1）先創(chuàng)建 cordova 項(xiàng)目：
cordova create yu-game-web-app
2）把已有的網(wǎng)頁(yè)文件復(fù)制到 www 目錄下：
3）執(zhí)行 cordova 命令添加 Android 平臺(tái)：
cordova platform add android
4）最后，打包或者直接運(yùn)行：
cordova run android
運(yùn)行成功的效果如圖，還是很 nice 的~
最后
OK，教程到這里就結(jié)束了，由于缺少設(shè)備等原因，IOS 就先不給大家演示了。
最后給大家一些建議，Cordova 比較適合中小型網(wǎng)站項(xiàng)目，尤其適合已經(jīng)有網(wǎng)站項(xiàng)目想快速轉(zhuǎn)為 APP 的場(chǎng)景；但如果你需要搞一個(gè)復(fù)雜的大項(xiàng)目，依賴很多移動(dòng)設(shè)備的原生能力，使用 Cordova 就不是很合適了，不如 Flutter。尤其是沒(méi)有編程能力的同學(xué)來(lái)說(shuō)，建議不要直接用 AI 生成復(fù)雜的 Cordova APP，很可能出現(xiàn)你搞不定的代碼問(wèn)題，但是做些小游戲、小工具還是很不錯(cuò)的。也希望我的分享對(duì)大家有幫助吧，想獲取更多編程和 AI 干貨的朋友記得關(guān)注魚皮哦，拜拜~
更多編程學(xué)習(xí)資源
Java前端程序員必做項(xiàng)目實(shí)戰(zhàn)教程+畢設(shè)網(wǎng)站
程序員免費(fèi)編程學(xué)習(xí)交流社區(qū)（自學(xué)必備）
程序員保姆級(jí)求職寫簡(jiǎn)歷指南（找工作必備）
程序員免費(fèi)面試刷題網(wǎng)站工具（找工作必備）
最新Java零基礎(chǔ)入門學(xué)習(xí)路線 + Java教程
最新Python零基礎(chǔ)入門學(xué)習(xí)路線 + Python教程
最新前端零基礎(chǔ)入門學(xué)習(xí)路線 + 前端教程
最新數(shù)據(jù)結(jié)構(gòu)和算法零基礎(chǔ)入門學(xué)習(xí)路線 + 算法教程
最新C++零基礎(chǔ)入門學(xué)習(xí)路線、C++教程
最新數(shù)據(jù)庫(kù)零基礎(chǔ)入門學(xué)習(xí)路線 + 數(shù)據(jù)庫(kù)教程
最新Redis零基礎(chǔ)入門學(xué)習(xí)路線 + Redis教程
最新計(jì)算機(jī)基礎(chǔ)入門學(xué)習(xí)路線 + 計(jì)算機(jī)基礎(chǔ)教程
最新小程序入門學(xué)習(xí)路線 + 小程序開(kāi)發(fā)教程
最新SQL零基礎(chǔ)入門學(xué)習(xí)路線 + SQL教程
最新Linux零基礎(chǔ)入門學(xué)習(xí)路線 + Linux教程
最新Git/GitHub零基礎(chǔ)入門學(xué)習(xí)路線 + Git教程
最新操作系統(tǒng)零基礎(chǔ)入門學(xué)習(xí)路線 + 操作系統(tǒng)教程
最新計(jì)算機(jī)網(wǎng)絡(luò)零基礎(chǔ)入門學(xué)習(xí)路線 + 計(jì)算機(jī)網(wǎng)絡(luò)教程
最新設(shè)計(jì)模式零基礎(chǔ)入門學(xué)習(xí)路線 + 設(shè)計(jì)模式教程
最新軟件工程零基礎(chǔ)入門學(xué)習(xí)路線 + 軟件工程教程
總結(jié)
以上是生活随笔為你收集整理的不写代码，让 AI 生成手机 APP！保姆级教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 实测提速 60%！Maven Daemo
- 下一篇： 「Note」数据结构方向 - 数据结构进