miniprogram-development

微信小程式開發技能，用於建置、除錯、預覽、測試、發布及優化小程式專案。當使用者要求建立、開發、修改、除錯、預覽、測試、部署、發布、上線、審查或優化微信小程式、小程式頁面、元件、tabBar、路由、導航、圖示資源、專案結構、專案配置、project.config.json、appid 設定、裝置預覽、真機驗證、微信開發者工具工作流程、miniprogram-ci 預覽/上傳流程或小程式發布流程時，應使用此技能。當使用者在小程式專案中明確提及 CloudBase、wx.cloud、Tencent CloudBase、騰訊雲開發或雲開發時，也應使用此技能。

70星標

4分支

更新於 2026/7/20

獲取技能源代碼

相關技能

frontend-testing15萬

next-cache-components-optimizer14萬

vitest11萬

SKILL.md

readonlyread-only

name

miniprogram-development

description

version

2.24.0

獨立安裝注意事項

如果此環境僅安裝了目前技能，請從 CloudBase 主入口開始，並使用已發布的 cloudbase/references/... 路徑來存取同級技能。

CloudBase 主入口：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md
目前技能原始來源：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/miniprogram-development/SKILL.md

對於隨目前技能目錄一起提供的檔案，請保留本機 references/... 路徑。當此檔案指向同級技能（例如 auth-tool 或 web-development）時，請使用該參考旁邊顯示的獨立備用 URL。

跨領域協定（在程式碼變更或上傳前必須執行）：

變更安全協定：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/references/protocols/change-safety-protocol.md
部署閘道：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/references/protocols/deployment-gate.md

啟用合約

在以下情況優先使用

請求內容與微信小程式結構、頁面、預覽、發布或 CloudBase 小程式整合相關。

在撰寫程式碼前閱讀，如果

使用者提及 wx.cloud、CloudBase 小程式、OPENID 或小程式部署/除錯工作流程。

同時也請閱讀

CloudBase 認證 -> ../auth-wechat/SKILL.md（獨立備用：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/auth-wechat/SKILL.md）
CloudBase 文件資料庫 -> ../no-sql-wx-mp-sdk/SKILL.md（獨立備用：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/no-sql-wx-mp-sdk/SKILL.md）
小程式微信支付或整合中心產生的支付功能 -> ../cloudbase-wechat-integration/SKILL.md（獨立備用：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-wechat-integration/SKILL.md；官方文件：https://docs.cloudbase.net/integration/wechat-pay-miniprogram/index.md）
UI 生成 -> 先閱讀 ../ui-design/SKILL.md（獨立備用：https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/ui-design/SKILL.md）

請勿用於

Web 認證流程或 Web SDK 特定的前端實作。
微信支付、支付回呼、退款或公眾號 OAuth 細節；這些情境請使用 cloudbase-wechat-integration。

常見錯誤 / 陷阱

為小程式生成 Web 風格的登入流程。
將 Web SDK 的假設混入 wx.cloud 專案。
在確認專案實際使用 CloudBase 之前就套用 CloudBase 的限制。
在未先遵循變更安全協定（cloudbase-platform/references/protocols/change-safety-protocol.md）的情況下進行程式碼或配置變更。
在未先完成 cloudbase-platform/references/protocols/deployment-gate.md 中的檢查之前就執行小程式上傳/發布。

何時使用此技能

當您需要以下事項時，請使用此技能進行微信小程式開發：

建置或修改小程式頁面和元件
組織小程式專案結構和配置
除錯、預覽或發布小程式專案
處理微信開發者工具工作流程
處理小程式執行時期行為、資源或頁面配置檔案
在明確需要時將 CloudBase 整合到小程式專案中

請勿用於：

Web 前端開發（使用 web-development）
純後端服務開發（視情況使用 cloudrun-development 或 cloud-functions）
僅 UI 設計任務而無小程式開發情境（使用 ui-design）

如何使用此技能（適用於程式碼代理）

從一般小程式工作流程開始
- 將微信小程式開發視為預設範圍
- 除非使用者或程式碼庫指示，否則不要假設專案使用 CloudBase
遵循小程式專案慣例
- 將小程式原始碼保留在已配置的小程式根目錄下
- 確保頁面檔案包含必要的配置檔案，例如 index.json
- 在建議預覽或 IDE 工作流程之前檢查 project.config.json
根據情境分流
- 如果任務涉及 CloudBase、wx.cloud、雲函數、CloudBase 資料庫/儲存或 CloudBase 身分處理，請閱讀 CloudBase 整合參考
- 如果任務涉及除錯、預覽、發布、微信開發者工具或無開發者工具工作流程，請閱讀除錯與預覽參考
- 如果任務涉及 tabBar、圖示資源或標籤間距，除非使用者明確要求圖示，否則優先使用下方僅文字的客製化 tabBar 預設值
僅在適用時使用 CloudBase 規則
- CloudBase 是一個重要的小程式整合路徑，但不是通用需求
- 僅在專案使用 CloudBase 時才套用 CloudBase 特定的認證、資料庫、儲存或雲函數限制
建議正確的預覽/除錯路徑
- 優先使用微信開發者工具進行模擬器、面板式除錯、預覽和真機驗證
- 如果微信開發者工具不可用，請在適當情況下使用 miniprogram-ci 進行預覽、上傳和 npm 建置工作流程

微信小程式開發規則

一般專案規則

專案結構
- 小程式程式碼應遵循 project.config.json 中配置的專案根目錄
- 保持頁面層級檔案完整，包括 .json 配置檔案
- 確保引用的本機資源確實存在，以避免編譯失敗
配置檢查
- 在開啟、預覽或發布專案前檢查 project.config.json
- 當需要實際預覽、上傳或微信開發者工具工作流程時，確認 appid 可用
- 確認 miniprogramRoot 和相關路徑設定正確
資源處理
- 對於 tabBar，當使用者未明確需要圖示時，預設使用僅文字的客製化 tabBar。這樣可以避免圖示資源處理、移除預留的圖示空間，並使標籤區域更容易對齊。
- 僅在使用者明確要求標籤圖示或設計需要時，才生成本機圖示資源並配置 iconPath / selectedIconPath。
- 生成本機資源引用（如圖示）時，確保檔案已下載到專案中。
- 保持檔案路徑穩定且與小程式配置檔案一致。

簡單 `tabBar` 的建議預設值

使用 tabBar.custom = true，在 app.json 中僅保留 pagePath 和 text，並在客製化元件中渲染僅文字項目，這樣就沒有圖示插槽，也不會在標籤上方產生額外空白區域。

app.json

{
  "tabBar": {
    "custom": true,
    "list": [
      { "pagePath": "pages/index/index", "text": "首頁" },
      { "pagePath": "pages/travel/travel", "text": "行程" },
      { "pagePath": "pages/my/my", "text": "我的" }
    ]
  }
}

保持客製化 tabBar 佈局為僅文字，並使用 flex 置中或匹配 height 和 line-height 來移除標籤上方的空白區域。僅在使用者明確想要基於圖示的標籤時，才切換為下載的本機圖示。

CloudBase 作為小程式子情境

如果使用者明確使用 CloudBase、wx.cloud、Tencent CloudBase、騰訊雲開發或雲開發，請遵循 CloudBase 整合參考
在 CloudBase 小程式專案中，適當使用 wx.cloud API 和 CloudBase 環境配置
不要將 CloudBase 特定規則套用至非 CloudBase 小程式專案

除錯、預覽與發布

如果微信開發者工具可用，請將其作為模擬器除錯、面板檢查、預覽和裝置驗證的主要路徑
如果微信開發者工具不可用，請使用 miniprogram-ci 作為預覽、上傳和 npm 建置相關自動化的備用路徑
有關詳細工作流程，請閱讀除錯與預覽參考

最小專案骨架

app.js

App({
  onLaunch() {
    console.log("小程式已啟動");
  },
});

pages/index/index.js

Page({
  data: {
    message: "Hello CloudBase 小程式",
  },
});

pages/index/index.wxml

<view class="page">
  <text>{{message}}</text>
</view>

pages/index/index.json

{
  "navigationBarTitleText": "首頁"
}

project.config.json

{
  "appid": "your-mini-program-appid",
  "projectname": "cloudbase-mini-program",
  "miniprogramRoot": "./",
  "compileType": "miniprogram"
}

參考資料

CloudBase 小程式整合 — 當小程式專案明確整合 CloudBase 時使用
微信開發者工具除錯與預覽 — 用於除錯、預覽、發布和無開發者工具備用工作流程
常見陷阱 — 在生成可選鏈、TDesign 樣式、Canvas + 儲存和環境問題的程式碼前閱讀

您可能也喜歡

camsnap

385Ktesting-qa

Capture frames or clips from RTSP/ONVIF cameras.

steipete

獲取

fsharp-testing

238Ktesting-qa

F# testing patterns with xUnit, FsUnit, Unquote, FsCheck property-based testing, integration tests, and test organization best practices.

affaan-m

獲取

dogfood

217Ktesting-qa

Exploratory QA of web apps: find bugs, evidence, reports.

nousresearch

獲取

繼續探索

瀏覽 testing-qa 熱門 Skills 最近更新

miniprogram-development

相關技能

獨立安裝注意事項

啟用合約

在以下情況優先使用

在撰寫程式碼前閱讀，如果

同時也請閱讀

請勿用於

常見錯誤 / 陷阱

何時使用此技能

如何使用此技能（適用於程式碼代理）

微信小程式開發規則

一般專案規則

簡單 tabBar 的建議預設值

CloudBase 作為小程式子情境

除錯、預覽與發布

最小專案骨架

參考資料

您可能也喜歡

camsnap

fsharp-testing

dogfood

繼續探索

簡單 `tabBar` 的建議預設值