微信小程序——template详细使用-即速应用

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": "爱看书"      }    ]  },

结果如下：

小程序