本篇內(nèi)容介紹了“微信小程序中的template模板怎么用”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

10年積累的成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有瑤海免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

微信小程序 template模板詳解

如下圖，我在做華企商學(xué)院小程序的時(shí)候，課程搜索結(jié)果頁(yè)和課程列表頁(yè)結(jié)構(gòu)是完全一樣的，這時(shí)就非常適合使用模板來(lái)完成頁(yè)面搭建。實(shí)現(xiàn)一次定義，到處使用。

模板

一、定義模板

1、新建一個(gè)template文件夾用來(lái)管理項(xiàng)目中所有的模板；
2、新建一個(gè)courseList.wxml文件來(lái)定義模板；
3、使用name屬性，作為模板的名字。然后在                               {{courseName}}         - {{teacherName}}                       {{playCount}}         {{score}}              {{studyProgress}}        

二、使用模板

1、使用 is 屬性，聲明需要的使用的模板

2、將模板所需要的 data 傳入，一般我們都會(huì)使用列表渲染。

注意：

a.可以通過(guò)表達(dá)式來(lái)確定使用哪個(gè)模板is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"

或者通過(guò)wx:if來(lái)確定。index是數(shù)組當(dāng)前項(xiàng)的下標(biāo)。

b. data 是要模板渲染的數(shù)據(jù)，data="{{...item}}" 寫法是ES6的寫法，item是wx:for當(dāng)前項(xiàng)，... 是展開(kāi)運(yùn)算符，在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

三、模板樣式

1、在新建模板的時(shí)候同時(shí)新建一個(gè)courseList.wxss 的文件，與CSS同樣的寫法控制樣式。

2、在需要使用模板的頁(yè)面 .wxss文件中import進(jìn)來(lái)；或者直接在app.wxss中引入，這樣只需要一次引入，其他文件就不用引入了。

@import url("../template/courseList.wxss");

“微信小程序中的template模板怎么用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

新聞名稱：微信小程序中的template模板怎么用-創(chuàng)新互聯(lián)
文章來(lái)源：http://weahome.cn/article/eceei.html