8-2 课件-模板的使用.pptxVIP

项目八个人信息模块开发Useoftemplates任务二模板的使用

在实际开发过程中，经常会有代码复用的情况，即在不同的页面中会经常使用结构类似的代码。微信小程序模板是一种快速开发小程序的方式，使用小程序模板，可以减少从零开始开发的代码量，加快小程序开发的速度。项目八个人信息模块开发任务描述

template模板语法-模版创建WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。可以使用name属性，作为模板的名字。然后在template/内定义代码片段。通过一个案例说明模板的使用方法。首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件，在页面实现如下代码。template?name=temp??viewtext?class=info这是一个模板文件！/text?/view/template接下来我们就给模板增加样式文件，在pages/template文件夹中新建一个template.wxss文件，然后对模板文件，添加一个简单样式。.info{font-size:50rpx;}

template模板语法-模版使用在需要使用的wxml加载模板。例如，在index.wxml页面加载模板，需要使用import语句引入文件路径，通过template标签使用模板，template标签的is属性与模板的name属性对应。import?src?=../template/template.wxml/viewThis?is?index.wxml/viewtemplate?is=temp/除了引入模板WXML页面之外，还需要在index.wxml页面使用import引入模板样式文件。@import?../template/template.wxss;

template模板语法-数据传递有时候模版需要加载的页面传递参数，这时需要在模板中定义参数。template.wxml文件代码如下所示。template?name=temp??viewtext?class=info这是一个模板文件/text/view??view?????text{{index}}:{{msg}}/text?????textTime:{{time}}/text??/view/template接下来在index.wxml中传递模板中所需要的参数，修改后的代码如下：import?src?=../template/template.wxml/viewThis?is?index.wxml/viewtemplate?is=temp?data={{...item}}/

template模板语法-数据传递在index.js中定义item为对象类型的数据。Page({data:{item:{index:0,msg:thisisatemplate,time:2016-09-15}}})

创建template模板is属性可以使用Mustache语法，来动态决定具体需要渲染哪个模板。templatename=oddviewodd/view/templatetemplatename=evenvieweven/view/templateblockwx:for={{[1,2,3,4,5]}}templateis={{item%2==0?even:odd}}//block

template模板语法-模板的引用如上都是在同一个wxml文件中定义和引用模板，而模板的定义和引用是可以分开的。即在一个文件中定义模板，而在其他一个或多个文件wxml文件中都可以使用定义好的模板。从外部文件中引用模板，使用importsrc=templateUrl标签。同样使用is属性来指向要引用的标签。

要在index.wxml中使用template中定义的模板，则需要先在index中利用import来导入该模板：template模板语法-模板的引用s|--index|--index.js|--index.json|--index.wxml|--index.wxss|--template|--template.js|--template.json|--template.wxml|--template.wxss!--index.wxml--import