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>