WeChatミニプログラムテンプレートの詳しい説明と簡単な例

WeChat ミニ プログラム テンプレート

テンプレート

WXML は、テンプレート内でコード スニペットを定義し、さまざまな場所で使用できるテンプレート (テンプレート) を提供します。フォーマットとデータが同じであることが保証されます。

1 - テンプレートを定義します

`82570eb81cc0273be68dae335c9f8afa21c97d3a051048b8e55e3c8f199a54b2` タグを使用してテンプレートを定義し、テンプレート名に tempName という名前を付け、その値を属性名に割り当てます。タグ内でテンプレート構造を定義します。次のように:

<!-- template.wxml -->
<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

2-テンプレートを使用する

テンプレートを使用する必要がある場合は、7733932d10bb874b734d21e38bc23d19 タグを使用します。 js ファイル内のデータを使用する場合は、data 属性を追加する必要があります。次のように:

<!-- template.wxml -->
 
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
此时在页面上就会重复显示三次相同的信息。
data中的数据，来源于js文件，如下：
 
<!-- template.js -->
Page({
 data: {
  item: {
   index: 0,
   msg: &#39;this is a template&#39;,
   time: &#39;2016-09-15&#39;
  }
 }
})

3-is 属性

is 属性は、レンダリングされたテンプレートを静的に指すだけでなく、Mustache 構文を使用してどのテンプレートをレンダリングする必要があるかを動的に決定することもできます。以下のように:

<!-- template.wxml -->
 
// templates
<template name="odd">
  <view> odd </view>
</template>
<template name="odd">
  <view> even </view>
</template>
 
// is属性使用Mustache语法动态渲染template
<block wx:for="{{[1, 2, 3, 4,5]}}">
  <template is="{{item % 2 == 0 ? &#39;even&#39; : &#39;odd&#39;}}" />
</block>

上記のコードは、条件に従ってページ上に奇数または偶数を表示します

4-テンプレート参照

上記はすべて、同じ wxml ファイル内のテンプレートの定義と参照、およびテンプレートと参照は分離できます。つまり、テンプレートは 1 つのファイルで定義され、定義されたテンプレートは 1 つ以上の他の wxml ファイルで使用できます。
外部ファイルからテンプレートを参照するには、import src="templateUrl" /> タグを使用します。また、 is 属性を使用して、参照するラベルを指定します。
たとえば、ディレクトリは次のとおりです:

-pages
  |--index
    |--index.js
    |--index.json
    |--index.wxml
    |--index.wxss
  |--template
    |--template.js
    |--template.json
    |--template.wxml
    |--template.wxss

index.wxmlのtemplateで定義されたテンプレートを使用したい場合は、最初にimportを使用してテンプレートをindexにインポートする必要があります:

<!-- index.wxml -->
<import src="../template/template.wxml"
<template is="msgItem" data={{...indexData}}
// 使用的是自己js文件中的数据

お支払いくださいターゲット ファイル内のテンプレートのみを参照するインポート スコープに注意してください。例: C インポート B、B インポート A、C では B で定義されたテンプレートを使用でき、B では A で定義されたテンプレートを使用できますが、C では A で定義されたテンプレートを使用できません。

読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトをサポートしていただきありがとうございます!

WeChat ミニ プログラム テンプレート関連記事の詳細な説明と簡単な例については、PHP 中国語 Web サイトに注目してください。