微信小程序开发之——模板

一 概述

• WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
• 定义模板时：使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段
• 导入模板：使用import导入模板
• 使用模板时：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

二 模板使用示例

2.1 定义模板

在index文件夹下创建my_template.wxml

<template name="msgItem">
 <view>
  <text>{{index}}:{{msg}}</text>
  <text>Time:{{time}}</text>
 </view>
</template>

说明：

• <template>标签用于定义一个模板，name属性表示模板的名称
• <template>标签标签之间是页面的内容

2.2 导入模板和使用模板(index.wxml)

<import src="./my_template"/>
<template is="msgItem" data="{{...item}}"></template> 

2.3 给模板设置数据(item)

 data: {
    item:{
      index:0,
      msg:'this i s a template',
      time:'2019-01-15'
  }
}

2.3 效果图

三 模板示例二

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

3.1 创建odd.wxml和event.wxml模板

odd.wxml

<template name="odd">
  <view> odd </view>
</template>

event.wxml

<template name="even">
  <view> even </view>
</template>

3.2 导入模板及模板渲染

<import src="./odd"/>
<import src="./even"/>

<block wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="unique">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

3.3 效果图

四 参考

• 官方文档—使用模板
• CSDN—参考代码