# Vibe Coding 小程式開發

你好，我是魚皮。

在前面的文章中，我們做了 Web 應用，這些應用可以在瀏覽器中訪問。現在，讓我們學習如何開發微信小程式，讓你的應用可以在微信中運行。

微信小程式是一種不需要下載安裝就能使用的應用，它依託於微信這個超級 APP，擁有龐大的用戶基礎。對於個人開發者來說，小程式是一個很好的展示平台，開發成本低，用戶觸達容易。

這篇文章，我會帶你做 2 個實用的小程式：記帳小程式和打卡小程式。同時，我會詳細講解小程式的開發流程和上線全流程，讓你能夠獨立完成一個小程式從開發到上線的全過程。

需要先說明的是，本節教程更多的是做一個思路和項目開發流程的指導，目的是引導大家學會使用 Vibe Coding 開發項目的方法，需要大家自行動手實踐。如果你需要更完整的 Vibe Coding 圖文和視頻教程，可以看看魚皮的原創項目實戰部分。



## 一、小程式開發基礎

在開始做項目之前，先了解一下小程式開發的基礎知識。

小程式是一種輕量級的應用，不需要下載安裝，用完即走。微信小程式是最流行的小程式平台，還有支付寶小程式、抖音小程式等。小程式的優勢在於：開發成本低（相比原生 APP）、用戶觸達容易（微信用戶基數大）、審核相對寬鬆、可以快速迭代。

小程式和 Web 應用有什麼區別？

簡單來說，小程式運行在微信環境中，有一些特殊的 API 和限制。比如小程式可以調用微信的支付、分享、掃碼等功能，但不能直接訪問外部連結。從開發角度看，小程式使用的是類似 Vue 的語法，有自己的組件系統和生命週期。**如果你會 Web 開發，學習小程式會很快。**

微信小程式使用的技術棧包括：WXML（類似 HTML）、WXSS（類似 CSS）、JavaScript。可以使用原生開發，也可以使用框架（如 Taro、uni-app）來開發跨平台小程式。對於 Vibe Coding 來說，我推薦使用原生開發，因為 AI 對原生語法的支持更好，生成的代碼質量更高。

開發小程式需要準備幾樣東西：

- 微信開發者帳號（免費註冊）
- 微信開發者工具（官方提供的 IDE）
- 一個項目創意

![微信開發者工具](https://pic.yupi.icu/1/image-20260112150540207.png)

註冊帳號很簡單，去微信公眾平台註冊一個小程式帳號，選擇個人類型即可。下載開發者工具也很簡單，去官網下載對應系統的版本。

用 Vibe Coding 開發小程式和開發 Web 應用類似，只是語法稍有不同。你需要告訴 AI 你在開發微信小程式，它會生成符合小程式規範的代碼。比如，你可以說：“請用微信小程式原生語法創建一個記帳頁面，包含金額輸入、分類選擇、備註輸入。” AI 會生成 WXML、WXSS 和 JS 文件。

💡 如果你想系統學習小程式開發，可以閱讀魚皮在編程導航上 [免費的保姆級小程式學習路線](https://www.codefather.cn/course/1789189862986850306/section/1789190355448471554)。



## 二、項目實戰 - 記帳小程式

記帳是一個很實用的功能，很多人都有記帳的需求。做一個記帳小程式，可以學習小程式的基本開發流程，包括數據存儲、頁面跳轉、組件使用等。

這個記帳小程式要實現基本的記帳功能。用戶可以添加收支記錄，包括金額、類型（收入/支出）、分類（餐飲、交通、工資等）、備註、日期。首頁顯示記錄列表和統計數據（本月收入、支出、結餘）。支持按日期篩選記錄。數據存儲在本地，使用微信的本地存儲 API。

![](https://pic.yupi.icu/1/demoweb13.png)

使用微信小程式原生開發，不使用任何框架。數據存儲使用 `wx.setStorageSync` 和 `wx.getStorageSync`。



### 開發步驟

1）第一步是註冊小程式帳號。去 [微信公眾平台](https://mp.weixin.qq.com/) 註冊一個小程式帳號。選擇個人類型，填寫基本信息，完成註冊。註冊後會得到一個 AppID，開發時需要用到。

2）第二步是下載開發者工具。去 [微信開放文檔](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 下載微信開發者工具，安裝後用微信掃碼登錄。

3）第三步是創建項目。打開開發者工具，點擊新建項目，填寫項目名稱，選擇項目目錄，填入 AppID，選擇不使用雲服務。點擊確定，會自動生成一個小程式項目模板。

4）第四步是了解項目結構。小程式項目的基本結構包括：

- pages 目錄：存放頁面，每個頁面有 wxml（頁面結構）、wxss（頁面樣式）、js（頁面邏輯）、json（頁面配置）四個文件
- utils 目錄：存放工具函數
- app.js：小程式邏輯
- app.json：小程式配置
- app.wxss：全局樣式

5）現在可以用 Cursor 打開項目目錄，開始和 AI 對話開發。

首先設計數據結構：

```
我要開發一個記帳小程式，請幫我設計數據結構。

需要存儲的信息：
- 金額
- 類型（收入/支出）
- 分類（餐飲、交通、購物、工資等）
- 備註
- 日期

請給出 JavaScript 對象的結構。
```

AI 會幫你設計合理的數據結構，包括每個字段的類型和說明。

然後創建首頁：

```
請用微信小程式原生語法創建首頁（pages/index/index）：

頂部顯示統計卡片：
- 本月收入（綠色）
- 本月支出（紅色）
- 本月結餘（藍色）

中間顯示記錄列表：
- 按日期分組顯示
- 每條記錄顯示：分類圖標、分類名稱、備註、金額
- 收入顯示綠色，支出顯示紅色

底部有一個大的"+"按鈕，點擊跳轉到添加頁面。

使用 Flex 佈局，界面要美觀。
```

這個提示詞詳細說明了首頁的佈局和樣式。AI 會生成完整的 WXML、WXSS 和 JS 代碼。

接著實現數據存儲：

```
創建 utils/storage.js 工具文件，封裝數據存儲操作：

1. saveRecord(record)：保存一條記錄
2. getRecords()：獲取所有記錄
3. deleteRecord(id)：刪除一條記錄
4. getMonthRecords(year, month)：獲取指定月份的記錄

使用 wx.setStorageSync 和 wx.getStorageSync 存儲數據。
記錄要有唯一 ID（可以用時間戳）。
```

這樣就把數據存儲邏輯封裝好了，後面用起來很方便。

然後創建添加頁面：

```
創建添加記錄頁面（pages/add/add）：

頂部有兩個 Tab：收入、支出

金額輸入區：
- 大號的金額輸入框
- 顯示"¥"符號

分類選擇區：
- 宮格佈局顯示分類圖標
- 收入分類：工資、獎金、理財、其他
- 支出分類：餐飲、交通、購物、娛樂、醫療、其他
- 選中的分類高亮顯示

備註輸入：
- 單行文本輸入框

日期選擇：
- 默認今天
- 點擊可以選擇日期

底部保存按鈕：
- 點擊保存記錄並返回首頁
```

接著實現統計功能：

```
在首頁實現統計功能：

1. 計算本月總收入：篩選本月的收入記錄，求和
2. 計算本月總支出：篩選本月的支出記錄，求和
3. 計算本月結餘：收入 - 支出

在頁面加載時和返回時刷新統計數據。
```

最後實現記錄列表：

```
在首頁實現記錄列表：

1. 獲取所有記錄，按日期倒序排列
2. 按日期分組顯示（今天、昨天、更早）
3. 每條記錄顯示分類圖標、名稱、備註、金額
4. 長按記錄可以刪除

實現下拉刷新功能。
```



### 開發技巧

在開發小程式時，有幾個技巧可以提高效率。首先，要利用好微信開發者工具的調試功能。可以在模擬器中預覽效果，也可以在真機上預覽。真機預覽需要用微信掃碼，可以看到真實的運行效果。

其次，小程式的數據存儲是同步的，使用 `wx.setStorageSync` 和 `wx.getStorageSync`。如果數據量大，建議使用異步版本 `wx.setStorage` 和 `wx.getStorage`，避免阻塞主線程。

另外，小程式的頁面跳轉有幾種方式：`wx.navigateTo`（保留當前頁面，可以返回）、`wx.redirectTo`（關閉當前頁面，不能返回）、`wx.switchTab`（跳轉到 tabBar 頁面）、`wx.navigateBack`（返回上一頁）。要根據場景選擇合適的方式。

最後，小程式有一些限制，比如包大小不能超過 2MB（分包後每個包不超過 2MB），要注意控制圖片大小和代碼體積。可以使用圖片壓縮工具壓縮圖片，使用代碼分包功能拆分代碼。



### 擴展思路

基礎版完成後，可以繼續擴展功能。比如添加預算設置，設置每月預算，超支時提醒；添加圖表展示，用圖表顯示收支趨勢；支持分類管理，用戶可以自定義分類；添加帳單導出，導出為 Excel 文件；支持多帳本，可以創建工作帳本、生活帳本等；集成雲同步，使用微信雲開發實現多設備同步。



## 三、項目實戰 - 打卡小程式

完成了記帳小程式後，讓我們來做一個涉及日曆和數據可視化的項目。打卡是一個很好的習慣養成工具，很多人用打卡來堅持學習、運動、早起等。做一個打卡小程式，可以學習小程式的日曆組件、數據可視化等功能。

這個打卡小程式要實現習慣打卡功能。用戶可以創建打卡項目（比如每天學習、每天運動），設置打卡目標（連續打卡天數）。每天可以打卡一次，打卡後顯示打卡成功。首頁顯示所有打卡項目和打卡狀態。日曆視圖顯示打卡歷史，打卡的日期標記為綠色。統計數據顯示總打卡天數、連續打卡天數、完成率等。

![](https://pic.yupi.icu/1/demoweb14.png)

使用微信小程式原生開發，數據存儲使用本地存儲。日曆組件可以使用第三方組件庫（如 Vant Weapp）或自己實現。



### 開發步驟

1）開發的第一步是設計數據結構。告訴 AI：

```
我要開發一個打卡小程式，請幫我設計數據結構。

打卡項目：
- id
- name（項目名稱，如"每天學習"）
- target（目標天數）
- created_at（創建時間）

打卡記錄：
- id
- project_id（關聯的項目）
- date（打卡日期，格式 YYYY-MM-DD）
- note（打卡備註，可選）
- created_at（打卡時間）

請給出數據結構和存儲方案。
```

AI 會幫你設計合理的數據結構，並說明如何存儲在本地。

2）創建項目列表頁

告訴 AI：

```
創建首頁（pages/index/index），顯示打卡項目列表：

每個項目卡片顯示：
- 項目名稱
- 今日是否已打卡（已打卡顯示綠色勾，未打卡顯示灰色圓圈）
- 連續打卡天數
- 總打卡天數
- 進度條（已打卡天數/目標天數）

底部有"添加項目"按鈕。

點擊項目卡片進入項目詳情頁。
點擊打卡按鈕進行打卡。
```

這個提示詞說明了首頁的佈局和交互。AI 會生成完整的頁面代碼。

3）實現打卡功能

告訴 AI：

```
實現打卡功能：

1. 檢查今天是否已打卡
2. 如果未打卡，創建打卡記錄
3. 保存到本地存儲
4. 顯示打卡成功提示
5. 刷新頁面數據

打卡時可以添加備註（可選）。
```

打卡功能要防止重複打卡，所以要先檢查今天是否已打卡。

4）創建項目詳情頁

告訴 AI：

```
創建項目詳情頁（pages/detail/detail）：

頂部顯示項目信息：
- 項目名稱
- 目標天數
- 已打卡天數
- 連續打卡天數

中間顯示日曆：
- 顯示當前月份
- 打卡的日期標記為綠色
- 今天標記為藍色邊框
- 可以切換月份

底部顯示打卡記錄列表：
- 按日期倒序顯示
- 顯示日期、備註

右上角有刪除項目按鈕。
```

5）實現統計功能

告訴 AI：

```
實現統計功能：

1. 總打卡天數：該項目的所有打卡記錄數
2. 連續打卡天數：從今天往前數，連續打卡的天數
3. 完成率：已打卡天數 / 目標天數
4. 最長連續打卡：歷史上最長的連續打卡天數

在項目詳情頁顯示這些統計數據。
```

連續打卡天數的計算比較複雜，要從今天往前遍歷，檢查每一天是否有打卡記錄，直到遇到沒有打卡的日期。AI 會幫你實現這個算法。

6）實現日曆組件

告訴 AI：

```
實現日曆組件：

1. 顯示當前月份的所有日期
2. 打卡的日期標記為綠色背景
3. 今天標記為藍色邊框
4. 可以切換上個月/下個月
5. 點擊日期可以查看當天的打卡備註

使用 Grid 佈局，每行 7 個日期（週日到週六）。
```

日曆組件的實現比較複雜，但 AI 可以幫你搞定。如果覺得自己實現太麻煩，也可以使用第三方組件庫，比如 Vant Weapp。



### 開發技巧

在開發打卡小程式時，有幾個技巧需要注意。首先是日期處理，JavaScript 的日期處理比較複雜，可以讓 AI 幫你封裝一些工具函數，比如獲取當月天數、判斷是否是今天、計算兩個日期的天數差等。

其次是連續打卡天數的計算。要從今天往前遍歷，檢查每一天是否有打卡記錄，直到遇到沒有打卡的日期。可以讓 AI 幫你實現這個算法，它會考慮各種邊界情況。

另外，日曆組件的實現比較複雜，如果覺得自己實現太麻煩，可以使用第三方組件庫。Vant Weapp 是一個很好的小程式 UI 組件庫，提供了日曆組件。可以讓 AI 幫你集成 Vant Weapp，使用它提供的日曆組件。

最後，打卡數據可能會越來越多，要注意性能優化。可以只加載最近 3 個月的數據，更早的數據按需加載，避免一次性加載太多數據導致頁面卡頓。



### 擴展思路

基礎版完成後，可以繼續擴展功能。比如添加打卡提醒，每天定時提醒用戶打卡；實現打卡分享，生成打卡海報分享到朋友圈；添加打卡排行榜，和好友比拼誰堅持得更久；實現打卡獎勵，連續打卡獲得勳章；支持數據導出，導出打卡記錄；集成雲同步，使用微信雲開發實現多設備同步。



## 四、小程式上線全流程

開發完成後，如何讓小程式上線呢？這裡詳細講解小程式的上線流程。

1）完善小程式信息

在微信公眾平台，完善小程式的基本信息：小程式名稱、簡介、頭像、類目（選擇合適的類目）。個人類型的小程式有一些限制，比如不能使用支付功能、不能使用某些類目。如果需要這些功能，需要註冊企業類型。

2）配置服務器域名

如果小程式需要調用後端 API，需要在微信公眾平台配置服務器域名。只有配置了的域名才能在小程式中訪問。注意，域名必須是 HTTPS 的，需要有 SSL 證書。如果是本地開發，可以在開發者工具中勾選"不校驗合法域名"。

3）上傳代碼

在微信開發者工具中，點擊右上角的 “上傳” 按鈕，填寫版本號和項目備註，點擊上傳。上傳後，代碼會提交到微信服務器。

4）提交審核

在微信公眾平台，進入 “版本管理”，可以看到剛才上傳的版本。點擊"提交審核"，填寫審核信息。審核信息包括：測試帳號（如果需要登錄）、測試說明（告訴審核人員如何測試）、隱私相關說明等。提交後，等待審核。審核時間說是 1 ~ 7 天，一般 1 ~ 2 天就能審核通過。

5）發布上線

審核通過後，會收到通知。在微信公眾平台，點擊 “發布” 按鈕，小程式就正式上線了。上線後，用戶可以通過搜索、掃碼、分享等方式訪問你的小程式。

6）版本更新

如果要更新小程式，重複上面的流程：上傳代碼 → 提交審核 → 發布上線。可以使用 “分階段發布” 功能，先發布給部分用戶，測試沒問題後再全量發布。

![](https://pic.yupi.icu/1/weapp-workflow%E5%A4%A7.jpeg)



### 常見審核問題

小程式審核可能會遇到一些問題，這裡列舉幾個常見的。

1）功能不完整。審核人員發現功能無法正常使用，比如點擊按鈕沒反應、頁面顯示錯誤等。要確保所有功能都能正常使用，提交前自己先完整測試一遍。

第二個是類目不符。小程式的功能和選擇的類目不符。比如你做的是工具類小程式，但選擇了社交類目。要選擇合適的類目，如果不確定，可以諮詢微信