可搜索,可注册,可登录,致敬逗比大佬!尽在救援版逗比根据地 dbgjd.com
投稿文章 | 广告合作 | Telegram 群组 / 公告频道 / 使用教程

微信小程序之页面模板

News amilyj.hanson1986 56℃ 0评论

1-定义模板布局”>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. 引用样式

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

!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

0

!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

1

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

!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

2

!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

3

5. 赋值初始化

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

!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

4

!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view class='msgBg'>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

5

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

转载请注明:逗比根据地 » 微信小程序之页面模板

喜欢 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址