微信小程序コンポーネント説明表

基础组件

フレームワークは開発者に基盤となるコンポーネントを提供し、これらを組み合わせて迅速な開発を可能にします。

コンポーネントとは:

<tagname property="value">
  Content goes here ...
</tagename>

属性类型

タイプ 記述 注釈
Boolean ボル値 コンポーネントにこの属性を設定すると、どんな値でもtrueとなります。この属性がコンポーネントに設定されていない場合のみ、falseとなります。属性値が変数の場合、その変数の値はBoolean型に変換されます。
Number デジタル 1, 2.5
String 文字列 “string”
Array 配列(はいれい) [ 1, “string” ]
Object 対象 { key: value }
EventHandler イベントハンドラ名 "handlerName"は、Pageで定義されたイベントハンドラ関数の名前です。
Any 任意属性:任意属性(にんいんしゃせい)
共同属性类型
属性:属性(せいりょく) タイプ 記述 注釈
id String コンポーネントのユニークなID ページ全体をユニークに保つ
class String コンポーネントのスタイルクラス 対応するWXSSで定義されたスタイルクラス
style String コンポーネントのインラインスタイル 動的に設定可能なインラインスタイル
hidden String コンポーネントは表示されていますか? すべてのコンポーネントがデフォルトで表示されています
data-* Any カスタム属性 コンポーネントでイベントが発生すると、イベントハンドラーファンクションに送信されます。
bind* / catch* EventHandler コンポーネントのイベント

基本组件列表

基本コンポーネントは以下のいくつかのカテゴリーに分類されます:

ビューコンテナ 基本内容(きほんないよう) フォーム(Form) ナビゲーション マルチメディア(Media) 地図(ちず) キャンバス

视图容器(View Container):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 最低バージョン
view ビューコンテナー hover-class String none 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagation Boolean false 指定:本ノードの祖先ノードがクリック状態になることを阻止しますか? 1.5.0
hover-start-time Number 50 クリック状態が現れるまでの時間は、何ミリ秒ですか?
hover-stay-time Number 400 指針離開後のクリック状態の保持時間、単位はミリ秒です。
scroll-view スクロールビューコンテナー scroll-x Boolean false 横スクロール可
(おうスクロールかのう)
scroll-y Boolean false 縦スクロール可
upper-threshold Number 50 先頭/左端から何ピクセル離れた場所でscrolltoupperイベントが発火します
lower-threshold Number 50 底/右から何ピクセル離れたら(単位:px)、scrolltolowerイベントが発生します
scroll-top Number 垂直スクロールバーの位置を設定してください。
scroll-left Number 横スクロール位置を設定
scroll-into-view String 値は特定のサブ要素のID(数字で始まってはいけません)で指定します。どの方向にスクロールするかを設定すると、その方向でその要素にスクロールします。
scroll-with-animation Boolean false スクロールバー位置を設定する際にアニメーションを利用
enable-back-to-top Boolean false iOS:上部ステータスバーをタップ、Android:タイトルバーをダブルタップで、スクロールバーが先頭に戻る(縦方向のみ対応)
bindscrolltoupper EventHandle 先頭/左にスクロールすると、scrolltoupperイベントが発生します。
bindscrolltolower EventHandle スクロールの最下部/右端まで行くと、scrolltolowerイベントがトリガーされます。
bindscroll EventHandle スクロール時に発火、event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
swiper スライダービュー容器 indicator-dots Boolean false パネルの指標点を表示しますか?
indicator-color Color rgba(0, 0, 0, .3) 指し示し点色 1.1.0
indicator-active-color Color #000000 現在選択中の指標点の色 1.1.0
autoplay Boolean false 自動的に切り替わるか?
current Number 0 現在のページのインデックス
interval Number 5000 自動的に時間間隔を切り替え
duration Number 500 スライドアニメーション时长
circular Boolean false 接続スライドを使用しますか?
vertical Boolean false スライド方向が縦方向ですか?
bindchange EventHandle 現在が変化したときに「change」イベントが発生します。event.detail = {現在: 現在, 源: 源}

基础内容(Basic Content):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 最低バージョン
icon 图标 type String icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size Number 23 アイコンのサイズ、単位はpxです
color Color アイコンの色は、CSSのcolorと同じです。
text 文字:文字(もじ) selectable Boolean false テキストは選択可能ですか? 1.1.0
space String false 显示连续空格
有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根据字体设置的空格大小
1.4.0
decode Boolean false デコード済みかどうか 1.4.0
progress 進捗バー percent Float なし 0〜100%
show-info Boolean false 進捗バーの右側にパーセンテージを表示
stroke-width Number 6 進捗バーの幅、単位はpxです。
color Color #09BB07 進度条色(アクティブカラー)
activeColor Color 選択されたプロセスバーの色
backgroundColor Color 未選択の進捗バーの色
active Boolean false 左から右へのアニメーションバー
active-mode String backwards 後ろ向き:アニメから最初から再生;前進:アニメを前回の終了点から再生 1.7.0

表单(Form):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 効果発生時期 最低バージョン
button ボタン size String default ボタンのサイズ
type String default ボタンのスタイルタイプ
plain Boolean false ボタンは空洞ですか?背景色は透明ですか?
disabled Boolean false 禁止しますか?
loading Boolean false 名前にロードアイコンがあるか?
form-type String 用于 <form/> 组件,点击分别会触发 <form/> 组件的 submit/reset 事件
open-type String 微信オープン機能 1.1.0
hover-class String button-hover 指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果
hover-stop-propagation Boolean false 指定:本ノードの祖先ノードがクリック状態になることを阻止しますか? 1.5.0
hover-start-time Number 20 クリック状態が現れるまでの時間は、何ミリ秒ですか?
hover-stay-time Number 70 指針離開後のクリック状態の保持時間、単位はミリ秒です。
bindgetuserinfo Handler ユーザーがボタンをクリックすると、取得したユーザー情報が返され、返却パラメータのdetailから取得した値はwx.getUserInfoと同じです。 open-type="getUserInfo' 1.3.0
lang String en 指定された言語でユーザー情報を返す、zh_CN(簡体中国語)、zh_TW(繁体中国語)、en(英語)。 open-type="getUserInfo" 1.3.0
session-from String 会話元 open-type="contact" 1.4.0
send-message-title String 現在のタイトル 会話内メッセージカードのタイトル open-type="contact" 1.5.0
send-message-path String 現在の共有パス 会話内メッセージカードでクリックして小程序へのリダイレクトパス open-type="contact" 1.5.0
send-message-img String スクリーンショット 議論内メッセージカード画像 open-type="contact" 1.5.0
show-message-card Boolean false セッション内のメッセージカードを表示 open-type="contact" 1.5.0
bindcontact Handler カスタマーサポートメッセージコールバック open-type="contact" 1.5.0
bindgetphonenumber Handler ユーザーの携帯電話番号取得コールバック open-type="getphonenumber" 1.2.0
form フォーム report-submit Boolean formIdを使ってテンプレートメッセージを送信するためには戻すべきですか?
bindsubmit EventHandle フォームのデータを持ち、submitイベントをトリガーします。event.detail = {value : {'name': 'value'} , formId: ''}
bindreset EventHandle フォームがリセットされたときにresetイベントが発生します
input 入力欄 value String 入力欄の初期内容
type String "text" inputの型
password Boolean false パスワードタイプかどうか
placeholder String 入力欄が空の時のプレースホルダー
placeholder-style String 指定プレースホルダーのスタイル
placeholder-class String "input-placeholder" 指定プレースホルダーのスタイルクラス
disabled Boolean false 禁止しますか?
maxlength Number 140 最大入力長さ、-1に設定すると長さに制限なし
cursor-spacing Number 0 指定光標とキーボードの距離(px単位)。inputの底からの距離とcursor-spacingで指定された距離の最小値を光標とキーボードの距離とする。
auto-focus Boolean false 自動フォーカス、キーボードを開く
focus Boolean false 焦点を得る
confirm-type String "done" キーボード右下のボタンにテキストを設定する 1.1.0
confirm-hold Boolean false キーボード右下のボタンを押したとき、キーボードを折りたたみませんか? 1.1.0
cursor Number 指定焦点時のカーソル位置 1.5.0
bindinput EventHandle キーボード入力でinputイベントがトリガーされ、event.detail = {value, cursor}。処理関数は直接文字列をreturnすると、入力ボックスの内容が置き換わります。
bindfocus EventHandle フォームに焦点が当たると発火、event.detail = {value: value}
bindblur EventHandle フィールドがフォーカスを失ったときにトリガー,event.detail = {value: value}
bindconfirm EventHandle 「完了ボタンをクリック時に発火、event.detail = {value: value}」
checkbox マルチセレクター value String <checkbox/>标识,选中时触发<checkbox-group/>的 change 事件,并携带 <checkbox/> 的 value
disabled Boolean false 禁止しますか?
checked Boolean false 現在選択中か、デフォルト選択に使用できます
color Color チェックボックスの色は、CSSのcolorと同じです。
radio 単項選択肢 value String <radio/> 标识。当该<radio/> 选中时,<radio-group/> 的 change 事件会携带<radio/>的value
disabled Boolean false 禁止しますか?
checked Boolean false 現在選択中か、デフォルト選択に使用できます
color Color ラジオの色、CSSのcolorと同じ
picker
(mode = selector)
リスト選択アイテム range Array / Object Array [] modeがselectorまたはmultiSelectorの場合、rangeが有効です。
range-key String rangeがObject Arrayの場合、range-keyでObject内のkeyの値を選択して表示内容を指定します。
value Number 0 valueの値は、rangeの中でどの順番を選択したか(インデックスは0から始まる)を示します
bindchange EventHandle 値が変更されたときにchangeイベントが発生、event.detail = {value: 値}
disabled Boolean false 禁止しますか?
picker
(mode = multiSelector)
(リスト)セレクターボックス range 二次元配列 / 二次元オブジェクト配列 [] mode为 selector 或 multiSelector 时,range 有效。二维数组,长度表示多少列,数组的每项表示每列的数据,如[["a","b"], ["c","d"]]
range-key String rangeが2次元オブジェクト配列の場合、range-keyを使ってオブジェクト内のキーの値を選択子として表示内容を指定します
value Array 0 各値は、rangeの対応する項目のどの要素が選択されたかを示します(インデックスは0から始まります)。
bindchange EventHandle 値が変更されたときにchangeイベントが発生、event.detail = {value: 値}
bindcolumnchange EventHandle 列の値が変更されたときに columnchange イベントが発生します。event.detail = {column: column, value: value} です。columnの値は変更された列の(0から始まる)インデックスを示し、valueの値は変更された値のインデックスを示します。
disabled Boolean false 禁止しますか?
picker
(mode = time)
リスト選択器(時間) value String 表示选中的时间,格式为"hh:mm"
start String 表示有效时间范围的开始,字符串格式为"hh:mm"
end String 表示有效时间范围的结束,字符串格式为"hh:mm"
bindchange EventHandle 値が変更されたときにchangeイベントが発生、event.detail = {value: 値}
disabled Boolean false 禁止しますか?
picker
(mode = date)
(日付)リストセレクタ value String 0 表示选中的日期,格式为"YYYY-MM-DD"
start String 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD"
end String 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD"
fields String day 効果値(有效値)年、月、日、選択子の粒度を示します。
bindchange EventHandle 値が変更されたときにchangeイベントが発生、event.detail = {value: 値}
disabled Boolean false 禁止しますか?
picker
(mode = region)
(日付)リストセレクタ value Array [] 選択された都道府県市区町村を示す、デフォルトで各列の先頭の値を選択します。
custom-item String 各列の先頭にカスタム項目を追加できます 1.5.0
bindchange EventHandle 値が変更されたときにchangeイベントが発生、event.detail = {value: 値}
disabled Boolean false 禁止しますか?
picker-view 内嵌リストセレクター value NumberArray 配列の数字は、picker-view内のpicker-view-columnが選択した項目(インデックスは0から始まる)を示します。数字がpicker-view-columnの選択肢の長さを超えた場合、最後の項目を選択します。
indicator-style String セレクターボックスの中間選択枠のスタイルを設定します。
indicator-class String セレクターボックスの中間の選択枠にクラス名を設定してください。 1.1.0
mask-style String モードレイヤーのスタイルを設定する 1.5.0
mask-class String モンターのクラス名を設定してください 1.5.0
bindchange EventHandle スクロール選択で値が変更されると、changeイベントが発火します。event.detail = {value: value};valueは配列で、picker-view-column内で選択されているのは何番目の項目か(インデックスは0から始まる)を示します。
slider スクロールセレクタ min Number 0 最小値
max Number 100 最大値
step Number 0 ステップサイズは、0以上でなければなりません。また、(マックス - ミン)で割り切れる必要があります。
disabled Boolean false 禁止しますか?
value Number 0 現在の値
color Color #e9e9e9 背景色(backgroundColor)
selected-color Color #1aad19 既定の色(activeColorを使用してください)
activeColor Color #1aad19 選択した色
backgroundColor Color #e9e9e9 背景バーの色
show-value Boolean false 現在のvalueを表示しますか?
bindchange EventHandle ドラッグが完了した後のイベント、event.detail = {value: value}
bindchanging EventHandle ドラッグ中に発生したイベント、event.detail = {value: value} 1.7.0
switch スイッチセレクター checked Boolean false 選択済みですか?
type String switch スタイル、有効値:スイッチ、チェックボックス
bindchange EventHandle チェッカーの変更時にchangeイベントがトリガーされ、event.detail={value:checked}です。
color Color switchの色は、CSSのcolorと同じです。
label タグ for String コントロールのIDをバインド

导航(Navigation):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 最低バージョン
navigator アプリリンク url String アプリ内リンク
open-type String navigate ジャンプ方法
delta Number open-type='navigateBack'の時有効、退ける階層数を示す
hover-class String navigator-hover 指定点击时的样式类,当hover-class="none"时,没有点击态效果
hover-stop-propagation Boolean false 指定:本ノードの祖先ノードがクリック状態になることを阻止しますか? 1.5.0
hover-start-time Number 50 クリック状態が現れるまでの時間は、何ミリ秒ですか?
hover-stay-time Number 600 指針離開後のクリック状態の保持時間、単位はミリ秒です。
其中open-type 的有效值如下:
説明 最低バージョン
navigate wx.navigateToの機能に対応
redirect wx.redirectToの機能に相当します。
switchTab wx.switchTabの機能に相当します
reLaunch wx.reLaunchの機能に対応 1.1.0
navigateBack wx.navigateBackの機能に対応 1.1.0

多媒体(Media):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 最低バージョン
audio オーディオ id String audioコンポーネントのユニークな識別子
src String オーディオ再生リソースのURL
loop Boolean false ループ再生?
controls Boolean false デフォルトのコントロールを表示しますか?
poster String デフォルトのコントロールのオーディオジャケットの画像リソースのURL、controls属性がfalseの場合、posterの設定は無効になります。
name String 未知オーディオ デフォルトのコントロールのオーディオ名、controls属性がfalseの場合はnameの設定が無効です
author String 著者不明 デフォルトのコントロール上の著者名、`controls`属性が`false`の場合は`author`を無効に設定します。
binderror EventHandle エラー発生時にerrorイベントがトリガーされ、detail={errMsg: MediaError.code}
bindplay EventHandle 再生/続行時にplayイベントがトリガーされます
bindpause EventHandle 再生停止時にpauseイベントが発火します。
bindtimeupdate EventHandle 再生進度が変わるとtimeupdateイベントが発火します、detail = {現在時間, 継続時間}
bindended EventHandle 再生終了時にendedイベントが発生します
image 画像 src String 画像リソースURL
mode String 'scaleToFill' 画像の切り取り・拡大・縮小モード
lazy-load Boolean false 画像の遅延読み込み。pageとscroll-view内のimageのみに適用 1.5.0
binderror HandleEvent エラーが発生したとき、AppServiceに配信されるイベント名は「イベント名」で、イベントオブジェクトのevent.detailは「errMsg: 'something wrong'」です。
bindload HandleEvent 画像が読み込まれた時のAppServiceへのイベント名は、「画像読み込み完了」となり、イベントオブジェクトevent.detailは以下のようになります:{height:'画像の高さ(px)', width:'画像の幅(px)'}
video ビデオ src String ビデオ再生のためのリソースURLを提供してください。
initial-time Number 指定したビデオの再生位置を設定する 1.6.0
duration Number 指定された動画の長さ 1.1.0
controls Boolean true デフォルトのプレイヤーコントロール(再生/一時停止ボタン、再生進行、時間)を表示しますか?
danmu-list Object Array 弾幕リスト
danmu-btn Boolean false バリアムーンボタンを表示するかどうか、初期化時のみ有効で、動的に変更できないです。
enable-danmu Boolean false 弹幕表示有効かどうかは、初期化時にのみ有効で、動的に変更できないです。
autoplay Boolean false 自動再生?
loop Boolean false ループ再生? 1.4.0
muted Boolean false ミュート再生? 1.4.0
page-gesture Boolean false 非フルスクリーンモードでは、明るさとボリュームの調節にジェスチャー機能を有効にしますか? 1.6.0
direction Number 全画面時のビデオ方向を設定、指定しない場合は横縦比に応じて自動で判断されます。有効値は0(通常の縦向き)、90(画面反時計回り90度)、-90(画面時計回り90度)です。 1.7.0
bindplay EventHandle 再生/続行時にplayイベントがトリガーされます
bindpause EventHandle 再生停止時にpauseイベントが発火します。
bindended EventHandle 再生終了時にendedイベントが発生します
bindtimeupdate EventHandle 再生進度変更でトリガー,event.detail = {現在時間, 総再生時間}。トリガー頻度 250ms に一度
bindfullscreenchange EventHandle ビデオがフルスクリーンに入り出ると、event.detail = {fullScreen, direction}、directionはverticalまたはhorizontalとします。 1.4.0
objectFit String contain ビデオサイズとコンテナサイズ不一致時のビデオの表示形態 contain:含む、fill:満たす、cover:覆う
poster String ビデオのサムネイルの画像のウェブリソースURL、controls属性がfalseの場合、posterを設定しても無効です。

地图(Map):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 最低バージョン
map 地図 longitude Number 中央経度
latitude Number 中心緯度
scale Number 16 ズームレベル、範囲は5~18です。
markers Array マークポイント
covers Array 削除予定、markersを使用してください。
polyline Array ルート
circles Array
controls Array コントロール
include-points Array 全ての座標点を含めるように視野を拡大縮小してください。
show-location Boolean 現在の位置を示す方向付きのポイント表示
bindmarkertap EventHandle マーカーポイントをクリック時にトリガー
bindcallouttap EventHandle マークポイントのバブルをクリックすると、イベントが発生します。 1.2.0
bindcontroltap EventHandle コントロールをクリック時にトリガー
bindregionchange EventHandle 視野が変わったときに発動
bindtap EventHandle 地図をクリックすると起動
bindupdated EventHandle 地図レンダリングが更新完了時にトリガー 1.6.0

画布(Canvas):

コンポーネント名 注釈 コンポーネント属性
属性名:属性名 タイプ デフォルト値 説明 最低バージョン
canvas キャンバス src String ビデオ再生のためのリソースURLを提供してください。
initial-time Number 指定したビデオの再生位置を設定する 1.6.0
duration Number 指定された動画の長さ 1.1.0
controls Boolean true デフォルトのプレイヤーコントロール(再生/一時停止ボタン、再生進行、時間)を表示しますか?
danmu-list Object Array 弾幕リスト
danmu-btn Boolean false バリアムーンボタンを表示するかどうか、初期化時のみ有効で、動的に変更できないです。
enable-danmu Boolean false 弹幕表示有効かどうかは、初期化時にのみ有効で、動的に変更できないです。
autoplay Boolean false 自動再生?
loop Boolean false ループ再生? 1.4.0
muted Boolean false ミュート再生? 1.4.0
page-gesture Boolean false 非フルスクリーンモードでは、明るさとボリュームの調節にジェスチャー機能を有効にしますか? 1.6.0
direction Number 全画面時のビデオ方向を設定、指定しない場合は横縦比に応じて自動で判断されます。有効値は0(通常の縦向き)、90(画面反時計回り90度)、-90(画面時計回り90度)です。 1.7.0
show-progress Boolean true 設定しない場合、240ピクセルを超えると表示されます。 1.9.0
show-fullscreen-btn Boolean true 全屏ボタンは表示されますか? 1.9.0
show-play-btn Boolean true ビデオの下にあるコントロールバーの再生ボタンを表示するかどうか 1.9.0
show-center-play-btn Boolean true 中間の再生ボタンを表示しますか? 1.9.0
enable-progress-gesture Boolean true 進捗を制御するジェスチャーをオンにしますか? 1.9.0
bindplay EventHandle 再生/続行時にplayイベントがトリガーされます
bindpause EventHandle 再生停止時にpauseイベントが発火します。
bindended EventHandle 再生終了時にendedイベントが発生します
bindtimeupdate EventHandle 再生進度変更でトリガー,event.detail = {現在時間, 総再生時間}。トリガー頻度 250ms に一度
bindfullscreenchange EventHandle ビデオがフルスクリーンに入り出ると、event.detail = {fullScreen, direction}、directionはverticalまたはhorizontalとします。 1.4.0
objectFit String contain ビデオサイズとコンテナサイズ不一致時のビデオの表示形態 contain:含む、fill:満たす、cover:覆う
poster String ビデオのサムネイルの画像のウェブリソースURL、controls属性がfalseの場合、posterを設定しても無効です。

最近使用した:

収蔵 メニュー QQ