05-WeChatミニプログラムの共通コンポーネント-フォームコンポーネント

05-WeChatミニプログラムの共通コンポーネント-フォームコンポーネント

WeChat ミニ プログラムは、 ビュー コンテナ 、 基本コンテンツ 、 ナビゲーション 、 フォーム 、 インタラクション 、および ナビゲーション の 6 つの主要コンポーネントで構成されています。これらのコンポーネントは、WXML および WXSS を通じてレイアウトおよびスタイル設定できるため、豊富なアプレット インターフェイスとインタラクティブなエクスペリエンスを構築できます。

• このうち、ビュー コンテナ コンポーネントには、ページの構造とスクロール効果を実現するために使用されるビューやスクロール ビューなどが含まれます。
• 基本的なコンテンツ コンポーネントには、テキストや画像のコンテンツを表示するために使用されるテキストや画像などが含まれます。
• フォームコンポーネントには、ユーザーの入力と選択のためのボタン、入力、チェックボックスなどが含まれます。
• インタラクティブコンポーネントには、ユーザー間の対話や操作を実現するためのコンタクトやアクションシートなどが含まれます。

フォームコンポーネント

WeChat ミニ プログラム フォーム コンポーネントの公式ドキュメント

ボタン ボタン

機能説明

ボタン。

プロパティの説明

Skyline は WebView プロパティとの相違点のみをリストします。リストされていないプロパティは WebView と一致します。

WebView スカイライン

属性	タイプ	デフォルト	必須	説明する	最小バージョン
サイズ	弦	デフォルト	いいえ	ボタンのサイズ	1.0.0
タイプ	弦	デフォルト	いいえ	ボタンのスタイルタイプ	1.0.0
無地	ブール値	間違い	いいえ	ボタンがくり抜かれて背景色が透明かどうか	1.0.0
無効	ブール値	間違い	いいえ	無効にするかどうか	1.0.0
読み込み中	ブール値	間違い	いいえ	名前の前に読み込みアイコンを付けるかどうか	1.0.0
フォームタイプ	弦		いいえ	フォームコンポーネントの場合、クリックするとフォームコンポーネントの送信/リセットイベントがそれぞれトリガーされます。	1.0.0
オープンタイプ	弦		いいえ	WeChat オープン機能	1.1.0
ホバークラス	弦	ボタンホバー	いいえ	ボタンを押すときのスタイル クラスを指定します。hover-class="none"現時点では、クリック状態の効果はありません	1.0.0
ホバーストップ伝播	ブール値	間違い	いいえ	このノードの祖先ノードがクリック状態で表示されないようにするかどうかを指定します	1.5.0
ホバー開始時間	番号	20	いいえ	長押ししてからクリック状態が現れるまでの時間 (ミリ秒単位)	1.0.0
ホバー滞在時間	番号	70	いいえ	指を離した後のクリック状態の保持時間 (ミリ秒単位)	1.0.0
ラング	弦	で	いいえ	ユーザー情報を返す言語を指定します。簡体字中国語の場合は zh_CN、繁体字中国語の場合は zh_TW、英語の場合は en です。	1.3.0
セッションから	弦		いいえ	セッションソース、open-type="contact" の場合に有効	1.4.0
送信メッセージのタイトル	弦	現在のタイトル	いいえ	セッション中のメッセージ カードのタイトル。open-type="contact" の場合に有効です。	1.5.0
送信メッセージパス	弦	現在の共有パス	いいえ	セッション内のメッセージ カードをクリックすると、アプレット パスにジャンプします。open-type="contact" の場合に有効です。	1.5.0
メッセージ送信画像	弦	スクリーンショット	いいえ	会話中のメッセージ カードの画像、open-type="contact" の場合に有効	1.5.0
アプリパラメータ	弦		いいえ	APP が開かれるとき、open-type=launchApp の場合、APP に渡されるパラメータは有効です	1.9.5
メッセージカードの表示	ブール値	間違い	いいえ	セッションでメッセージ カードを表示するかどうかを指定するには、このパラメーターを true に設定します。ユーザーはカスタマー サービス セッションに入り、右下隅に「送信されるミニ プログラム」プロンプトが表示され、ユーザーはすぐにミニ メッセージを送信できます。 open-type="contact" の場合、クリック後のプログラムメッセージが効率的	1.5.0
バインドゲットユーザー情報	イベントハンドル		いいえ	ユーザーがボタンをクリックすると、取得したユーザー情報が返され、コールバックの詳細データはwx.getUserInfoによって返されるデータと一致します。 open-type="getUserInfo" の場合に有効です。	1.3.0
バインドコンタクト	イベントハンドル		いいえ	カスタマー サービス メッセージ コールバック、open-type="contact" の場合に有効	1.5.0
バインド電話番号を取得	イベントハンドル		いいえ	携帯電話番号のクイック確認コールバック、open-type=getPhoneNumber の場合に有効	1.2.0
バインドエラー	イベントハンドル		いいえ	open 機能を使用すると、エラー コールバックが発生します。open-type=launchApp の場合に有効です。	1.9.5
バインドオープン設定	イベントハンドル		いいえ	認可設定ページを開いた後のコールバック、open-type=openSettingの場合に有効	2.0.7
バインド起動アプリ	イベントハンドル		いいえ	APP を正常に開くためのコールバック。open-type=launchApp の場合に有効です。	2.4.4
バインド選択アバター	イベントハンドル		いいえ	ユーザー アバター コールバックを取得します。open-type=chooseAvatar の場合に有効です。	2.21.2

バグとヒント

1. tip:button-hoverデフォルトは{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: 1.2.0から対応していますが、 bindgetphonenumber1.5.3未満のバージョンではwx.canIUseによる検出ができないため、基本ライブラリ版での判定を推奨します。
3. tip:bindgetphonenumber暗号化された情報を返すコールバックでwx.login を呼び出します。これにより、ログイン ステータスが更新される場合があります。このとき、サーバーがコード用に交換した sessionKey は暗号化に使用された sessionKey ではないため、復号化に失敗します。開発者は、ログイン ステータスの更新を避けるために、事前にこれを実行するloginか、コールバックで を使用して最初にログイン ステータスを確認することをお勧めします。checkSessionlogin
4. tip: 2.21.2 以降、getPhoneNumberインターフェイスのセキュリティ アップグレードが行われ、bindgetphonenumber返される情報にcodeパラメータが追加され、code動的トークンをcode取得した後、開発者は WeChat バックグラウンド インターフェイスを呼び出して交換する必要があります。携帯電話番号。詳細新バージョンインターフェースユーザーガイド
5. tip: 2.1.0 以降、ボタンをネイティブ コンポーネントの子ノードとして埋め込むことができるため、ネイティブ コンポーネント上で使用できるようになりますopen-type。
6. tip:現在設定されているform-typeものは、button現在のコンポーネント内でのみ有効ですform。したがって、buttonカスタム コンポーネント内でカプセル化すると、formカスタム コンポーネントの外側でカプセル化すると、buttonthisの が無効になりますform-type。

ケースコード

主要な	緑
デフォルト	白
警告する	赤

wxml

<view>
  <button size='default'>默认尺寸按钮</button>
  <button size='mini'>mini按钮</button>
  <button size='mini' type="primary">绿色mini按钮</button>
  <button size='mini' type="warn" plain="ture" >红色mini按钮</button>
</view>

• レンダリング

• 設定ボタンが無効になっています

disabled="ture"

[外部リンク画像の転送に失敗しました。ソース サイトには盗難防止リンク メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします (img-eqmQblGM-1692368330313) (2023 WeChat アプレット画像/image-20230630134604728.png)]

フォームフォーム

機能説明

形状。ユーザーがコンポーネントに入力したスイッチ 入力 チェックボックス スライダー ラジオ ピッカーを送信します。

フォーム form内で form-type が submit であるボタンコンポーネントをクリックすると、フォームコンポーネント内の value 値が送信されるため、フォームコンポーネントにキーとして name を追加する必要があります。

プロパティの説明

属性	タイプ	デフォルト	必須	説明する	最小バージョン
レポート提出	ブール値	間違い	いいえ	テンプレートメッセージを送信するために formId を返すかどうか	1.0.0
レポート送信タイムアウト	番号	0	いいえ	等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId	2.6.2
bindsubmit	eventhandle		否	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}	1.0.0
bindreset	eventhandle		否	表单重置时会触发 reset 事件	1.0.0

案例代码

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch" />
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value></slider>
  </view>
  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label>
        <radio value="radio1" /> radio1
      </label>
      <label>
        <radio value="radio2" /> radio2
      </label>
    </radio-group>
  </view>
  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label>
        <checkbox value="checkbox1" /> checkbox1
      </label>
      <label>
        <checkbox value="checkbox2" /> checkbox2
      </label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button form-type="submit">Submit</button>
    <button form-type="reset">Reset</button>
  </view>
</form>

• 效果

image 图片

功能描述

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性说明

Skyline 仅列出与 WebView 属性的差异，未列出的属性与 WebView 一致。

WebView Skyline

属性	类型	默认值	必填	说明	最低版本
src	string		否	图片资源地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
lazy-load	boolean	false	否	图片懒加载，在即将进入一定范围（上下三屏）时才开始加载	1.5.0
show-menu-by-longpress	boolean	false	否	长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

支持长按识别的码

类型	说明	最低版本
小程序码
微信个人码		2.18.0
企业微信个人码		2.18.0
普通群码	指仅包含微信用户的群	2.18.0
互通群码	指既有微信用户也有企业微信用户的群	2.18.0
公众号二维码		2.18.0

Bug & Tip

1. tip：image组件默认宽度320px、高度240px
2. tip：image组件进行缩放时，计算出来的宽高可能带有小数，在不同webview内核下渲染可能会被抹去小数部分

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

模式	合法值	说明	最低版本
缩放	scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
裁剪	heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变	2.10.3
裁剪	top	裁剪模式，不缩放图片，只显示图片的顶部区域
裁剪	bottom	裁剪模式，不缩放图片，只显示图片的底部区域
裁剪	center	裁剪模式，不缩放图片，只显示图片的中间区域
裁剪	left	裁剪模式，不缩放图片，只显示图片的左边区域
裁剪	right	裁剪模式，不缩放图片，只显示图片的右边区域
裁剪	top left	裁剪模式，不缩放图片，只显示图片的左上边区域
裁剪	top right	裁剪模式，不缩放图片，只显示图片的右上边区域
裁剪	bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
裁剪	bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

案例代码

<image src="../image/202306001.png"></image>
<image src="../image/202306003.png" mode="top"></image>

<image src="../image/202306001.png"></image>
<image src="../image/202306001.png" mode="right"></image>

``下一章节 微信小程序-注册程序-场景值.