WeChatミニプログラムページの開発

WXML (WeiXin Markup Language) はフレームワークによって設計されたタグ言語のセットで、基本コンポーネントやイベント システムと組み合わせることで、ページの構造を構築できます。

WXML は、垂直処理、水平処理、論理処理の 3 つの側面から導入されると思います。ここで簡単に紹介します。小さなプログラムを開発するための基礎でもあります。必要に応じてドキュメントに応じて使用できます。詳細は後ほど紹介しますが、随時機能を拡張していきます。

Vertical

Vertical: システム コンポーネント、サードパーティ コンポーネント、カスタム コンポーネントを含むコンポーネントの組み合わせ。

例:

<view class="container">
  <view class="userinfo">
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname"> 用户名 </text>
  </view>
</view>

システムコンポーネント:

• ビューコンテナ: カバー画像、カバービュー、可動領域、可動ビュー、スクロールビュー、スワイパー、スワイパーアイテム、ビュー

• 基本コンテンツ: アイコン、進行状況、リッチテキスト、テキスト

• フォーム コンポーネント: ボタン、チェックボックス、チェックボックス グループ、エディター、フォーム、入力、ラベル、ピッカー、ピッカー ビュー、ピッカー ビュー列、ラジオ、ラジオ グループ、スライダー、スイッチ、テキストエリア

• ナビゲーション: function-page-navigator 、ナビゲーター

• メディア コンポーネント: オーディオ、カメラ、画像、ライブ プレーヤー、ライブ プッシャー、ビデオ

• マップ: マップ

• キャンバス: キャンバス

• ##オープン機能: 広告、公式アカウント、オープンデータ、ウェブビュー

• ネイティブコンポーネントの説明:native-component

• アクセシビリティ:aria-component

• ナビゲーションバー:navigation-bar

• ページ属性構成ノード: page-meta

#具体的な参照:

https://developers.weixin.qq.com/miniprogram/dev / Component/native-component.html
##サードパーティ コンポーネント

: たとえば、WeUI コンポーネント ライブラリなど。

カスタム コンポーネント

:カスタム コンポーネントには独自の wxml テンプレートと wxss スタイルがあります

水平

水平: コンポーネント属性

##属性名説明id一意の識別スタイルシートインライン スタイル非表示イベント配信データコンポーネント イベント##論理処理論理処理: バインドされたデータに基づいてビューを表示する方法を決定します

	class
	スタイル
	非表示
	data-*
	bind* /catch*

データ バインディング

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

リスト レンダリング

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件付きレンダリング

<!--wxml-->
<view wx:if="{{view == &#39;WEBVIEW&#39;}}"> WEBVIEW </view>
<view wx:elif="{{view == &#39;APP&#39;}}"> APP </view>
<view wx:else="{{view == &#39;MINA&#39;}}"> MINA </view>
// page.js
Page({
  data: {
    view: 'MINA'
  }
})

ビュー コンポーネントをラップするために使用されるブロック

If wx: for, wx:if ビュー コンテナをレンダリングするには、ブロック タグでビュー コンテナをラップできます。ブロック タグはコンポーネントではなく、パッケージ化に使用される要素です。レンダリングされず、wx:.. コントロール属性のみを受け入れます。

block と wx:if:

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

block と wx:for:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

推奨チュートリアル: 「

WeChat ミニ プログラム

」

以上がWeChatミニプログラムページの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。