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

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

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。可以使用name属性，作为模板的名字。然后在<template/>内定义代码片段。通过一个案例说明模板的使用方法。首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件，在页面实现如下代码。<template

name="temp">

<view><text

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"/><view>This

is

index.wxml</view><template

is="temp"/>

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

"../template/template.wxss";template模板语法-数据传递

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

name="temp">

<view><text

class="info">这是一个模板文件</text></view>

<view>

<text>{{index}}:{{msg}}</text>

<text>Time:{{time}}</text>

</view></template>

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

src

="../template/template.wxml"/><view>This

is

index.wxml</view><template

is="temp"

data="{{...item}}"/>template模板语法-数据传递

在index.js中定义item为对象类型的数据。Page({data:{

item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})创建template模板

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

<view>odd</view></template><templatename="even">

<view>even</view></template><blockwx: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--><importsrc="../template/template.wxml"<templateis="msgItem"data={{...indexData}}//使用的是js文件中的数据

在一个项目中需要在多处页面使用类似的模块，就需要创建模板，减少代码量，同时代码高度复用；

在同一个WXML文件中创建多个类似的模板用name属性来区别；

模板WXSS在全局引入和在使用页面引入的区别在于模板的使用量；

使用import引入模板WXML和WXSS；

通过template标签使用模板，template标签的is属性与模板的name属性对应，data属性代表传入模板的数据。template模板使用小结创建template模板

通过上面的template模板示例，了解了模板的实现过程之后，接下来在商城项目中使用模板实现个人信息资料的显示。使用template模板

打开pages/pages/profile.wxml页面，引入模板页面list.wxml。<import

src="../../template/list.wxml"/>

打开pages/pages/profile.wxss页面，引入模板样式list.wxss。@import

"../../template/list.wxss";使用template模板

打开pages/pages/profile.js页面，定义个人信息资料，包括三个数据，url用于跳转地址，title显示信息标题，iconurl用于标题显示的图标。Page({

data:

{

menu:[{

url:'/pages/profile/profile',

title:'个人资料',

iconurl:'/images/others/contract_icon.png'},

{

url:'/pages/profile/profile',

title:'购买记录',

iconurl:'/images/others/icon-Check.png'}

]})使用template模板

打开pages/page