1-定义模板布局”>1. 定义模板布局
建议新建目录专门放置模板。本文在pages目录下创建了template目录。
在template目录下创建模板布局文件msg.wxml：
1
2
3
4
5
6
7
8
9
10
11
|
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
|
上面代码中template表现的name是模板的id；
2. 定义模板样式
创建模板样式，建议和模板布局放到相同目录；
在template目录下的模板样式文件msg.wxss：
1
2
3
4
|
.msgBg {
background: #099;
padding: 0.5rem;
}
|
3. 引用模板
在需要应用模板的地方添加引用：
1
2
|
<!--引入模板-->
<import src="../template/msg.wxml" />
|
在需要使用模板的地方添加引用代码：
1
2
|
<!-- 使用模板 -->
<template is="msgItem" data="{{...itemOne}}" />
|
完成的业务引用代码如下（index.wxml）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!--引入模板-->
<import src="../template/msg.wxml" />
<view class="container">
<!-- 使用模板 -->
<template is="msgItem" data="{{...itemOne}}" />
<!-- 使用模板for -->
<block wx:for="{{items}}" wx:for-item="item">
<template is="msgItem" data="{{...item}}" />
</block>
</view>
|
is是模板id，data负责传值；data传值使用ES6展开运算符”…”，那么就不需要在模板里面添加item.XXX了。
4. 引用样式
模板样式也需要添加引用，在引用方的样式代码中添加引用代码如下：
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
0 |
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
1 |
完成的样式引用代码如下（index.wxss）：
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
2 |
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
3 |
5. 赋值初始化
通过以上四个步骤，模板布局和样式都有了，剩下的就是如何复制和展示数据了。 代码如下（index.js）：
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
4 |
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
5 |
官方介绍地址：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html
转载请注明：逗比根据地 » 微信小程序之页面模板
