項(xiàng)目八個(gè)人信息模塊開發(fā)Useoftemplates任務(wù)二模板的使用在實(shí)際開發(fā)過程中，經(jīng)常會(huì)有代碼復(fù)用的情況，即在不同的頁面中會(huì)經(jīng)常使用結(jié)構(gòu)類似的代碼。微信小程序模板是一種快速開發(fā)小程序的方式，使用小程序模板，可以減少從零開始開發(fā)的代碼量，加快小程序開發(fā)的速度。項(xiàng)目八個(gè)人信息模塊開發(fā)任務(wù)描述template模板語法-模版創(chuàng)建

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用?？梢允褂胣ame屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段。通過一個(gè)案例說明模板的使用方法。首先在pages文件夾中新建一個(gè)template文件夾，文件夾中新建一個(gè)template.wxml文件，在頁面實(shí)現(xiàn)如下代碼。<template

name="temp">

<view><text

class="info">這是一個(gè)模板文件！</text>

</view></template>接下來我們就給模板增加樣式文件，在pages/template文件夾中新建一個(gè)template.wxss文件，然后對(duì)模板文件，添加一個(gè)簡(jiǎn)單樣式。.info{font-size:50rpx;}template模板語法-模版使用

在需要使用的wxml加載模板。例如，在index.wxml頁面加載模板，需要使用import語句引入文件路徑，通過<template>標(biāo)簽使用模板，template標(biāo)簽的is屬性與模板的name屬性對(duì)應(yīng)。<import

src

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

is

index.wxml</view><template

is="temp"/>

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

"../template/template.wxss";template模板語法-數(shù)據(jù)傳遞

有時(shí)候模版需要加載的頁面?zhèn)鬟f參數(shù)，這時(shí)需要在模板中定義參數(shù)。template.wxml文件代碼如下所示。<template

name="temp">

<view><text

class="info">這是一個(gè)模板文件</text></view>

<view>

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

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

</view></template>

接下來在index.wxml中傳遞模板中所需要的參數(shù)，修改后的代碼如下：<import

src

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

is

index.wxml</view><template

is="temp"

data="{{...item}}"/>template模板語法-數(shù)據(jù)傳遞

在index.js中定義item為對(duì)象類型的數(shù)據(jù)。Page({data:{

item:{index:0,msg:'thisisatemplate',time:'2016-09-15'}}})創(chuàng)建template模板

is屬性可以使用Mustache語法，來動(dòng)態(tài)決定具體需要渲染哪個(gè)模板。<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模板語法-模板的引用

如上都是在同一個(gè)wxml文件中定義和引用模板，而模板的定義和引用是可以分開的。即在一個(gè)文件中定義模板，而在其他一個(gè)或多個(gè)文件wxml文件中都可以使用定義好的模板。從外部文件中引用模板，使用importsrc="templateUrl"標(biāo)簽。同樣使用is屬性來指向要引用的標(biāo)簽。

要在index.wxml中使用template中定義的模板，則需要先在index中利用import來導(dǎo)入該模板：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文件中的數(shù)據(jù)

在一個(gè)項(xiàng)目中需要在多處頁面使用類似的模塊，就需要?jiǎng)?chuàng)建模板，減少代碼量，同時(shí)代碼高度復(fù)用；

在同一個(gè)WXML文件中創(chuàng)建多個(gè)類似的模板用name屬性來區(qū)別；

模板WXSS在全局引入和在使用頁面引入的區(qū)別在于模板的使用量；

使用import引入模板WXML和WXSS；

通過template標(biāo)簽使用模板，template標(biāo)簽的is屬性與模板的name屬性對(duì)應(yīng)，data屬性代表傳入模板的數(shù)據(jù)。template模板使用小結(jié)創(chuàng)建template模板

通過上面的template模板示例，了解了模板的實(shí)現(xiàn)過程之后，接下來在商城項(xiàng)目中使用模板實(shí)現(xiàn)個(gè)人信息資料的顯示。使用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頁面，定義個(gè)人信息資料，包括三個(gè)數(shù)據(jù)，url用于跳轉(zhuǎn)地址，title顯示信息標(biāo)題，iconurl用于標(biāo)題顯示的圖標(biāo)。Page({

data:

{

menu:[{

url:'/pages/profile/profile',

title:'個(gè)人資料',

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

{

url:'/pages/profile/profile',

title:'購買記錄',

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

]})使用template模板

打開pages/page