這篇文章主要介紹了微信小程序中template模板有什么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注于石泉網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供石泉營銷型網(wǎng)站建設(shè)，石泉網(wǎng)站制作、石泉網(wǎng)頁設(shè)計、石泉網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造石泉網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供石泉網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

微信小程序 template模板詳解

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

模板

一、定義模板

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

二、使用模板

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

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

注意：

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

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

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

三、模板樣式

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“微信小程序中template模板有什么用”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)建站，關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前題目：微信小程序中template模板有什么用-創(chuàng)新互聯(lián)
鏈接分享：http://weahome.cn/article/dchgis.html