前端开发系列098-小程序篇之模板的基本使用和引入

本文介绍小程序框架中模板的基本使用，并通过一个综合案例来演绎。

1.0 模板基本说明

在小程序开发过程中经常会发现有些相同的结构需要在不同的地方使用，我们没必要每次都创建代码做重复性的工作，这种情况可以考虑使用模板。我们可以把相同结构的代码放到一个模板中，需要使用的时候只需要通过模板语法来调用即可创建，而且模板语法还支持传参，灵活性很高且有利于提高效率和代码的可读性。

模板的基本用法可以简单分成两个部分：模板的定义和模板的使用。

定义模板非常简单，只需要把代码片段使用template来包裹并设置name属性即可。
在使用模板的时候，通过设置is属性的值为指定模板的name即可使用对应的模板，模板还支持传参。

这里给出模板定义和使用的基本示例代码：

//wxml文件的内容
<!-- 1.0 模板的定义 -->
<template name='template_one'>
<image src='http://wendingding.com/%E9%B2%B8%E9%B1%BC.png' class='imgClass'></image>
<text>我是文本标签:鲸鱼\n</text>
</template>

<template name='template_two'>
<text>\n哈哈\n</text>
<text>嘻嘻\n</text>
<text>呵呵\n</text>
</template>


<!-- 2.0 模板的使用 -->
<template is='template_one'></template>
<template is='template_two'></template>
<template is='template_two'></template>

//xmss文件的内容
style sheets
.imgClass
{
  width: 200rpx;
  height: 200rpx;
}

text{
  background: #593
}

模板传参

小程序框架中的模板支持传参，在向模板传参的时候只需要设置template中的data属性即可，需要注意的是小程序中的模板拥有独立的作用域，因此不能直接使用js文件中Page函数内部的data属性。页面在进行渲染的时候，template的内容会被模板中的代码完全替换。

<!-- 1.0 模板的定义 -->
<template name='template_one'>
<image src='{{srcImg}}' class='imgClass'></image>
<text>我是文本标签:{{name}}\n</text>
</template>

<template name='template_two'>
<text>\n哈哈\n</text>
<text>{{text1}}\n</text>
<text>{{text2}}\n</text>
</template>


<!-- 2.0 模板的使用 -->
//wxml文件的内容
<!-- 模板传参的第一种方式 -->
<template is='template_one'
data='{{srcImg:"http://wendingding.com/%E9%B2%B8%E9%B1%BC.png",name:"鲸鱼"}}'
></template>

<template is='template_one'
data='{{srcImg:"http://wendingding.com/老虎.jpeg",name:"老虎"}}'
></template>

<!-- 模板传参的第二种方式 -->
<template is='template_one' data='{{srcImg,name}}'></template>

<!-- 模板传参的第三种方式 -->
<template is='template_one' data='{{...obj}}'></template>

<template is='template_two' data='{{text1:"巴拉巴拉",text2:"溜溜"}}'></template>


<text>其他的内容</text>

//wxss文件的内容
.imgClass
{
  width: 200rpx;
  height: 200rpx;
}

text{
  background: #593
}

//js文件的内容
Page({
  data: {
    srcImg:"http://wendingding.com/%E8%80%81%E8%99%8E.jpeg",
    name:"老虎",
    obj:{
      srcImg: "http://wendingding.com/%E8%80%81%E8%99%8E.jpeg",
      name: "假老虎"
    }
  }
})

2.0 综合案例

这里给出一个模板使用的基本案例代码和对应的图示。

//模板的定义
<template name='addressCardTemplate'>
<view class='address-info-view'>
<view class='address-info-view-top'>
<text class='address-name'>杨勇老师</text>
<view class='address-status' hidden='true'>默认</view>
<view class='address-del'>删除</view>
<view class='address-edit'>编辑</view>
</view>
<view class='address-info-view-bottom'>
<text class='address-tel'>联系电话：18689429999</text>
<text class='address-detail'>详细地址：广州市天河区棠下大地XXXX</text>
</view>
</view>
</template>

//模板对应的样式文件
.address-info-view
{
  height: 220rpx;
  margin-top: 20rpx;
  background: #fff;
}

.address-info-view-top
{
  position: relative;
  height: 100rpx;
  border-bottom: 1px solid #ccc;
}

.address-name
{
  display: block;
  width: 200rpx;
  height: 100rpx;
  line-height: 100rpx;
  padding-left: 30rpx;
  font-size: 35rpx;
}

.address-status
{
  top: 30rpx;
  left: 220rpx;
  position: absolute;
  width: 60rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 25rpx;
  border-radius: 20rpx;
  border: 1px solid #089;
}

.address-del,.address-edit
{

  top: 20rpx;
  position: absolute;
  width: 140rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 25rpx;
  border-radius: 30rpx;
}

.address-edit
{
  right: 30rpx;
  background: #666;
  color: #fff;
}

.address-del
{
  right: 190rpx;
  border: 1px solid #222;
}

.address-info-view-bottom
{
  height: 120rpx;
  line-height: 120rpx;
  font-size: 25rpx;
}

.address-tel,.address-detail
{
  display: block;
  height: 40rpx;
  line-height: 40rpx;
  margin-left: 30rpx;
  padding-top: 10rpx;
}

//模板的使用
//引入外部定义的模板
<import src='../../templates/addressCard.wxml'/>
<template is='addressCardTemplate'></template>
<template is='addressCardTemplate'></template>

//引入项目中的wxss样式文件
@import "../../templates/addressCard.wxss";

page{
  min-height: 100%;
  display: block;
  background: #eee;
}

在wxss样式文件中如果需要引入其它的样式文件那么可以使用@import特性

import 和 include

在wxml文件中支持引入其他的wxml文件，可以使用import或者include标签。

❏ import标签 仅仅引入wxml文件中模板定义部分。

❏ include标签 仅仅引入wxml文件中非模板定义部分。

//模板的使用
//引入外部定义的模板
<import src='../../templates/addressCard.wxml'/>
<template is='addressCardTemplate'></template>
<template is='addressCardTemplate'></template>

//引入项目中的wxss样式文件
@import "../../templates/addressCard.wxss";

page{
  min-height: 100%;
  display: block;
  background: #eee;
}

在wxss样式文件中如果需要引入其它的样式文件那么可以使用@import特性