微信小程序开发项目实战（微课版）课件 8-2 课件-模板的使用.pptx

项目八个人信息模块开发

任务二

模板的使用

Useoftemplates

项目八个人信息模块开发

任务描述

l在实际开发过程中，经常会有代码复

用的情况，即在不同的页面中会经常

使用结构类似的代码。微信小程序模

板是一种快速开发小程序的方式，使

用小程序模板，可以减少从零开始开

发的代码量，加快小程序开发的速度。

template模板语法-模版创建

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。可以使用name属性，作

为模板的名字。然后在template/内定义代码片段。通过一个案例说明模板的使用方法。

首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件，在页面实现如下代码。

templatename=temp

viewtextclass=info这是一个模板文件！/text/view

/template

接下来我们就给模板增加样式文件，在pages/template文件夹中新建一个template.wxss文件，然后对模板文件，

添加一个简单样式。

.info{font-size:50rpx;}

template模板语法-模版使用

在需要使用的wxml加载模板。例如，在index.wxml页面加载模板，需要使用import语句引入文件路径，通过

template标签使用模板，template标签的is属性与模板的name属性对应。

importsrc=../template/template.wxml/

viewThisisindex.wxml/view

templateis=temp/

除了引入模板WXML页面之外，还需要在index.wxml页面使用import引入模板样式文件。

@import../template/template.wxss;

template模板语法-数据传递

有时候模版需要加载的页面传递参数，这时需要在模板中定义参数。template.wxml文件代码如下所示。

templatename=temp

viewtextclass=info这是一个模板文件/text/view

view

text{{index}}:{{msg}}/text

textTime:{{time}}/text

/view

/template

接下来在index.wxml中传递模板中所需要的参数，修改后的代码如下：

importsrc=../template/template.wxml/

viewThisisindex.wxml/view

templateis=tempdata={{...item}}/

template模板语法-数据传递

在index.js中定义item为对象类型的数据。

Page({

data:{

item:{

index:0,

msg:thisisatemplate,

time:2016-09-15

}

}})

创建template模板

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

templatename=odd

viewodd/view

/template