小程序页面模板

发表于 | 分类于
字数统计: 454 | 阅读时长 ≈ 2

模板

可以定义不同类型的模板，以便在不同地方调用

定义模版

在 <template /> 中定义模板内容，并通过 name 属性指定模板名称

1
2
3
4
5
<template name="itemTpl">
    <view>
        <text>{{index}} : {{message}}</text>
    </view>
</template>

模板使用

使用 is 属性声明需要使用的模板，模板所需数据通过 data 属性传递

1
2
3
4
5
6
7
8
9
10
11
<template is="itemTpl" data="{{...item}}"/>

Page({
    data: {
        item: {
            index: 0,
            msg: 'this is a template',
            time: '2016-09-15'
        }
    }
})
1
2
3
4
5
6
7
8
9
10
<template name="odd">
    <view>odd</view>
</template>
<template name="even">
    <view>even</view>
</template>

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

模板引用

有两种文件引用模板的方式，一种是 import， 另一种是include

import

可以 import 目标文件到当前文件中，当前文件可以使用目标文件中的 template

import 的文件存在作用域，即只能使用 import 目标文件自己定义的 template，而无法使用 import 目标文件中 import 的 template，如：C import B，B import A，在 C 中可以使用 B 定义的 template，在 B 中可以使用 A 定义的 template，但是 C 不能使用 A 定义的 template

1
2
3
4
5
6
7
8
<!-- item.wxml -->
<template name="item">
    <text>{{text}}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- A.wxml -->
<template name="A">
    <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
    <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" /> <!-- Error! Can not use tempalte when not import A. -->
<template is="B" />

include

include 是将目标文件中除了 <template/> 和 <wxs/> 之外的整个代码引入，相当于是拷贝到 include 位置

1
2
3
4
5
6
7
8
9
10
<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

<!-- index.wxml -->
<include src="header.wxml" />
<view> body </view>
<include src="footer.wxml" />