# TRAE - AI 學習英雄小程序實戰

這是一個學習英雄微信小程序項目，通過遊戲化的方式幫助用戶學習任何主題。用戶輸入想學的主題，AI 自動生成相關的知識問答卡片，通過做選擇題的方式學習。

這是一個純 Vibe Coding 項目，主要講解如何使用 TRAE AI 編程工具快速開發微信小程序。通過自然語言描述需求，讓 AI 自動生成包含完整前端和後端的小程序代碼、並且利用 TRAE 集成數據庫和支付等服務。適合想學習 AI 開發小程序、學習 TRAE 工具的同學。

---

大家好，我是程序員魚皮。朋友們有沒有這樣的經歷：想學點新技術，打開文檔就頭疼，刷視頻又容易走神，買了一堆課程卻總是半途而廢。。。

反正我是經常這樣，學習焦慮症晚期患者了。

![](https://pic.yupi.icu/1/image-20250928214315214.png)

作為一名程序員，我早就想做個程序來治好自己的學習焦慮症，卻因為覺得麻煩一直拖延。直到現在 AI 編程能力足夠強大，我才終於出手了！通過 TRAE 只用了 1 天就完成了這個《學習英雄》小程序，讓學習像玩遊戲一樣輕鬆有趣~

![](https://pic.yupi.icu/1/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%BC%94%E7%A4%BA%E6%8B%BC%E5%9B%BE.png)

下面我先帶大家體驗一下這個小程序，然後會分享整個開發過程中用到的工具和技巧，依然是 **AI 項目開發的保姆級教程**。

點個收藏，我們開始吧！

> 推薦觀看視頻版：https://bilibili.com/video/BV1yMn3zuE7L

## 項目體驗

打開小程序，可以看到界面非常簡潔、有活力。點擊開始學習，然後輸入你想學習的任何主題，比如 Java 基礎。

![](https://pic.yupi.icu/1/image-20250928215038368.png)

AI 會根據主題自動生成相關的知識問答卡片。

![](https://pic.yupi.icu/1/image-20250928215106136.png)

然後你只需要點點點做選擇題，不用擔心做錯，因為每道題目都會有解釋，哪怕你之前完全沒聽說過這個主題，一樣可以讓你學下去。

![](https://pic.yupi.icu/1/image-20250928215137518.png)

除了技術知識外，你還可以嘗試更多主題，比如一個詞彙、一部電影、甚至是一個人。

![](https://pic.yupi.icu/1/%E5%A4%9A%E7%AD%94%E9%A2%98%E6%8B%BC%E5%9B%BE.png)

原本枯燥的概念通過問答的形式變得生動有趣，學習焦慮瞬間消失了~

你還可以查看自己的學習記錄，重新學習或者查看題解。

![](https://pic.yupi.icu/1/%E5%AD%A6%E4%B9%A0%E5%8E%86%E5%8F%B2%E6%8B%BC%E5%9B%BE.png)

沒事兒刷一刷，你就能成為學習英雄！

## 開發實現

如果是以前，這種小程序可能要做個好幾天。

但現在利用 TRAE IDE 的 AI 編程，我要帶大家 **不寫一行代碼**，把這個小程序做出來。

步驟：

1. 準備開發工具
2. 需求分析
3. 方案設計
4. 服務集成
5. 後端開發
6. 前端開發
7. 測試驗證
8. 持續優化

### 1、準備開發工具

既然要用 AI 開發，工具選擇很重要。這次我使用的 AI 編程工具是 [TRAE](https://www.trae.ai/)，因為最近它的 SOLO 模式實在太火爆了，我也想試一試。

區別於傳統的人類主導 + AI 輔助編程，所謂 SOLO 模式，是讓 **AI 主導任務並自動執行開發**，你只需要有一個想法，然後配合 AI 就能讓想法真正落地。

![](https://pic.yupi.icu/1/image-20250928220322788.png)

此外，既然要開發前端項目，肯定少不了 [Node.js 環境](https://nodejs.org/zh-cn/download)；既然要開發微信小程序，肯定少不了 [微信開發者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)，直接去對應的官網下載安裝就好。

![](https://pic.yupi.icu/1/%E4%B8%8B%E8%BD%BD%E5%B7%A5%E5%85%B7%E6%8B%BC%E5%9B%BE.png)

### 2、需求分析

準備好工具後，進入 Trae 的 SOLO 模式，打開比我臉都乾淨的項目文件夾。

![](https://pic.yupi.icu/1/image-20250928220647365.png)

首先我們要進行需求分析。

別想的太複雜，只需要把自己的想法用自然語言告訴 AI 就好。

比如我給 AI 提了這樣的需求：

```markdown
你是一位專業的程序員，請幫我開發《學習英雄 - AI 問答引導式學習》微信小程序。

用戶可以自主設置一個想學習（或測驗）的主題，由 AI 圍繞主題生成若干個有趣的知識問答卡片，通過闖關答題的形式引導用戶更輕鬆愉快地掌握知識。
```

![](https://pic.yupi.icu/1/image-20250928221154635.png)

AI 很快生成了詳細的產品需求文檔和技術架構文檔，很符合企業規範的開發流程。

![](https://pic.yupi.icu/1/image-20250928221128338.png)

看得出來 AI 已經有些迫不及待想寫代碼了，但是千萬別急，一定要先 **仔細確認需求文檔**。

AI 寫的還是不錯的，但不一定完全符合我們的預期。因此我們要人工重點關注要實現的核心功能，移除掉不需要的附加功能，先確保核心業務流程（P0 級需求）跑通。

![](https://pic.yupi.icu/1/image-20250928221334652.png)

**不要嫌這一步麻煩，現在多花 1 分鐘，以後節約 1 小時！**

一定要明確需求，防止 AI 做了不該做的功能。

這裡有個小技巧，可以利用 TRAE 集成的 Figma 設計工具，在這裡獲取到一些免費的產品 UI 原型圖。

![](https://pic.yupi.icu/1/image-20250928221519374.png)

可以點擊查看某個原型具體的設計，只需要選中你看上的原型圖，點擊添加到對話，TRAE 就會自動把原型圖關聯到發給 AI 的對話中，這個跨產品之間的交互我覺得還是蠻帥的（不過跟我學做項目的同學應該知道實現原理嘿嘿）。

![](https://pic.yupi.icu/1/image-20250928221618668.png)

不過生活需要驚喜，這裡我就讓 AI 自己發揮，看看會出現什麼創意~

### 3、方案設計

下面我們要進行方案設計，這以前是月薪幾萬的架構師幹的活，現在讓小 AI 幫我們 SOLO。

編寫這段 Prompt 時一定要注意幾個細節，**遵循最小化開發原則**，防止 AI 把簡單的事情搞複雜。

```markdown
我已經人工調整了產品需求文檔，移除了很多不必要的功能。請你根據我人工修改過的需求，重新生成技術架構文檔。要求：
1. 禁止增加需求文檔中沒有提到的功能
2. 遵循最小化開發原則，以實現功能為主，禁止提供實現功能之外的擴展，比如部署、監控、限流等
3. 遵循前後端分離原則
```

很快 AI 生成了完整的技術架構文檔，包括用什麼前端和後端技術、接口怎麼設計、數據表怎麼設計等等。

![](https://pic.yupi.icu/1/image-20250928221924096.png)

這裡我建議能看懂文檔的同學還是多發揮一些專業性，明確具體的技術選型，讓 AI 生成的代碼在自己的可控範圍內。比如我明確項目使用 Supabase 數據庫、使用 OpenRouter 對接 Gemini 大模型提供 AI 服務。

![](https://pic.yupi.icu/1/image-20250928221952548.png)

啥啥啥？這些都是啥？

別擔心，等會兒就會講。

![](https://pic.yupi.icu/1/image-20250928222144713.png)

看不懂文檔的同學也不用擔心，你就把自己想像成老闆或者產品經理，程序員同事吭哧吭哧拿了份技術方案給你，你就說 “怎麼實現我不管，這個需求明天上線！” 讓他放手幹就完了。

你要相信 AI，相信相信的力量~

### 4、服務集成

完成了方案設計，在正式進入開發前，我們還要準備項目依賴的服務。

把用戶數據存儲在哪裡？怎麼讓程序對接 AI 大模型？

這都是我們要解決的問題。

相比於自己手動安裝服務，可以直接使用 TRAE 提供的集成能力，不用專門去看官方文檔對接服務，直接傻瓜式安裝。

我們重點集成 2 個服務。

![](https://pic.yupi.icu/1/image-20250928222329915.png)

#### 集成 Supabase

[Supabase](https://supabase.com/) 是開源的後端即服務（BaaS）平台，提供數據庫存儲、用戶身份驗證、即時 API 等功能，可以幫助開發者快速構建和管理程序後端。

![](https://pic.yupi.icu/1/image-20250928222457606.png)

點擊連接按鈕，在彈出的頁面中完成創建 Supabase 賬號、創建組織、以及認證授權。

![](https://pic.yupi.icu/1/image-20250928222520491.png)

然後進入到 TRAE，看到組織成功顯示後，點擊創建一個新項目，填寫一些項目配置信息，然後點擊創建。

![](https://pic.yupi.icu/1/image-20250928222545479.png)

創建項目後回到 TRAE 刷新一下，點擊連接就可以了，就這麼簡單~

![](https://pic.yupi.icu/1/image-20250928222608471.png)

如果說之前 AI Vibe Coding 讓後端開發者爽翻了，那這波可以說是前端開發者贏麻了，簡單的項目都不用自己搭建後端了~

#### 集成 OpenRouter AI 服務

TRAE 能夠和多種 AI 服務集成，這裡我選擇 [OpenRouter](https://openrouter.ai/)，它的優點是可以通過統一的 API 對接各家大模型，比如 Gemini、GPT、Claude 等等。

![](https://pic.yupi.icu/1/image-20250928222649319.png)

首先到官網註冊登錄賬號，然後進入 API Keys 頁面創建一個調用 AI 的密鑰，然後在 TRAE 中配置並填寫密鑰，AI 服務就已經集成完畢了。

![](https://pic.yupi.icu/1/image-20250928222833273.png)

但是注意，要確保你有足夠的用量，否則可能調用失敗，或者報錯調用頻率太頻繁。

![](https://pic.yupi.icu/1/image-20250928222853247.png)

#### 集成 Stripe 支付服務

此外，你還可以集成 [Stripe 支付服務](https://docs.stripe.com/)，它可以讓你用最少的代碼給產品添加支付和訂閱功能。

![](https://pic.yupi.icu/1/image-20250928223013523.png)

只需要先到官網註冊賬號，它會自動給你提供一個沙盒測試環境、以及對應的 API 密鑰，你可以創建自己的產品並設置定價。

![](https://pic.yupi.icu/1/image-20250928223151134.png)

然後把這些信息填寫到 TRAE 配置中，之後 AI 編程時就會生成支付相關的代碼了。

![](https://pic.yupi.icu/1/image-20250928223346093.png)

但是由於微信小程序有一些限制，這裡我就先不接入了，大家了解一下就好，網頁端和 APP 產品接入還是很香的。

### 5、後端開發

準備工作完成後，我們終於要進入緊張刺激的開發環節了。

這裡要注意，由於 **AI 的上下文是有限的**，為了能更好地生成完整項目、減少 Bug，建議分個步驟：先生成後端代碼，人工校驗通過後，再生成前端代碼。

好，給 AI 輸入提示詞，先開發後端，確保項目可以正常運行：

```markdown
請你基於最新的產品需求文檔和技術架構文檔進行開發，優先開發後端，確保項目可以正常運行
```

我們可以使用 TRAE 提供的 Prompt 優化功能來一鍵優化提示詞。

![](https://pic.yupi.icu/1/%E4%BC%98%E5%8C%96%E6%8F%90%E7%A4%BA%E8%AF%8D.png)

嗯，確實比之前更嚴謹了。

點擊執行，請開始你的 SOLO~ AI 會先給出任務計劃：

![](https://pic.yupi.icu/1/image-20250928224232897.png)

然後自主操作終端執行命令、編寫後端配置文件和業務邏輯代碼、編寫數據庫建表語句等等，重要操作還會找我們主動確認，非常嚴謹。

![](https://pic.yupi.icu/1/image-20250928224300188.png)

看不懂也沒關係，讓他放手幹吧~

等待期間，你可以到編程導航上看看 [免費的編程學習路線](https://codefather.cn/)。TRAE 自帶消息通知功能，AI 完成任務後會提醒我們。

我感覺 TRAE 調教 AI 還是有一套的，他會自己驗證程序是否正常。不過由於我們還沒有填寫微信登錄所需的信息，接口無法完整調用是正常的。

![](https://pic.yupi.icu/1/image-20250928224350332.png)

一段時間後，AI 生成完畢，不僅生成了代碼，還很貼心地生成了後端的接口文檔。

![](https://pic.yupi.icu/1/image-20250928224437599.png)

哎，這個東西很有用哦。

### 6、前端開發

下面進行前端開發。

這裡一定要注意，不要接著之前的對話繼續寫提示詞了。

為什麼呢？

因為 AI 大模型的上下文是有限的，前面的操作已經消耗了不少上下文，為了防止 AI 上下文不足或者記憶混亂，我們生成前端時，重新開一個乾淨的對話來編寫提示詞。

![](https://pic.yupi.icu/1/image-20250928224735250.png)

提示詞中提供給 AI 產品需求文檔、技術架構文檔和後端接口文檔，就可以讓 AI 專注於前端代碼生成。

```markdown
你是一位專業的程序員，請幫我開發《學習英雄 - AI 問答引導式學習》微信小程序。

用戶可以自主設置一個想學習（或測驗）的主題，由 AI 圍繞主題生成若干個有趣的知識問答卡片，通過闖關答題的形式引導用戶更輕鬆愉快地掌握知識。

請你根據 @產品需求文檔 @技術架構文檔 @後端接口文檔，幫我生成完整可運行的微信小程序前端代碼。
注意：
1. 遵循最小功能原則，不要額外開發需求文檔沒提到的任何功能
2. 如果需要顯示圖片，請使用佔位圖片 picsum.photos 代替（比如 picsum.photos/200/300）
```

好，執行！

等待期間，你可以到 [面試鴨](https://www.mianshiya.com/) 上看看免費的面試題和刷題路線。

一段時間後，AI 生成完畢，一次性 SOLO 出了 20 多個文件！

![](https://pic.yupi.icu/1/image-20250928224830751.png)

雖然看著很爽，但老實說我是有點慌的，不知道能不能正常運行。

### 7、測試驗證

下面我們來到了激動人心的測試驗證環節。

首先需要打開微信開發者工具，導入已有項目文件夾，先選擇使用測試號開發調試項目。

![](https://pic.yupi.icu/1/image-20250928225118198.png)

打開項目後，我們先點擊右上角的 “測試號”，按照 [文檔](https://developers.weixin.qq.com/miniprogram/dev/devtools/sandbox.html) 的指引獲取到測試號的 AppID 和 AppSecret 密鑰：

![](https://pic.yupi.icu/1/image-20250928225220066.png)

然後手動填入到後端配置文件中，否則將無法正常微信登錄。

![](https://pic.yupi.icu/1/image-20250928225304614.png)

然後我們就可以編譯運行項目了。

結果，果然報錯了！

![](https://pic.yupi.icu/1/image-20250928225522618.png)

意料之中，意料之中。。。小程序開發比網頁開發還是更難一些的，畢竟微信開發者工具和文檔一直在更新。

![](https://pic.yupi.icu/1/image-20250928225618743.png)

不過沒關係，開發過程中難免遇到問題，解決方法很簡單，一句話：**報什麼錯誤，就把報錯信息發給 AI，讓 AI 來修復！**

像我這裡遇到了幾個典型的問題：

1）圖片路徑問題：利用 TRAE 的提示詞優化功能，能更好地指引 AI 按照指定的步驟修復 Bug

![](https://pic.yupi.icu/1/image-20250928225717687.png)

2）登錄失敗問題：點擊開發者工具右上角的 “詳情”，進入到本地設置中，勾選 “不校驗合法域名”

![](https://pic.yupi.icu/1/image-20250928225825654.png)

3）接口路徑問題：這可能是由於上下文過長導致的，讓 AI 整體修復前端調用後端接口的路徑和參數就好

![](https://pic.yupi.icu/1/image-20250928225903118.png)

4）環境配置問題：代碼