一、template的概念
template模板顾名思义就是页面的复用,前端可以理解成组件中通用页面的封装,后端可以理解成时函数的封装,主要的作用就是服用减少代码冗余
比如下面几个场景:
首页需要显示轮播,分类页面也需要显示轮播,详情页面也需要显示轮播。三个地方都是需要使用轮播,并且是同一个轮播。这时就可以使用template 了 把轮播的代码提取出来放入模板标签中 在多个页面引用这个模板 ,把重复的xwml 提取出来重复使用 减少代码冗余。
二、template模板的使用
1.定义模板
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
2.使用模板
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
3.is的用法
<!-- 动态数据 -->
<template name="tem_2">
<!-- 显示 -->
<view wx:if="{{mentor_image_uri==null}}">
<!-- 默认图片地址 -->
<image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
</view>
<view wx:else>
<image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
</view>
<view class='info'><span>姓名:</span>{{mentor_name}}</view>
<view class='info'><span>职位:</span>{{career}}</view>
<view class='info'><span>公司:</span>{{company_name}}</view>
<view class='info'><span>地区:</span>{{address}}</view>
<view class='info'><span>擅长:</span>{{mentor_skills}}</view>
<navigator>详情</navigator>
<view class='hr'></view>
</template>
<!-- 默认,不动态写入数据-->
<template name="tem_3">
<!-- 显示 -->
<view wx:if="{{mentor_image_uri==null}}">
<!-- 默认图片地址 -->
<image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
</view>
<view wx:else>
<image class="widget_arrow" src="../../image/timg.jpg" mode="aspectFill"></image>
</view>
<view class='info'><span>姓名:</span>lcy</view>
<view class='info'><span>职位:</span>程序员</view>
<view class='info'><span>公司:</span>未知</view>
<view class='info'><span>地区:</span>珠海</view>
<view class='info'><span>擅长:</span>爱笑</view>
<navigator>详情</navigator>
<view class='hr'></view>
</template>
<!-- 引入模块 -->
<import src="../index7/index.wxml" />
<!-- is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板 -->
<block wx:for="{{message2}}">
<!-- 1==1是true,所以使用tem_2模板 -->
<template is="{{1 == 1 ? 'tem_2' : 'tem_3'}}" data="{{...item}}"/>
</block>
data: {
message2:[
{
mentor_image_uri: "../../image/timg2.jpg",
mentor_name: "ljq",
career: "护士",
company_name: "中山远大医院",
address: "中山市",
"mentor_skills": "爱看书"
}
]
},
.name {
text-align: center;
}
.widget_arrow {
margin-top: 20px;
height: 200px;
width: 200px;
margin-left: 25%;
}
.info {
font-size: 14px;
width: 370rpx;
margin: auto;
margin-top: 10px;
}
.info span{
font-weight: 600;
}
.info_border {
height: 200px;
width: 200px;
border: 8px solid red;
}
navigator {
margin: 0 auto;
height: 40px;
width: 90%;
margin-top: 20px;
margin-bottom: 20px;
background-color: green;
line-height: 40px;
text-align: center;
}
.hr {
height: 0;
width: 100%;
border: 1px solid green;
}
总结
在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用;
- 在同一个WXML文件中创建多个类似的模板用name属性来区别;
- 模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量;
- 使用 import 引入模板 WXML 和 WXSS ;
- 通过template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data 属性代表传入模板的数据。