1.什么是模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
通俗点，我的理解是，和组件类似，你要在多个地方用到一样的view，相同的写法，那么就把它归纳在一起，弄一个模板，可以在其他页面调用它，和word文档中的样式模板有些类似。
2.模板前期准备
模板-纯文字.png
2.1第一步，新建模板目录（template），与page同级
image.png
image.png
2.2在模板中建立页面，wxml和wxss，用来存放模板和模板样式
模板.png
2.3在wxml中定义模板（在wxml中可以写入多个模板，用name区分）
使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段.
name属性就是这个模板的名字。
2.3.1案例展示
wxml（纯文本）
这是一段纯文字，在每一个页面中我都可能要用到，例如在提交的时候，按钮前面的承诺文字。
<template name="template_text">
<view class="temp_text">你好，这是我的第一个模板，我的名字是template_text</view>
</template>
wxml（数据01）
这是一个按钮，统一样式，运用到各种页面，唯一的区别就是按钮里面的文字，用{{ButName}}来控制
<template name="template_data">
<view class="temp_data">
<button class="temp_data-btn" type="warn" form-type='submit'>{{ButName}}</button>
</view>
</template>
wxml(数据02-列表循环)
例如文章循环，我只需要文章标题和内容，用模板循环，简洁又方便。
<template name="building">
<view class="buildList">
<view class="bulid-hd">{{Bname}}</view>
<view class="build-bd">{{Btitle}}</view>
</view>
</template>
wxss
.temp_text{
line-height: 40rpx;
font-size: 30rpx;
color: red;
}
.buildList{
position: relative;
padding: 20rpx 30rpx;
line-height: 60rpx;
font-size: 34rpx;
color: #333;
background: #fff;
overflow: hidden;
}
.buildList::after{
content: "";
position: absolute;
left: 0;
right: 0;
bottom:0;
width: 100%;
height: 1px;
background: #ddd;
}
.build-bd{
font-size: 28rpx;
color: #888;
}
2.4页面中引用相应的模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。
is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板。is属性和模板（template）中的name值对应。
在input页面上引用相关模板---input.wxml
//引用模板wxml
<import src="../../template/template.wxml"/>
//模板应用（is和name值一致）
<template is="template_text" ></template>
<template is="template_data" data="{{ButName}}"></template>
<block wx:for="{{bulidlist}}" wx:key="*this">
<template is="building" data="{{...item}}"></template>
</block>
注意：
data 是要模板渲染的数据，data="{{...item}}" 写法是ES6的写法，item是wx:for当前项，... 是展开运算符，在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。
input.wxss
@import '../../template/template.wxss';
input.js
Page({
data: {
ButName:"提交业务",
bulidlist:[
{
Bname:'第一节课',
Btitle:'今天的天气真不错'
},
{
Bname: '第二节课',
Btitle: '今天的天气真不错'
},
{
Bname: '第三节课',
Btitle: '今天的天气真不错'
},
{
Bname: '第四节课',
Btitle: '今天的天气真不错'
}
]
}
})
效果
image.png
不懂之处：
1.Mustache 语法
2.把【上传图片，显示图片】这部分做成模板，数据绑定有些困惑，还没有搞懂。
3.假如在模板中判断，也不是很懂。例如下图：
不懂.png
网友评论