yupi-translate-app[bot]
16 KiB
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）
- 一個項目創意
註冊帳號很簡單，去微信公眾平台註冊一個小程式帳號，選擇個人類型即可。下載開發者工具也很簡單，去官網下載對應系統的版本。
用 Vibe Coding 開發小程式和開發 Web 應用類似，只是語法稍有不同。你需要告訴 AI 你在開發微信小程式，它會生成符合小程式規範的代碼。比如，你可以說：“請用微信小程式原生語法創建一個記帳頁面，包含金額輸入、分類選擇、備註輸入。” AI 會生成 WXML、WXSS 和 JS 文件。
💡 如果你想系統學習小程式開發，可以閱讀魚皮在編程導航上 免費的保姆級小程式學習路線。
二、項目實戰 - 記帳小程式
記帳是一個很實用的功能，很多人都有記帳的需求。做一個記帳小程式，可以學習小程式的基本開發流程，包括數據存儲、頁面跳轉、組件使用等。
這個記帳小程式要實現基本的記帳功能。用戶可以添加收支記錄，包括金額、類型（收入/支出）、分類（餐飲、交通、工資等）、備註、日期。首頁顯示記錄列表和統計數據（本月收入、支出、結餘）。支持按日期篩選記錄。數據存儲在本地，使用微信的本地存儲 API。
使用微信小程式原生開發，不使用任何框架。數據存儲使用 wx.setStorageSync 和 wx.getStorageSync。
開發步驟
1）第一步是註冊小程式帳號。去 微信公眾平台 註冊一個小程式帳號。選擇個人類型，填寫基本信息，完成註冊。註冊後會得到一個 AppID，開發時需要用到。
2）第二步是下載開發者工具。去 微信開放文檔 下載微信開發者工具，安裝後用微信掃碼登錄。
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 文件；支持多帳本，可以創建工作帳本、生活帳本等；集成雲同步，使用微信雲開發實現多設備同步。
三、項目實戰 - 打卡小程式
完成了記帳小程式後，讓我們來做一個涉及日曆和數據可視化的項目。打卡是一個很好的習慣養成工具，很多人用打卡來堅持學習、運動、早起等。做一個打卡小程式，可以學習小程式的日曆組件、數據可視化等功能。
這個打卡小程式要實現習慣打卡功能。用戶可以創建打卡項目（比如每天學習、每天運動），設置打卡目標（連續打卡天數）。每天可以打卡一次，打卡後顯示打卡成功。首頁顯示所有打卡項目和打卡狀態。日曆視圖顯示打卡歷史，打卡的日期標記為綠色。統計數據顯示總打卡天數、連續打卡天數、完成率等。
使用微信小程式原生開發，數據存儲使用本地存儲。日曆組件可以使用第三方組件庫（如 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）版本更新
如果要更新小程式，重複上面的流程：上傳代碼 → 提交審核 → 發布上線。可以使用 “分階段發布” 功能，先發布給部分用戶，測試沒問題後再全量發布。
常見審核問題
小程式審核可能會遇到一些問題，這裡列舉幾個常見的。
1）功能不完整。審核人員發現功能無法正常使用，比如點擊按鈕沒反應、頁面顯示錯誤等。要確保所有功能都能正常使用，提交前自己先完整測試一遍。
第二個是類目不符。小程式的功能和選擇的類目不符。比如你做的是工具類小程式，但選擇了社交類目。要選擇合適的類目，如果不確定，可以諮詢微信