miniprogram-development

関連スキル（ローカルのみ）

関連する CloudBase スキルは、このスキルと一緒に配置されています。../auth-tool-cloudbase/SKILL.md のようなローカルの相対パスを使用してください。

参照先の関連スキルファイルがこの環境にない場合は、CloudBase プラグイン一式（または不足しているスキル）をインストールするようユーザーに依頼してください。リモートのスキルやプロトコルの Markdown を HTTP 経由で取得してエージェントのコンテキストに読み込んではいけません。

横断的なプロトコル（コード変更やデプロイの前に必須）：

• 変更安全性プロトコル：../cloudbase-platform/references/protocols/change-safety-protocol.md
• デプロイゲート：../cloudbase-platform/references/protocols/deployment-gate.md

デプロイ後（任意、非侵襲的）：ミニプログラムのアップロード／公開が成功したことを確認できた後、匿名化した共有用素材（ビジュアルカード＋そのまま貼り付けられる文章）の生成を一度だけ提案してもかまいません。同じ提案の中で、ケースウォールへの登録も任意で提案できます。提案のタイミング、必要な情報、匿名化に関する禁止事項、成果物の形式については、../cloudbase-platform/references/protocols/deployment-share.md を参照してください。断られた場合は再度提案しないでください。ユーザーに代わって公開または登録してはいけません。

有効化の条件

次の場合は最初に使用する

• WeChat ミニプログラムの構成、ページ、プレビュー、公開、または CloudBase ミニプログラム連携についての依頼。
• ミニプログラムアカウントの登録や主体種別（個人／個体事業主／企業主体、ミニプログラムの迅速な登録と認証、ミニプログラムの主体変更）についての質問、または DevTools の云開発項目がグレーアウトしている、環境が見つからないといった報告。

コードを書く前に読む

• wx.cloud、CloudBase ミニプログラム、OPENID、ミニプログラムのデプロイ／デバッグのワークフロー、Nightly DevTools、wechatide、または WeChat IDE Skills に言及している場合。
• テストアカウント／試用アカウント、グレーアウトした云開発項目、または DevTools に表示されないミニプログラム環境に言及している場合。
• メッセージプッシュ（消息推送）、カスタマーサービスの自動返信（客服消息／自动回复）、または MsgType／Event コールバックのクラウド関数への紐付けに言及している場合。

次に、こちらも読む

• CloudBase 認証 → ../auth-wechat-miniprogram/SKILL.md
• CloudBase ドキュメント DB → ../cloudbase-document-database-in-wechat-miniprogram/SKILL.md
• ミニプログラムの WeChat Pay、仮想決済（wx.requestVirtualPayment）、または Integration Center が生成する決済関数 → ../cloudbase-wechat-integration/SKILL.md（公式ドキュメント：https://docs.cloudbase.net/integration/wechat-pay-miniprogram.md）
• UI 生成 → まず ../ui-design/SKILL.md を読む

次の場合は使用しない

• Web 認証フロー、または Web SDK 固有のフロントエンド実装。
• WeChat Pay、仮想決済／wx.requestVirtualPayment、決済コールバック、返金、または公式アカウントの OAuth の詳細。これらのケースでは cloudbase-wechat-integration を使用してください。

よくある間違い／注意点

• ミニプログラムに Web 形式のログインフローを生成する。
• wx.cloud プロジェクトに Web SDK の前提を持ち込む。
• プロジェクトが実際に CloudBase を使用していることを確認する前に、CloudBase の制約を適用する。
• Stable WeChat Developer Tools に Nightly Skills／wechatide が含まれていると思い込む（含まれていない場合があります）。
• which wechatide を実行して何も見つからず、何も言わずに手動インポートへ切り替える。wechatide が見つからないのはセットアップ上の不足として報告し、解決を提案すべきであり、環境上の制限ではありません。Nightly が必要であることを伝え、インストールを提案し、手動インポートに切り替える前にユーザーの判断を待ってください。
• Nightly の wechatide がすでに動作している日常的なミニプログラムのクラウド運用で、CloudBase MCP による Tencent Cloud へのログインを強制する。
• --help／Nightly の tools.yaml を使わずに、wechatide のツール名やフラグをでっち上げる。
• cloud_*_msg_push が公開される前に、メッセージプッシュ運用で wxide CLI／IDE を介さず、低レベルのトランスポートを使う（message-push-customer-service.md を参照）。
• クラウド関数の戻り値がカスタマーサービスのチャットに自動返信すると考える（cloud.openapi.customerServiceMessage.send を使用する必要があります）。
• グレー表示の「云开发」項目や、DevTools に表示されない環境を DevTools の不具合だと考える。試用／テスト用アカウントでは CloudBase を利用できません。また、ミニプログラムに紐付けられた Tencent Cloud アカウントが環境を作成したアカウントと異なる場合、その環境は一覧に表示されません。プロジェクトに手を加える前に原因を特定してください（Common Pitfalls §6 を参照）。
• 登録が無料だからと、個人主体のミニプログラムアカウントを勧める。個人主体では WeChat Pay の加盟店アカウントを紐付けられないため、実物商品の販売やオフラインサービスは提供できません。また、利用できるサービスカテゴリが大幅に少なく、後から主体を変更するには、公証に加えて有料の審査が必要です。逆の間違いも同様に避けてください。「個人では決済できない」という理由で、仮想商品だけを扱うアイデアに会社アカウントを勧めてはいけません。サービスカテゴリに「工具」が含まれる個人主体は「虚拟支付」を利用できます。主体を勧める前に、アプリで何を販売するのかを尋ねてください（CloudBase integration reference §0.1 を参照）。
• Change Safety Protocol（cloudbase-platform/references/protocols/change-safety-protocol.md）に従う前に、コードや設定を変更する。
• cloudbase-platform/references/protocols/deployment-gate.md のチェックを完了する前に、ミニプログラムのアップロード／公開を行う。

このスキルを使用する場合

WeChat Mini Program の開発で、以下が必要な場合にこのスキルを使用してください。

• ミニプログラムのページやコンポーネントを作成、変更する
• ミニプログラムのプロジェクト構成や設定を整理する
• ミニプログラムのプロジェクトをデバッグ、プレビュー、公開する
• WeChat Developer Tools のワークフローを扱う
• ミニプログラムのランタイム動作、アセット、ページ設定ファイルを扱う
• 明示的に必要な場合に、ミニプログラムのプロジェクトへ CloudBase を統合する

次の場合は使用しないでください。

• Web フロントエンド開発（web-development を使用）
• バックエンドサービスのみの開発（適宜 cloudrun-development または cloud-functions を使用）
• ミニプログラム開発のコンテキストを伴わない UI デザインのみのタスク（ui-design を使用）

---

このスキルの使い方（コーディングエージェント向け）

1. まず、一般的なミニプログラムのワークフローから始めます

   • WeChat ミニプログラムの開発をデフォルトの対象範囲として扱います
   • ユーザーまたはコードベースから示されていない限り、プロジェクトで CloudBase が使用されていると想定しないでください

2. ミニプログラムのプロジェクト規約に従います

   • ミニプログラムのソースは、設定されたミニプログラムのルートディレクトリ内に置きます
   • index.json など、必要な設定ファイルがページファイルに含まれていることを確認します
   • プレビューや IDE のワークフローを提案する前に、project.config.json を確認します

3. シナリオに応じて参照先を切り替えます

   • タスクにデバッグ、プレビュー、公開、DevTools の起動、コンソール／ネットワーク、または wechatide が関係する場合は、まずデバッグとプレビューのリファレンスを読みます
   • WeChat IDE Skills と CloudBase MCP のどちらを選ぶか判断する場合は、WeChat IDE Skills と CloudBase MCP の比較を読みます
   • タスクに CloudBase、wx.cloud、クラウド関数、CloudBase データベース／ストレージ、または CloudBase の ID 処理が関係する場合は、CloudBase 統合リファレンスを読みます
   • アカウント／主体に関する前提条件（小程序尚未注册、主体选择、测试号、云开发入口置灰、环境看不到）に関係する場合は、まずCloudBase 統合リファレンスのセクション 0 を読みます
   • タスクにミニプログラムの SEO／WeChat 検索最適化／ページのインデックス登録／検索プロモーション（小程序搜索优化、页面收录、搜索推广、关键词排名）が関係する場合は、まずミニプログラムの SEO と WeChat 検索最適化を読みます
   • タスクにメッセージのプッシュ（消息推送）、カスタマーサービスの自動返信（客服消息自动回复）、MsgType/Event からクラウド関数へのバインド、またはプッシュ関連の関数ログが関係する場合は、まずメッセージプッシュとカスタマーサービスの自動返信を読みます
   • タスクに tabBar、アイコンアセット、またはラベルの間隔が関係する場合は、ユーザーがアイコンを明示的に要求していない限り、以下のテキストのみのカスタム tabBar をデフォルトとして優先します

4. 該当する場合にのみ CloudBase のルールを適用します

   • CloudBase／微信云开发 は重要なミニプログラム統合パスですが、必須要件ではありません
   • プロジェクトで CloudBase が使用されている場合にのみ、CloudBase 固有の認証、データベース、ストレージ、またはクラウド関数の制約を適用します

5. 適切なプレビュー／デバッグ／クラウド運用の方法を推奨します

   • デフォルトの対象：Nightly WeChat Developer Tools（組み込みの Skills/MCP）。wechatide 経由で実行します — devtools-debug-preview.md を参照してください
   • Nightly のダウンロード先：https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly_backup.html
   • wechatide がない場合は、環境の制限ではなく、一度限りのセットアップ不足です。CLI 主導の方法には Nightly が必要であることをユーザーに伝え、ダウンロード／インストールを提案して、ユーザーの回答を待ちます。ユーザーが断るか、インストールできない場合に限り、その後 miniprogram-ci + CloudBase MCP に進みます。
   • 安定版 DevTools + 手動インポートを推奨のデフォルトとして提示してはいけません。また、「簡単に済ませる」ためのトレードオフをユーザーに代わって決めてはいけません。手動インポートはユーザーが選ぶダウングレードであり、こちらから割り当てるものではありません。

---

WeChat ミニプログラム開発ルール

プロジェクト全般のルール

1. プロジェクト構成

   • ミニプログラムのコードは、project.config.json で設定されたプロジェクトルートに従う必要があります。
   • .json 設定ファイルを含め、ページ単位のファイルをすべてそろえてください。
   • コンパイルエラーを避けるため、参照先のローカルアセットが実際に存在することを確認してください。

2. 設定の確認

   • プロジェクトを開く、プレビューする、または公開する前に、project.config.json を確認してください。
   • 実際のプレビュー、アップロード、または WeChat Developer Tools のワークフローが必要な場合は、appid が利用可能であることを確認してください。
   • miniprogramRoot と関連するパス設定が正しいことを確認してください。

3. リソースの扱い

   • 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 のレイアウトはテキストのみとし、ラベル上部の空白をなくすために、フレックス配置で中央揃えにするか、height と line-height を一致させてください。ユーザーがアイコンベースのタブを明示的に希望した場合に限り、ダウンロードしたローカルアイコンに切り替えてください。

ミニプログラムのサブシナリオとしての CloudBase

• ユーザーが CloudBase、wx.cloud、Tencent CloudBase、腾讯云开发、または 云开发 を明示的に使用する場合は、CloudBase 統合リファレンスに従ってください。
• CloudBase のミニプログラムプロジェクトでは、wx.cloud API と CloudBase 環境設定を適切に使用してください。
• CloudBase 固有のルールを、CloudBase 以外のミニプログラムプロジェクトに適用しないでください。

デバッグ、プレビュー、公開

• デフォルトの手順：Nightly DevTools と wechatide を使用して、プロジェクトを開く、コンパイル、シミュレーター、コンソール／ネットワークのデバッグ、プレビュー、アップロード、日常的なクラウド操作を行います（WeChat ログインを使用し、Tencent Cloud への別途ログインは不要です）。
• 必要なコンテキストを必ず指定してください：-c <clientName>、絶対パスの --project、有効な appid、必要に応じてクラウド env。
• wechatide が見つからない場合：セットアップ上の不足として報告し、CLI を使用する手順には Nightly が必要であることを伝え、インストールを提案してユーザーの回答を待ってください。独断で別の方法に切り替えないでください。
• ユーザーが Nightly のインストールを断るか、インストールできない場合に限り、プレビュー／アップロード／npm には miniprogram-ci を、クラウドリソースには CloudBase MCP を使用してください。その場合、利用できなくなる機能（シミュレーター、コンソール／ネットワーク、オートメーション、CLI によるクラウド操作）を伝えてください。
• 詳細なワークフローについては、デバッグとプレビューのリファレンスおよびWeChat IDE Skills と CloudBase MCPを参照してください。

メッセージプッシュとカスタマーサービスの自動返信

微信エコシステムの特別章：メッセージプッシュ／カスタマーサービスの自動返信の詳細は、中国語のリファレンスに従ってください（用語では英語の API 名を保持します）。

• 現在利用できる唯一の運用手順：WeChat Developer Tools IDE と wxide CLI を使用してください。cloud_query_msg_push／cloud_manage_msg_push がまだ公開されていない間（WeChat IDE CLI のサポート待ち）は、低レベルの回避策を案内しないでください。
• cloud_fn_deploy および --remote-npm-install を使用して受信関数をデプロイし、CLI ツールが提供されるまでは、IDE のメッセージプッシュパネルで（MsgType, Event）を 1 つのクラウド関数に紐付けてください。
• カスタマーサービスの自動返信には cloud.openapi.customerServiceMessage.send と config.json の openapi 権限が必要です。関数の戻り値だけでは返信されません。
• 関数ログは、IDE の 云开发控制台 → 云函数 → 日志 で確認してください。wxide CLI はまだログ照会に対応していないため、低レベルのログ CGI を回避する方法は案内しないでください。
• リファレンス全文：メッセージプッシュとカスタマーサービスの自動返信

最小限度のプロジェクト構成

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"
}

参考資料

• CloudBase ミニプログラム連携 — ミニプログラムプロジェクトで CloudBase を明示的に連携する場合に使用します
• WeChat DevTools のデバッグとプレビュー — Nightly／wechatide のパス、必要なコンテキスト、Nightly がない場合の代替手段
• WeChat IDE Skills と CloudBase MCP — 階層構造と、どの実行環境をいつ使用するか
• メッセージプッシュとカスタマーサービスの自動返信 — wxide CLI + IDE を使った消息推送／カスタマーサービスの自動返信（低レベルのバイパスは使用しません。cloud_*_msg_push は対応待ちです）
• ミニプログラムの SEO と WeChat 検索の最適化 — 小程序の検索最適化／ページのインデックス登録／検索プロモーション（mpcrawler、URL への到達性、navigator による遷移、タイトルとサムネイル）
• よくある落とし穴 — オプショナルチェーン、TDesign のスタイリング、Canvas + ストレージ、および云开发のエントリ／環境に関する問題（§6）のコードを生成する前にお読みください