文章目录
  1. 1. 1. 定义模板布局
  2. 2. 2. 定义模板样式
  3. 3. 3. 引用模板
  4. 4. 4. 引用样式
  5. 5. 5. 赋值初始化

微信小程序提供了页面模板支持,很大程度解决了页面布局复用的问题。

官方说明

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

小程序的模板并不难,下面整理了一些基本流程,方便快速上手小程序页面模板。

1. 定义模板布局

建议新建目录专门放置模板。本文在pages目录下创建了template目录。

在template目录下创建模板布局文件msg.wxml:

1
2
3
4
5
6
7
8
9
10
11
!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

上面代码中template表现的name是模板的id;

2. 定义模板样式

创建模板样式,建议和模板布局放到相同目录;

在template目录下的模板样式文件msg.wxss:

1
2
3
4
.msgBg {
background: #099;
padding: 0.5rem;
}

3. 引用模板

在需要应用模板的地方添加引用:

1
2
<!--引入模板-->
<import src="../template/msg.wxml" />

在需要使用模板的地方添加引用代码:

1
2
<!-- 使用模板 -->
<template is="msgItem" data="{{...itemOne}}" />

完成的业务引用代码如下(index.wxml):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--引入模板-->
<import src="../template/msg.wxml" />

<view class="container">

<!-- 使用模板 -->
<template is="msgItem" data="{{...itemOne}}" />

<!-- 使用模板for -->
<block wx:for="{{items}}" wx:for-item="item">
<template is="msgItem" data="{{...item}}" />
</block>

</view>

is是模板id,data负责传值;data传值使用ES6展开运算符”…”,那么就不需要在模板里面添加item.XXX了。

4. 引用样式

模板样式也需要添加引用,在引用方的样式代码中添加引用代码如下:

1
2
/**引入模板的样式**/
@import "../template/msg.wxss";

完成的样式引用代码如下(index.wxss):

1
2
3
4
5
6
/**引入模板的样式**/
@import "../template/msg.wxss";

.container {
background: #ff0;
}

5. 赋值初始化

通过以上四个步骤,模板布局和样式都有了,剩下的就是如何复制和展示数据了。 代码如下(index.js):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//index.js
//获取应用实例
const app = getApp()

Page({
data: {
motto: 'Hello World',
itemOne: {
index: 999,
msg: 'this is a template',
time: '2018-01-08'
},
items: [{
index: 0,
msg: 'template1',
time: '2016-09-15'
},
{
index: 1,
msg: 'emplate2',
time: '2016-09-16'
},
{
index: 2,
msg: 'emplate3',
time: '2016-09-17'
},
{
index: 3,
msg: 'emplate4',
time: '2016-09-18'
}
]
}

})

官方介绍地址:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html


本文地址 http://ihongqiqu.com/2018/04/09/wxminiapp-template/ 作者为 Zhenguo

author:Zhenguo
Author: Zhenguo      Blog: http://ihongqiqu.com/     Email: jinzhenguo1990@gmail.com
I have almost 7 years of APP development experience and have a keen interested in the latest emerging technologies. I use my spare time to turn my experience, ideas and love for Android tech into informative articles, tutorials and more in hope to help others and learn more.
文章目录
  1. 1. 1. 定义模板布局
  2. 2. 2. 定义模板样式
  3. 3. 3. 引用模板
  4. 4. 4. 引用样式
  5. 5. 5. 赋值初始化
返回顶部