本文へ移動
cccskills
無料GitHub で公開

miniprogram-development

WeChat Mini Program development skill for building, debugging, previewing, testing, publishing, and optimizing mini program projects. This skill should be used when users ask to create, develop, modify, debug, preview, test, deploy, publish, launch, review, or optimize WeChat Mini Programs, mini program pages, components, `tabBar`, routing, navigation, icon assets, project structure, project configuration, `project.config.json`, `appid` setup, device preview, real-device validation, WeChat Developer Tools Nightly workflows, `wechatide` CLI, WeChat IDE Skills/MCP, console/network debugging, `miniprogram-ci` preview/upload flows, or mini program release processes. It should also be used when users explicitly mention CloudBase, `wx.cloud`, Tencent CloudBase, 腾讯云开发, 微信云开发, or 云开发 in a mini program project.

インストール方法を見る

含まれるファイル(5)

  • SKILL.md11.2 KB
  • references/cloudbase-integration.md6.3 KB
  • references/devtools-debug-preview.md7.3 KB
  • references/pitfalls.md2.7 KB
  • references/wxide-vs-cloudbase-mcp.md2.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Standalone Install Note

If this environment only installed the current skill, start from the CloudBase main entry and use the published cloudbase/references/... paths for sibling skills.

  • CloudBase main entry: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md
  • Current skill raw source: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/miniprogram-development/SKILL.md

Keep local references/... paths for files that ship with the current skill directory. When this file points to a sibling skill such as auth-tool or web-development, use the standalone fallback URL shown next to that reference.

Cross-cutting protocols (required before code changes or uploads):

  • Change Safety Protocol: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/references/protocols/change-safety-protocol.md
  • Deployment Gate: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/references/protocols/deployment-gate.md

Activation Contract

Use this first when

  • The request is about WeChat Mini Program structure, pages, preview, publishing, or CloudBase mini program integration.

Read before writing code if

  • The user mentions wx.cloud, CloudBase mini programs, OPENID, mini program deployment/debug workflows, Nightly DevTools, wechatide, or WeChat IDE Skills.

Then also read

  • CloudBase auth -> ../auth-wechat/SKILL.md (standalone fallback: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/auth-wechat/SKILL.md)
  • CloudBase document DB -> ../no-sql-wx-mp-sdk/SKILL.md (standalone fallback: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/no-sql-wx-mp-sdk/SKILL.md)
  • Mini Program WeChat Pay or Integration Center generated payment functions -> ../cloudbase-wechat-integration/SKILL.md (standalone fallback: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-wechat-integration/SKILL.md; official docs: https://docs.cloudbase.net/integration/wechat-pay-miniprogram/index.md)
  • UI generation -> ../ui-design/SKILL.md (standalone fallback: https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/ui-design/SKILL.md) first

Do NOT use for

  • Web auth flows or Web SDK-specific frontend implementation.
  • WeChat Pay, payment callbacks, refunds, or Official Account OAuth details; use cloudbase-wechat-integration for those scenarios.

Common mistakes / gotchas

  • Generating a Web-style login flow for mini programs.
  • Mixing Web SDK assumptions into wx.cloud projects.
  • Applying CloudBase constraints before confirming the project actually uses CloudBase.
  • Assuming Stable WeChat Developer Tools includes Nightly Skills/wechatide (it may not).
  • Forcing CloudBase MCP Tencent Cloud login for daily mini program cloud ops when Nightly wechatide already works.
  • Inventing wechatide tool names or flags instead of using --help / Nightly tools.yaml.
  • Making code or configuration changes without first following the Change Safety Protocol (cloudbase-platform/references/protocols/change-safety-protocol.md).
  • Performing mini program upload/publish without first completing the checks in cloudbase-platform/references/protocols/deployment-gate.md.

When to use this skill

Use this skill for WeChat Mini Program development when you need to:

  • Build or modify mini program pages and components
  • Organize mini program project structure and configuration
  • Debug, preview, or publish mini program projects
  • Work with WeChat Developer Tools workflows
  • Handle mini program runtime behavior, assets, or page config files
  • Integrate CloudBase in a mini program project when explicitly needed

Do NOT use for:

  • Web frontend development (use web-development)
  • Pure backend service development (use cloudrun-development or cloud-functions as appropriate)
  • UI design-only tasks without mini program development context (use ui-design)

How to use this skill (for a coding agent)

  1. Start with the general mini program workflow

    • Treat WeChat Mini Program development as the default scope
    • Do not assume the project uses CloudBase unless the user or codebase indicates it
  2. Follow mini program project conventions

    • Keep mini program source under the configured mini program root
    • Ensure page files include the required configuration file such as index.json
    • Check project.config.json before suggesting preview or IDE workflows
  3. Route by scenario

    • If the task involves debugging, previewing, publishing, opening DevTools, console/network, or wechatide, read debug and preview reference first
    • If choosing between WeChat IDE Skills and CloudBase MCP, read WeChat IDE Skills vs CloudBase MCP
    • If the task involves CloudBase, wx.cloud, cloud functions, CloudBase database/storage, or CloudBase identity handling, read CloudBase integration reference
    • If the task involves tabBar, icon assets, or label spacing, prefer the text-only custom tabBar default below unless the user explicitly requires icons
  4. Use CloudBase rules only when applicable

    • CloudBase / 微信云开发 is an important mini program integration path, but not a universal requirement
    • Only apply CloudBase-specific auth, database, storage, or cloud function constraints when the project is using CloudBase
  5. Recommend the right preview/debug/cloud-ops path


WeChat Mini Program Development Rules

General Project Rules

  1. Project Structure

    • Mini program code should follow the project root configured in project.config.json
    • Keep page-level files complete, including .json configuration files
    • Ensure referenced local assets actually exist to avoid compile failures
  2. Configuration Checks

    • Check project.config.json before opening, previewing, or publishing a project
    • Confirm appid is available when a real preview, upload, or WeChat Developer Tools workflow is required
    • Confirm miniprogramRoot and related path settings are correct
  3. Resource Handling

    • For tabBar, prefer a text-only custom tabBar by default when the user does not explicitly need icons. This avoids icon asset handling, removes reserved icon space, and makes the label area easier to align.
    • Only generate local icon assets and configure iconPath / selectedIconPath when the user explicitly asks for tab icons or the design requires them.
    • When generating local asset references such as icons, ensure the files are downloaded into the project.
    • Keep file paths stable and consistent with mini program config files.

Recommended default for simple tabBar

Use tabBar.custom = true, keep only pagePath and text in app.json, and render text-only items in the custom component so there is no icon slot and no extra blank area above the label.

app.json

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

Keep the custom tabBar layout text-only, and use flex centering or matching height and line-height to remove the blank area above the label. Switch to downloaded local icons only when the user explicitly wants icon-based tabs.

CloudBase as a Mini Program Sub-Scenario

  • If the user explicitly uses CloudBase, wx.cloud, Tencent CloudBase, 腾讯云开发, or 云开发, follow the CloudBase integration reference
  • In CloudBase mini program projects, use wx.cloud APIs and CloudBase environment configuration appropriately
  • Do not apply CloudBase-specific rules to non-CloudBase mini program projects

Debugging, Preview, and Publishing

  • Prefer Nightly DevTools + wechatide for open project, compile, simulator, console/network debug, preview, upload, and daily cloud ops (WeChat login — no separate Tencent Cloud login)
  • Always pass required context: -c <clientName>, absolute --project, valid appid, and cloud env when needed
  • If Nightly / wechatide is not available, use miniprogram-ci as the fallback for preview/upload/npm, and CloudBase MCP for cloud resources; tell the user to install Nightly for full Skills/MCP
  • For detailed workflows, read debug and preview reference and WeChat IDE Skills vs CloudBase MCP

Minimal project skeleton

app.js

App({
  onLaunch() {
    console.log("Mini Program launched");
  },
});

pages/index/index.js

Page({
  data: {
    message: "Hello CloudBase Mini Program",
  },
});

pages/index/index.wxml

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

pages/index/index.json

{
  "navigationBarTitleText": "Home"
}

project.config.json

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

References

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

使用 AACT (Aggregate Analysis of ClinicalTrials.gov) PostgreSQL 数据仓库进行批量、历史、聚合性临床试验数据挖掘。Use this skill when the user requests bulk SQL analysis over the full clinical trials data warehouse — historical trial trends, disease landscapes, similar-design matching, or multi-year aggregations across hundreds of thousands of NCT records. 触发场景包括:AACT 查询、临床试验批量分析、PostgreSQL 试验数据、全量 NCT 检索、试验数据挖掘、历史试验分析、clinical trials data warehouse、SQL trials、bulk trial analysis、disease landscape、试验设计相似性匹配、跨年度聚合、sponsor/phase/country 多维统计。**与 clinical-trials-v2 差异**:本 skill 走批量 SQL · 离线大数据(PostgreSQL);v2 走实时 API · 单查询。两者互补:单条 NCT 实时状态用 v2,百万级历史挖掘用本 skill。支持云端公共 PostgreSQL(aact-db.ctti-clinicaltrials.org · 零部署)和每日 dump 本地还原(高性能 · 离线)两种连接方式,自动检测优先用本地。跨平台(macOS/Linux/Windows)参数化 SQL 防注入,read-only 强制保护。

日本語の概要は準備中です。原文の説明を表示しています。

EthanYoQ/Skill-hub112026年10月5日 更新

使用 AACT (Aggregate Analysis of ClinicalTrials.gov) PostgreSQL 数据库进行大批量临床试验历史分析与数据挖掘。触发场景包括:AACT 查询、临床试验批量分析、PostgreSQL 试验数据、全量 NCT 检索、试验数据挖掘、clinical trials data warehouse、疾病领域全景分析、设计相似试验匹配、跨年度试验趋势聚合。本 skill 通过 SQL 接口处理百万级试验记录,支持云端公共 PostgreSQL 服务(aact-db.ctti-clinicaltrials.org)和每日 dump 本地还原两种连接方式,自动检测并优先使用本地高性能模式。

日本語の概要は準備中です。原文の説明を表示しています。

EthanYoQ/Skill-hub112026年10月5日 更新

Use when work produces a deliverable, factual claim, dataset, code change, decision, publication, deployment, automation, or irreversible action whose failure would matter; when the user asks for a quality gate, acceptance criteria, QA, completeness, validation, audit, evidence, preflight, release readiness, or a definition of done; or before claiming completion on medium- or high-risk work. Automatically decide whether a formal gate is warranted, derive task-specific pass/fail criteria, gather evidence, and block unsupported completion. Make sure to use this skill even when the user does not say "quality gate" if consequential work needs acceptance criteria or completion evidence. Skip formal gating for trivial, reversible, low-impact requests.

日本語の概要は準備中です。原文の説明を表示しています。

EthanYoQ/Skill-hub112026年10月5日 更新

Create a changeset file in .changeset/ that describes a user-facing change for the release notes

日本語の概要は準備中です。原文の説明を表示しています。

EthanYoQ/Skill-hub112026年10月5日 更新

Add a new competitor to the AI Visibility Tool Directory — researches the tool, generates data, takes a screenshot, and inserts into the codebase

日本語の概要は準備中です。原文の説明を表示しています。

EthanYoQ/Skill-hub112026年10月5日 更新

add-lang

無料

Add tree-sitter language support to codegraph end-to-end — wire the grammar + extractor, write tests, then benchmark extraction quality and retrieval value on 3 popular real-world repos. Use when the user runs /add-lang <language> or asks to add/support a new language (e.g. Lua, Elixir, Zig, OCaml) in codegraph.

日本語の概要は準備中です。原文の説明を表示しています。

EthanYoQ/Skill-hub112026年10月5日 更新

EthanYoQ のスキルをすべて見る

このスキルの問題を報告する