フロントページに書かれたマイクロチャネルアプレット

WXML（WeiXinマークアップ言語）と組み合わせたマークアップ言語設計フレームワークであり、基本コンポーネント、イベント・システムは、ページの構造を構築することができます。

A.データバインディング

1.手書き

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

2.コンポーネントのプロパティ

**简直和上面没区别啊**

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
  }
})

3. bool型

計算結果が文字列で、直接=「false」にチェックを書き込まないでください

<checkbox checked="{{false}}"> </checkbox>

II。操作

1.三項演算子

<view hidden="{{flag ? true : false}}"> Hidden </view>

2.算術

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

3.分析ロジック

<view wx:if="{{length > 5}}"> </view>

4.文字列操作

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

III。レンダリングリスト

1. WX：について

デフォルトの変数名のエントリitem wx:for-itemの変数名は、現在の要素の配列を指定することができます

インデックス変数名のデフォルトはindex wx:for-index、現在の基本となる配列変数名で指定することができます

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

2. WX：について

最終的なマルチノードのブロック構成を含むレンダリングブロックは、真にDOM要素とはなりません

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

3. WX：キー

の効率的な利用

IV。条件レンダリング

1. WX：もし

フレームで、使用してwx:if="{{condition}}"ブロックをレンダリングするかどうかを決定します。

<view wx:if="{{condition}}"> True </view>

また、使用することができますwx:elifし、wx:else他のブロックを追加します：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

ブロックWX：もし

のでwx:if制御属性は、ラベルに追加する必要があります。複数の成分は、使い捨てのタグであると判断された場合は、使用することができ<block/>、複数の構成要素、および上の利用包むためにラベルをwx:if制御する属性を。

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

注： <block/>、それだけでラッパー要素部品ではない、唯一のコントロールのプロパティを受け入れ、ページ上の任意のレンダリングを行うことはありません。

2.隠されました

hiddenはるかに簡単、コンポーネント始终会被渲染、只是简单的控制显示与隐藏。

<view hidden="{{condition}}"> True </view>

同様にwx:if異なるヒデ制御が開発しているが、レンダリングコントロールするかどうかもし

したがって、次のシーンではとの頻繁な切り替え、必要な場合はhidden、より良いを、実行時に条件が変わりそうであればwx:if、より良いが。

V.特別ラベル

1.text

<!-- <text> </text>  相当于span标签 -->

2.view

<!-- <view></view>    相当于div标签 -->

3.block

 <!--block标签就是只显示内容不会嵌套任何标签 -->

4.画像

写真ラベル、イメージ・コンポーネントのデフォルトの幅320PX、高さ240ピクセル

注意：このラベルは、画像に実際にあるウェブタグと背景画像の組み合わせです！！！そして、背景画像の前のウェブの文言をサポートしていません！！！

プロパティ名	タイプ	デフォルト値	説明
SRC	弦		ピクチャーアドレスリソースは、クラウドファイルID（2.2.3以降）をサポートするために
モード	弦	'ScaleToFill'	画像切り出し、スケーリングモード
レイジーロード	ブーリアン	偽	写真遅延ロード。ページだけで画像やスクロールビューの有効な

モード有効な値：

ズームモードであり、そのうちの4つのモード13個のモードは、パターンの9種類が切断されます。

モード	値	説明
スケーリング	scaleToFill	画像が完全に延伸画像要素の幅と高さを充填するように、アスペクト比をスケーリング画像は、維持されていません
スケーリング	aspectFit	画像をスケーリングするアスペクト比を維持し、長辺の画像が完全に表示させることができます。
スケーリング	aspectFill	のみ画像の短辺が完全に表示させることができることを確実にするために、画像をスケーリングアスペクト比を維持します。
スケーリング	widthFix	一定の幅、高さの変更は自動的に同じアスペクト比の画像を維持すること
切り取ります	上	画像を拡大縮小ではない、トップ領域の画像のみを表示します
切り取ります	底	底面積の写真だけを表示し、画像を拡大縮小ではありません
切り取ります	センター	中間領域の画像のみを表示し、画像を拡大縮小ではありません
切り取ります	左	画像を拡大縮小ではない、左側の領域にのみ画像を表示します
切り取ります	右	右側の領域の画像のみを表示し、画像を拡大縮小ではありません
切り取ります	左上	左上の領域の画像のみを表示し、画像を拡大縮小ではありません
切り取ります	右上	画像を拡大縮小ではない、絵の唯一の右上の領域を示し、
切り取ります	左下の	、画像を拡大縮小左下の領域の画像のみが表示されません
切り取ります	右下	右下の領域の画像のみを表示し、画像を拡大縮小ではありません

5、swiper

図のカルーセル内蔵マイクロチャネルアセンブリ。

デフォルトの幅150ピクセル高さ100％

プロパティ名	タイプ	デフォルト値	説明
指標ドット	ブーリアン	偽	表示パネルがポイントかどうかを示します
表示色	色	RGBA（0、0、0、0.3）	いくつかの色を示します
インジケータ活性カラー	色	＃000000	示すために、現在選択されている色
自動再生	ブーリアン	偽	自動的に切り替えるかどうか
間隔	数	5000	自動切替時間間隔
円形の	ブーリアン	偽	収束スライドを採用するかどうか

6.swiperアイテム

スライダー

デフォルトの幅と高さが100％

7.video

ビデオ。このコンポーネントは、ネイティブコンポーネント、関連する制限の使用を注意してください。

プロパティ名	タイプ	デフォルト値	説明
SRC	弦		クラウドファイルID（以降2.2.3）をサポートするビデオアドレスリソースを再生するには
期間	数		ときに長いビデオを指定します
コントロール	ブーリアン	真	デフォルトの再生コントロール（再生/一時停止ボタン、再生の進行状況、時間）を表示するかどうか
自動再生	ブーリアン	偽	自動再生するかどうか
ループ	ブーリアン	偽	ループするかどうか
ミュート	ブーリアン	偽	サイレント果たしています

<video src="{{src}}" controls></video>