mcpField
W
wechat-miniprogram

wechat-miniprogram

github.com/joneqian開発32593 回インストール37 週間前に更新
リポジトリ

wechat-miniprogram について

wechat-miniprogram は、WeChat Mini Program 開発向けのドキュメントベースのスキルです。プロジェクト構成、フレームワーク、コンポーネント、API、クラウド開発の資料と例を備え、デバッグやパフォーマンス改善も扱います。

主な機能

  1. 01フレームワークとプロジェクト構成のガイド
  2. 02コンポーネントと API のドキュメント
  3. 03クラウド開発のリファレンス
  4. 04WXML、WXSS、WXS のパターン例
  5. 05デバッグとパフォーマンス改善のガイド

活用シーン

  1. 01WeChat Mini Program のページやコンポーネントを開発
  2. 02Mini Program API の使い方を調べる
  3. 03既存の Mini Program をデバッグ・最適化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/joneqian/claude-skills-suite --skill wechat-miniprogram

インストール後、Claude Code で/wechat-miniprogramを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

index.md
references/
api.md
cloud.md
components.md
framework.md
getting_started.md
index.md
other.md
reference.md

詳細

WeChat ミニプログラムスキル

WeChat ミニプログラム（微信小程序）開発フレームワークのスキルです。公式ドキュメントから生成されています。

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

このスキルは次のような場合に起動されるべきです：

  • WeChat ミニプログラム（微信小程序）を開発するとき
  • WXML、WXSS、WXS を扱うとき
  • WeChat ミニプログラムの API を使用するとき
  • WeChat コンポーネントを構築するとき
  • WeChat のオープン機能（开放能力）を実装するとき
  • ミニプログラムの問題をデバッグするとき
  • ミニプログラムのパフォーマンスを最適化するとき

クイックリファレンス

プロジェクト構成
├── app.js          # App logic
├── app.json        # App configuration
├── app.wxss        # Global styles
├── pages/
│   └── index/
│       ├── index.js    # Page logic
│       ├── index.json  # Page configuration
│       ├── index.wxml  # Page template
│       └── index.wxss  # Page styles
└── components/     # Custom components
よくあるパターン

例 1（javascript）：

WeixinJSBridge.invoke('imagePreview', {
    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',
    urls: [ // 所有图片的URL列表，数组格式
        'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
    ]
}, function(res) {
    console.log(res.err_msg)
})

例 2（javascript）：

wx.previewImage({
  current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
  urls: [ // 所有图片的URL列表，数组格式
    'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
    'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg'
  ],
  success: function(res) {
    console.log(res)
  }
})

例 3（html）：


<view class="index">{{prop}}</view>

例 4（js）：

// /components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    },
  },
})

例 5（css）：

/* /components/index.wxss */
.index {
  color: green;
}

例 6（json）：

{
  "nickName": "Band",
  "gender": 1,
  "language": "zh_CN",
  "city": "Guangzhou",
  "province": "Guangdong",
  "country": "CN",
  "avatarUrl": "http://wx.qlogo.cn/mmopen/vi_32/1vZvI39NWFQ9XM4LtQpFrQJ1xlgZxx3w7bQxKARol6503Iuswjjn6nIGBiaycAjAtpujxyzYsrztuuICqIM5ibXQ/0"
}

例 7（json）：

{
    "openId": "OPENID",
    "nickName": "NICKNAME",
    "gender": GENDER,
    "city": "CITY",
    "province": "PROVINCE",
    "country": "COUNTRY",
    "avatarUrl": "AVATARURL",
    "unionId": "UNIONID",
    "watermark":
    {
        "appid":"APPID",
        "timestamp":TIMESTAMP
    }
}

例 8（js）：

wx.cloud.callFunction({
  name: 'myFunction',
  data: {
    weRunData: wx.cloud.CloudID('xxx'), // 这个 CloudID 值到云函数端会被替换
    obj: {
      shareInfo: wx.cloud.CloudID('yyy'), // 非顶层字段的 CloudID 不会被替换，会原样字符串展示
    }
  }
})

例 9（html）：

<scroll-view type="list" scroll-y>
  <view> a </view>
  <view> b </view>
  <view> c </view>
</scroll-view>

例 10（html）：

<scroll-view type="list" scroll-y>
  <virtual-comp>
    <view> a </view>
    <view> b </view>
    <view> c </view>
  </virtual-comp>
</scroll-view>

リファレンスファイル

このスキルには references/ に包括的なドキュメントが含まれています：

  • getting_started.md - クイックスタートと概要
  • framework.md - ミニプログラムフレームワーク（ロジック層、ビュー層）
  • components.md - 組み込みコンポーネント
  • api.md - API リファレンス
  • cloud.md - クラウド開発（云开发）
  • reference.md - 設定リファレンス

詳細な情報が必要な場合は、view を使用して特定のリファレンスファイルを読んでください。

主要な概念

アプリのライフサイクル
App({
  onLaunch(options) {
    // Mini Program initialized
  },
  onShow(options) {
    // Mini Program shown
  },
  onHide() {
    // Mini Program hidden
  },
  globalData: {
    userInfo: null
  }
})
ページのライフサイクル
Page({
  data: {
    message: 'Hello World'
  },
  onLoad(options) {
    // Page loaded
  },
  onShow() {
    // Page shown
  },
  onReady() {
    // Page ready
  },
  onHide() {
    // Page hidden
  },
  onUnload() {
    // Page unloaded
  }
})
WXML のデータバインディング
<view>{{message}}</view>
<view wx:if="{{condition}}">Conditional</view>
<view wx:for="{{array}}" wx:key="id">{{item}}</view>
イベント処理
<button bindtap="handleTap">Click Me</button>

Page({
  handleTap(e) {
    console.log(e)
  }
})

このスキルの使い方

初心者の方へ

基礎的な概念については、getting_started リファレンスファイルから始めてください。

特定の機能について

詳細な情報については、適切なカテゴリのリファレンスファイル（api、framework など）を使用してください。

コード例について

上記のクイックリファレンスセクションには、公式ドキュメントから抽出されたよくあるパターンが含まれています。

リソース

注記

  • このスキルは公式の WeChat ドキュメントから自動生成されました
  • リファレンスファイルはソースドキュメントの構造と例を保持しています
  • 公式ドキュメントに従い、コンテンツは中国語です

コメント

Markdown 対応