微信小程序----模板（template）
模板
关于引用

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