tdesign-miniprogram

TDesign ミニプログラム スキル

TDesign WeChat ミニプログラムコンポーネントライブラリは、Tencent によるエンタープライズレベルのデザインシステムです。ダークモード対応、テーマカスタマイズなどを備えた 60 以上の高品質なコンポーネントを提供します。

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

このスキルは、次のような場合にトリガーされるべきです:

• TDesign コンポーネントライブラリを使用して WeChat ミニプログラムを開発する場合
• TDesign の UI コンポーネント（Button、Input、Dialog など）を使用する場合
• TDesign のデザイン仕様に従ってインターフェースを実装する場合
• TDesign のテーマとスタイルのカスタマイズを設定する場合
• AI チャットインターフェースを構築する場合（TDesign の Chat コンポーネントを使用）
• ダークモード対応を実装する場合

クイックスタート

インストール

npm i tdesign-miniprogram -S --production

app.json の変更

スタイルの競合を避けるため、app.json から "style": "v2" を削除します。

project.config.json の変更

project.config.json の setting セクションに以下を追加します:

{
  "setting": {
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

tsconfig.json の変更（TypeScript プロジェクト）

{
  "paths": {
    "tdesign-miniprogram/*": [
      "./miniprogram/miniprogram_npm/tdesign-miniprogram/*"
    ]
  }
}

project.config.json を変更した後、WeChat DevTools で npm をビルドします: Tools - Build npm

ビルドが成功したら、Compile JS to ES5 を確認します

コンポーネントの使用

ページまたはコンポーネントの JSON ファイルでインポートします:

{
  "usingComponents": {
    "t-button": "tdesign-miniprogram/button/button"
  }
}

WXML で使用します:

<t-button theme="primary">Button</t-button>

コンポーネントのカテゴリ

基本コンポーネント（6）

コンポーネント	説明	インポートパス
Button	ボタン	tdesign-miniprogram/button/button
Divider	区切り線	tdesign-miniprogram/divider/divider
Fab	フローティングアクションボタン	tdesign-miniprogram/fab/fab
Icon	アイコン	tdesign-miniprogram/icon/icon
Layout	レイアウト	tdesign-miniprogram/row/row
Link	リンク	tdesign-miniprogram/link/link

ナビゲーションコンポーネント（8）

コンポーネント	説明	インポートパス
BackTop	トップに戻る	tdesign-miniprogram/back-top/back-top
Drawer	ドロワー	tdesign-miniprogram/drawer/drawer
Indexes	インデックスリスト	tdesign-miniprogram/indexes/indexes
Navbar	ナビゲーションバー	tdesign-miniprogram/navbar/navbar
SideBar	サイドナビゲーション	tdesign-miniprogram/side-bar/side-bar
Steps	ステップ	tdesign-miniprogram/steps/steps
TabBar	下部タブバー	tdesign-miniprogram/tab-bar/tab-bar
Tabs	タブ	tdesign-miniprogram/tabs/tabs

Input Components (16)

Component	Description	Import Path
Calendar	Calendar	tdesign-miniprogram/calendar/calendar
Cascader	Cascader	tdesign-miniprogram/cascader/cascader
CheckBox	Checkbox	tdesign-miniprogram/checkbox/checkbox
DateTimePicker	Date Time Picker	tdesign-miniprogram/date-time-picker/date-time-picker
Input	Input	tdesign-miniprogram/input/input
Picker	Picker	tdesign-miniprogram/picker/picker
Radio	Radio	tdesign-miniprogram/radio/radio
Rate	Rate	tdesign-miniprogram/rate/rate
Search	Search	tdesign-miniprogram/search/search
Slider	Slider	tdesign-miniprogram/slider/slider
Stepper	Stepper	tdesign-miniprogram/stepper/stepper
Switch	Switch	tdesign-miniprogram/switch/switch
Textarea	Textarea	tdesign-miniprogram/textarea/textarea
TreeSelect	Tree Select	tdesign-miniprogram/tree-select/tree-select
Upload	Upload	tdesign-miniprogram/upload/upload
Form	Form	tdesign-miniprogram/form/form

Data Display Components (18)

Component	Description	Import Path
Avatar	Avatar	tdesign-miniprogram/avatar/avatar
Badge	Badge	tdesign-miniprogram/badge/badge
Cell	Cell	tdesign-miniprogram/cell/cell
Collapse	Collapse	tdesign-miniprogram/collapse/collapse
CountDown	Countdown	tdesign-miniprogram/count-down/count-down
Empty	Empty State	tdesign-miniprogram/empty/empty
Footer	Footer	tdesign-miniprogram/footer/footer
Grid	Grid	tdesign-miniprogram/grid/grid
Image	Image	tdesign-miniprogram/image/image
ImageViewer	Image Viewer	tdesign-miniprogram/image-viewer/image-viewer
Progress	Progress	tdesign-miniprogram/progress/progress
Result	Result	tdesign-miniprogram/result/result
Skeleton	Skeleton	tdesign-miniprogram/skeleton/skeleton
Sticky	Sticky	tdesign-miniprogram/sticky/sticky
Swiper	Swiper	tdesign-miniprogram/swiper/swiper
Table	Table	tdesign-miniprogram/table/table
Tag	Tag	tdesign-miniprogram/tag/tag
List	List	tdesign-miniprogram/list/list

フィードバックコンポーネント (12)

コンポーネント	説明	インポートパス
ActionSheet	アクションシート	tdesign-miniprogram/action-sheet/action-sheet
Dialog	ダイアログ	tdesign-miniprogram/dialog/dialog
DropdownMenu	ドロップダウンメニュー	tdesign-miniprogram/dropdown-menu/dropdown-menu
Guide	ガイド	tdesign-miniprogram/guide/guide
Loading	ローディング	tdesign-miniprogram/loading/loading
Message	メッセージ	tdesign-miniprogram/message/message
NoticeBar	通知バー	tdesign-miniprogram/notice-bar/notice-bar
Overlay	オーバーレイ	tdesign-miniprogram/overlay/overlay
Popup	ポップアップ	tdesign-miniprogram/popup/popup
PullDownRefresh	プルダウンリフレッシュ	tdesign-miniprogram/pull-down-refresh/pull-down-refresh
SwipeCell	スワイプセル	tdesign-miniprogram/swipe-cell/swipe-cell
Toast	トースト	tdesign-miniprogram/toast/toast

AI チャットコンポーネント (9)

コンポーネント	説明	インポートパス
ChatList	チャットリスト	tdesign-miniprogram/chat-list/chat-list
ChatMessage	チャットメッセージ	tdesign-miniprogram/chat-message/chat-message
ChatSender	チャット送信	tdesign-miniprogram/chat-sender/chat-sender
ChatContent	チャットコンテンツ	tdesign-miniprogram/chat-content/chat-content
ChatActionbar	チャットアクションバー	tdesign-miniprogram/chat-actionbar/chat-actionbar
ChatLoading	チャットローディング	tdesign-miniprogram/chat-loading/chat-loading
ChatMarkdown	チャット Markdown	tdesign-miniprogram/chat-markdown/chat-markdown
ChatThinking	チャットシンキング	tdesign-miniprogram/chat-thinking/chat-thinking
Attachments	添付ファイル	tdesign-miniprogram/attachments/attachments

一般的なパターン

ボタン

<t-button theme="primary" size="large">Primary Button</t-button>
<t-button theme="light" size="large">Light Button</t-button>
<t-button size="large">Default Button</t-button>


<t-button theme="primary" size="large" variant="outline"
  >Outline Button</t-button
>
<t-button theme="primary" size="large" variant="text">Text Button</t-button>


<t-button
  theme="primary"
  icon="app"
  content="Icon Button"
  size="large"
></t-button>


<t-button theme="primary" size="large" loading>Loading</t-button>


<t-button theme="primary" size="large" disabled>Disabled</t-button>


<t-button theme="primary" size="large" block>Block Button</t-button>


<t-button theme="primary" ghost size="large">Ghost Button</t-button>

入力

{
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input"
  }
}

<t-input
  label="Label"
  placeholder="Please enter"
  value="{{value}}"
  bind:change="onChange"
/>

ダイアログ

{
  "usingComponents": {
    "t-dialog": "tdesign-miniprogram/dialog/dialog"
  }
}

<t-dialog
  visible="{{visible}}"
  title="Dialog Title"
  content="Dialog content"
  confirm-btn="Confirm"
  cancel-btn="Cancel"
  bind:confirm="onConfirm"
  bind:cancel="onCancel"
/>

トースト

import Toast from 'tdesign-miniprogram/toast/index';

Toast({
  context: this,
  selector: '#t-toast',
  message: 'Toast message',
});

AI チャットインターフェース

{
  "usingComponents": {
    "t-chat-list": "tdesign-miniprogram/chat-list/chat-list",
    "t-chat-message": "tdesign-miniprogram/chat-message/chat-message",
    "t-chat-sender": "tdesign-miniprogram/chat-sender/chat-sender"
  }
}

<t-chat-list layout="single">
  <t-chat-message
    avatar="{{item.avatar}}"
    name="{{item.name}}"
    content="{{item.content}}"
    role="{{item.role}}"
  />
  <view slot="footer">
    <t-chat-sender bind:send="onSend" />
  </view>
</t-chat-list>

Component({
  data: {
    messages: [
      {
        role: 'user',
        content: [{ type: 'text', data: 'Hello' }],
      },
      {
        role: 'assistant',
        content: [{ type: 'text', data: 'Hello! How can I help you?' }],
      },
    ],
  },
  methods: {
    onSend(e) {
      const { value } = e.detail;
      // Handle send message
    },
  },
});

スタイルのカスタマイズ

方法 1: style 属性を使用する

<t-button style="color: red">Custom Style</t-button>
<t-button custom-style="color: red">Custom Style</t-button>

方法 2: スタイル分離を無効にする

ページ内でスタイルを直接上書きします:

.t-button--primary {
  background-color: navy;
}

カスタムコンポーネントでは、styleIsolation を有効にします:

Component({
  options: {
    styleIsolation: 'shared',
  },
});

方法 3: 外部スタイルクラス

<t-button t-class="my-button-class">Button</t-button>

.my-button-class {
  background-color: navy !important;
}

方法 4: CSS 変数

TDesign はテーマのカスタマイズ用に豊富な CSS 変数を提供しています:

page {
  --td-button-primary-bg-color: #0052d9;
  --td-button-border-radius: 8rpx;
}

ダークモード

1. app.json を変更する

{
  "darkmode": true
}

2. デザイントークンをインポートする

app.wxss 内:

@import 'miniprogram_npm/tdesign-miniprogram/common/style/theme/_index.wxss';

3. CSS 変数を使用する

.text {
  color: var(--td-text-color-secondary);
}

4. 特殊コンポーネントの対応

custom-tab-bar または root-portal でラップされたコンポーネントには、.page クラスを追加します:

<view class="page">
  <t-tab-bar />
</view>

参照ファイル

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

基本ドキュメント

• miniprogram/getting-started.md - クイックスタートガイド
• miniprogram/overview.md - コンポーネントの概要
• miniprogram/custom-style.md - スタイルのカスタマイズ
• miniprogram/custom-theme.md - テーマのカスタマイズ
• miniprogram/dark-mode.md - ダークモード

コンポーネントドキュメント (miniprogram/components/)

• button.md - ボタン
• input.md - 入力
• dialog.md - ダイアログ
• form.md - フォーム
• ... その他のコンポーネントドキュメント

AI チャットコンポーネントのドキュメント (miniprogram-chat/)

• getting-started.md - チャットコンポーネントのクイックスタート
• sse.md - SSE ストリーミング
• components/chat-message.md - チャットメッセージ
• components/chat-sender.md - チャット送信者
• components/chat-list.md - チャットリスト
• ... その他のチャットコンポーネントのドキュメント

詳細な API 情報が必要な場合は、Read ツールを使用して特定のリファレンスファイルにアクセスしてください。

主な要件

• 最小ベースライブラリバージョン: ^2.12.0
• WeChat DevTools での npm ビルドが必要
• app.json から "style": "v2" を削除

リソース

• TDesign 公式ドキュメント
• GitHub リポジトリ
• コンポーネントデモミニプログラム

注意事項

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