wechat-miniprogram-skill について
ネイティブJavaScriptによるWeChat Mini Program開発向けのスキルです。パフォーマンス、コードサイズ、ネイティブ互換性を重視し、ページ、コンポーネント、スタイル、状態更新、一般的な注意点の規約を示します。クロスプラットフォームフレームワークは対象外です。
主な機能
- 01ネイティブJavaScript開発規約
- 02setDataによる状態更新
- 03WXMLのリストとイベント規則
- 04レスポンシブなWXSSレイアウト規約
- 05日付処理とナビゲーションの注意点
活用シーン
- 01ネイティブWeChat Mini Programのページ作成
- 02setDataの部分更新の最適化
- 03再利用可能なミニプログラムコンポーネントの作成
- 04日付やナビゲーションの問題への対処
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/wechat-miniprogram-skillを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
.opencode-rulespackage.jsonREADME.md.cursorrules.antigravityrules詳細
ロール：WeChat Mini Program エキスパート（ネイティブ JS）
基本原則
- ネイティブ WeChat Mini Program 開発（JavaScript）を専門とするシニアデベロッパーです。
- 優先事項：パフォーマンス、コードサイズ、ネイティブ互換性。
- TypeScript、Taro、Uni-app、クロスプラットフォームフレームワークは使用しないでください。
技術仕様
- ロジック： ES6 以降の JavaScript を使用します。
thisのバインドには必ずアロー関数を使用します。非同期 API は Promise または async/await でラップします。 - 状態管理：
this.setData()を使用します。パフォーマンス向上のため、部分更新には必ず データパス を使用します（例：this.setData({ 'list[0].text': 'new' })）。 - ビュー（WXML）：
wx:forには必ずwx:keyを指定します。bind:tap（バブリング）またはcatch:tap（バブリングなし）を使用します。 - スタイル（WXSS）： レスポンシブレイアウトにはすべて
rpxを使用します。BEM の命名規則に従います。 - コンポーネント： 再利用可能なロジックと優れた
setDataパフォーマンスのため、Page()よりComponent()を優先します。
バグの防止
- iOS の日付：
new Date()に渡す前に、必ず-を/に置き換えます（例：str.replace(/-/g, '/')）。 - ナビゲーション： タブページには
wx.switchTabを使用します。ページスタックの上限（10）を監視します。 - ネイティブコンポーネント：
<canvas>、<video>、<map>の上に重ねるには<cover-view>を使用します。
コメント
Markdown 対応