WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用减少冗余代码。
定义模板
1、创建模板文件夹
2、使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
index.wxml
<!-- 使用 name 属性,作为模板的名字 -->
<template name="personCourseItemTmp">
<!-- 显示 -->
<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>
wxss
.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;
}
使用模板
1、创建index8
2、在需要使用的页面使用import导入该wxml页面,注意路径位置
<!-- 引入模块 -->
<import src="../index7/index.wxml" />
<block wx:for="{{message}}" wx:key="id">
<template is="personCourseItemTmp" data="{{...item}}"></template>
</block>
3、在index8的css引入index7的样式
@import "../index7/index.wxss"
4、在index8的js动态写入数据
data: {
message:[
{
mentor_image_uri:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568915845390&di=5869e0800f62408732666af4b5cdb8b3&imgtype=0&src=http%3A%2F%2Fpic27.nipic.com%2F20130320%2F11295670_210523384101_2.jpg",
mentor_name:"lhs",
career: "程序员",
company_name:"aft",
address:"珠海",
"mentor_skills":"微信小程序"
},
{
mentor_image_uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568915927456&di=26e1c8cd5943c7882d262e400824c485&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F09%2F20141209153333_GxPwi.jpeg",
mentor_name: "lwx",
career: "美工",
company_name: "aft",
address: "珠海",
"mentor_skills": "PS"
}
]
},
运行结果:
如果只想显示其中的一条数据,修改代码如下:
<!-- 引入模块 -->
<import src="../index7/index.wxml" />
<block wx:for="{{message}}" wx:key="id">
<template wx:if="{{index==0}}" is="personCourseItemTmp" data="{{...item}}"></template>
</block>
is 属性,声明需要的使用的模板,另外is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板,如:
1、在index7定义模板,样式不变
<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="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568918751270&di=845feea8b31fb2814991df9679322dc4&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201412%2F09%2F20141209153333_GxPwi.jpeg" 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>
2、在index8使用模板
<!-- 引入模块 -->
<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>
3、在index8.js动态写入数据
data: {
message2:[
{
mentor_image_uri: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1568915845382&di=be3abfb43d847756aed408cb2b84801c&imgtype=0&src=http%3A%2F%2Fpic8.nipic.com%2F20100804%2F2531170_092104047974_2.jpg",
mentor_name: "ljq",
career: "?",
company_name: "?",
address: "?",
"mentor_skills": "爱看书"
}
]
},
结果如下:
总结
- 在一个项目中需要在多处页面使用类似的模块,就需要创建模板—-减少代码量,同时代码高度复用;
- 在同一个WXML文件中创建多个类似的模板用name属性来区别;
- 模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量;
- 使用 import 引入模板 WXML 和 WXSS ;
- 通过template 标签使用模板,template 标签的 is 属性与模板的 name 属性对应,data 属性代表传入模板的数据。