你現在看到的 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 cordova

Cordova 支持將網站打包為 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 種生成模式：

1. 先創建 Cordova 項目，然后在該項目內進行 AI 代碼生成。告訴 AI 你要創建一個兼容 Cordova APP 的網站，直接讓 AI 生成兼容 APP 的代碼。這樣做的好處是生成的代碼 可以使用 Cordova 插件調用系統原生的能力，比如調用相機進行拍照。

2. 在 Cordova 項目外單獨用 AI 生成網站項目，AI 不會關心你是否要把項目轉為 Cordova APP，然后再把生成好的網站移動到 Cordova 項目中。這樣做的好處是生成的網站代碼更容易運行，同樣 適合你已經有現成網站項目 的場景。

下面兩種方式我都會給大家演示，先講第一種模式，直接讓 AI 生成一個【表情包生成器】的 Cordova APP。

用 Cursor 打開剛剛創建的 Cordova 項目目錄，給 AI 輸入下列提示詞，提示詞中需要包含 Cordova，并且提到 兼容性：

請幫我開發一個【移動端表情包生成器】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 并且運行的命令，要依次添加安卓平臺、安裝插件、打包、運行。

這些命令我們等會兒就會用到，現在先不要自動執行，因為生成的代碼不一定直接可用，我們需要先利用網頁端進行調試。

網頁瀏覽

可以直接雙擊生成的 HTML 文件 www/index.html 查看效果；當然，更推薦的是通過 cordova 命令添加平臺并運行。

先添加瀏覽器平臺：

cordova platform add browser

如果你在執行命令時遇到了報錯，可以直接問 AI，比如魚皮遇到了缺少命令執行權限的錯誤：

解決方案是，執行下列命令來修改 PowerShell 的執行策略：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

添加平臺成功后，可以輸入 cordova run 命令運行平臺：

cordova run browser

然后就能夠查看到網站的運行效果了。需要注意的是，因為 Cordova Browser 平臺的特殊性，通過這個命令運行的網頁效果可能和直接雙擊、或者啟動本地服務器運行有區別。

除了上面的命令外，如果你想快速調試多個不同的平臺，可以運行下列命令，統一查看各個平臺：

cordova serve --port 8000

添加安卓平臺

接下來執行類似的命令來添加安卓平臺：

cordova platform add android

如圖，添加安卓平臺成功，注意要 確保輸出的 Target SDK 和 Compile SDK 版本一致：

如果不一致，可能會影響 APP 的運行。可以修改 config.xml 的 targetSdkVersion 來修改版本號：

添加插件

由于我的項目需要調用攝像頭，所以要添加對應的插件，執行下列命令：

cordova plugin add cordova-plugin-camera

添加插件成功：

打包運行安卓 APP

打包

安裝完插件后，執行 cordova build 命令可以打包 Android apk：

cordova build android

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

得到 apk 包后，有 2 種運行方式：

手機運行

可以直接將 apk 包發送到手機安裝運行：

運行效果如圖：

電腦運行

先打開 Android Studio 并啟動安卓虛擬設備，然后執行 cordova run 命令：

cordova run android

就可以將 apk 安裝到虛擬設備中，并且運行 APP 了，效果如圖：

常見報錯

打包運行是最容易遇到報錯的地方，可能會遇到很多種報錯，比如缺少插件、缺少文件、無法安裝依賴、無法運行等等，建議直接把報錯信息發給 AI，讓它幫你解決。

下面魚皮分享一些自己遇到的坑點。

1、項目缺少文件

比如魚皮的項目缺少了圖標文件：

AI 嘗試幫我創建圖標：

或者簡單粗暴，移除配置文件中對圖標的引用：

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：

1）先創建 cordova 項目：

cordova create yu-game-web-app

2）把已有的網頁文件復制到 www 目錄下：

3）執行 cordova 命令添加 Android 平臺：

cordova platform add android

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

cordova run android

運行成功的效果如圖，還是很 nice 的~

最后

OK，教程到這里就結束了，由于缺少設備等原因，IOS 就先不給大家演示了。

最后給大家一些建議，Cordova 比較適合中小型網站項目，尤其適合已經有網站項目想快速轉為 APP 的場景；但如果你需要搞一個復雜的大項目，依賴很多移動設備的原生能力，使用 Cordova 就不是很合適了，不如 Flutter。尤其是沒有編程能力的同學來說，建議不要直接用 AI 生成復雜的 Cordova APP，很可能出現你搞不定的代碼問題，但是做些小游戲、小工具還是很不錯的。也希望我的分享對大家有幫助吧，想獲取更多編程和 AI 干貨的朋友記得關注魚皮哦，拜拜~

更多編程學習資源

• Java前端程序員必做項目實戰教程+畢設網站

• 程序員免費編程學習交流社區（自學必備）

• 程序員保姆級求職寫簡歷指南（找工作必備）

• 程序員免費面試刷題網站工具（找工作必備）

• 最新Java零基礎入門學習路線 + Java教程

• 最新Python零基礎入門學習路線 + Python教程

• 最新前端零基礎入門學習路線 + 前端教程

• 最新數據結構和算法零基礎入門學習路線 + 算法教程

• 最新C++零基礎入門學習路線、C++教程

• 最新數據庫零基礎入門學習路線 + 數據庫教程

• 最新Redis零基礎入門學習路線 + Redis教程

• 最新計算機基礎入門學習路線 + 計算機基礎教程

• 最新小程序入門學習路線 + 小程序開發教程

• 最新SQL零基礎入門學習路線 + SQL教程

• 最新Linux零基礎入門學習路線 + Linux教程

• 最新Git/GitHub零基礎入門學習路線 + Git教程

• 最新操作系統零基礎入門學習路線 + 操作系統教程

• 最新計算機網絡零基礎入門學習路線 + 計算機網絡教程

• 最新設計模式零基礎入門學習路線 + 設計模式教程

• 最新軟件工程零基礎入門學習路線 + 軟件工程教程

總結

以上是生活随笔為你收集整理的不写代码，让 AI 生成手机 APP！保姆级教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。