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

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

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

二 模板使用示例

2.1 定义模板

在index文件夹下创建my_template.wxml

1
2
3
4
5
6
<template name="msgItem">
 <view>
  <text>{{index}}:{{msg}}</text>
  <text>Time:{{time}}</text>
 </view>
</template>

说明：

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

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

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

2.3 给模板设置数据(item)

1
2
3
4
5
6
7
 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

1
2
3
<template name="odd">
  <view> odd </view>
</template>

event.wxml

1
2
3
<template name="even">
  <view> even </view>
</template>

3.2 导入模板及模板渲染

1
2
3
4
5
6
<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—参考代码