WeChatアプレットTemplate詳細解及び簡単例
4664 ワード
WeChatアプレットTemplate
テンプレート
WXMLはテンプレート(Template)を提供し、テンプレートにコードセグメントを定義して、異なる場所で使用することができます.フォーマットとデータは同じです.
1-テンプレートの定義
テンプレートをラベルで定義し、テンプレート名をtempNameと命名し、属性nameに値を付けます.ラベルの内部にテンプレート構造を定義します.以下のとおりです
?
1
2
3
4
5
6
7
8
9
10
11
12
テンプレート
WXMLはテンプレート(Template)を提供し、テンプレートにコードセグメントを定義して、異なる場所で使用することができます.フォーマットとデータは同じです.
1-テンプレートの定義
テンプレートをラベルで定義し、テンプレート名をtempNameと命名し、属性nameに値を付けます.ラベルの内部にテンプレート構造を定義します.以下のとおりです
?
1
2
3
4
5
6
7
8
9
10
11
12
"msgItem"> {{index}}: {{msg}} Time: {{time}}
2-テンプレートを う
ラベルを して、テンプレートが なところにあります.jsファイルのデータを うには、data を する があります. のとおりです
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
"msgItem"data="{{...item}}"/>
"msgItem"data="{{...item}}"/>
"msgItem"data="{{...item}}"/> 。data ， js ， ： Page({ data: { item: { index: 0, msg: 'this is a template', time: '2016-09-15' } }})3-is
is は、レンダリングされたテンプレートを に すだけでなく、Mustache を いて、どのテンプレートをレンダリングする があるかを に することもできる. のとおりです
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14// templates
"odd"> odd
"odd"> even
// is Mustache template
for="{{[1, 2, 3, 4,5]}}">
"{{item % 2 == 0 ? 'even' : 'odd'}}"/>
のコードの は、 に じて、oddまたはevenをページに します.
4-テンプレートの
のように じwxmlファイルでテンプレートを して しますが、テンプレートの と は できます. つのファイルでテンプレートを しますが、 のファイルwxmlファイルでは みのテンプレートが できます. ファイルからテンプレートを して、import src=「templateUrl」タブを します. にis を して するラベルを します.ディレクトリのように:
?
1
2
3
4
5
6
7
8
9
10
11-pages |--index |--index.js |--index.json |--index.wxml |--index.wxss |--template |--template.js |--template.json |--template.wxml |--template.wxssindex.wxmlでtemplateで されたテンプレートを するには、indexでimportを してテンプレートを する があります.
?
1
2
3
4
"../template/template.wxml"
"msgItem"data={{...indexData}}// js importのスコープに してください. ファイルのtemplateだけを してください. えば:
C import B,B import Aは、CではB のtemplateを することができ、BではA のtemplateを することができますが、
CはA のtemplateを できません.