template的使用

模板

WXML提供模板(Template)糙臼,可以在模板中定義代碼片段若未,然后在不同的地方使用才顿∧妫可以保證格式以及數(shù)據(jù)的相同。

1-定義模板

使用`<template name="tempName"></template>`標(biāo)簽定義模板郑气,并將模板名稱(chēng)命名為tempName幅垮,賦值給屬性name。在標(biāo)簽內(nèi)部尾组,定義模板結(jié)構(gòu)忙芒。如下:
<!-- template.wxml -->
<!-- 
    index: int
    msg: string
    time: string
-->
<template name="msgItem">
    <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

2-使用模板

使用<template is="tempName" />標(biāo)簽,在需要使用模板的地方讳侨。如果要用到j(luò)s文件中的數(shù)據(jù)呵萨,則需要添加data屬性。如下:

<!-- template.wxml -->

<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>

此時(shí)在頁(yè)面上就會(huì)重復(fù)顯示三次相同的信息跨跨。
data中的數(shù)據(jù)潮峦,來(lái)源于js文件,如下:

<!-- template.js -->
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

3-is屬性

is屬性不僅可以靜態(tài)的指向渲染的模板勇婴,也可以使用Mustache語(yǔ)法忱嘹,來(lái)動(dòng)態(tài)決定具體需要渲染哪個(gè)模板。如下:

<!-- template.wxml -->

// templates
<template name="odd">
    <view> odd </view>
</template>
<template name="odd">
    <view> even </view>
</template>

// is屬性使用Mustache語(yǔ)法動(dòng)態(tài)渲染template
<block wx:for="{{[1, 2, 3, 4,5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

如上代碼耕渴,則會(huì)在頁(yè)面中根據(jù)條件來(lái)顯示odd 或是 even

4-模板的引用

如上都是在同一個(gè)wxml文件中定義和引用模板拘悦,而模板的定義和引用是可以分開(kāi)的。即在一個(gè)文件中定義模板橱脸,而在其他一個(gè)或多個(gè)文件wxml文件中都可以使用定義好的模板础米。

從外部文件中引用模板,使用import src="templateUrl" />標(biāo)簽添诉。同樣使用is屬性來(lái)指向要引用的標(biāo)簽屁桑。
如目錄如下:

-pages
    |--index
        |--index.js
        |--index.json
        |--index.wxml
        |--index.wxss
    |--template
        |--template.js
        |--template.json
        |--template.wxml
        |--template.wxss

要在index.wxml中使用template中定義的模板,則需要先在index中利用import來(lái)導(dǎo)入該模板:

<!-- index.wxml -->
<import src="../template/template.wxml"
<template is="msgItem" data={{...indexData}}
// 使用的是自己js文件中的數(shù)據(jù)

要注意import作用域吻商,其僅僅引用目標(biāo)文件中template掏颊。如:C import B糟红,B import A艾帐,在C中可以使用B定義的template,在B中可以使用A定義的template盆偿,但是C不能使用A定義的template柒爸。

參考

微信小程序文檔-框架-視圖層-WXML-模板

微信小程序文檔-框架-視圖層-WXML-引用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市事扭,隨后出現(xiàn)的幾起案子捎稚,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,294評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件今野,死亡現(xiàn)場(chǎng)離奇詭異葡公,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)条霜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,493評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)催什,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人宰睡,你說(shuō)我怎么就攤上這事蒲凶。” “怎么了拆内?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,790評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵旋圆,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我麸恍,道長(zhǎng)灵巧,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,595評(píng)論 1 284
  • 正文 為了忘掉前任抹沪,我火速辦了婚禮孩等,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘采够。我一直安慰自己肄方,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,718評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布蹬癌。 她就那樣靜靜地躺著权她,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逝薪。 梳的紋絲不亂的頭發(fā)上隅要,一...
    開(kāi)封第一講書(shū)人閱讀 49,906評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音董济,去河邊找鬼步清。 笑死,一個(gè)胖子當(dāng)著我的面吹牛虏肾,可吹牛的內(nèi)容都是我干的廓啊。 我是一名探鬼主播,決...
    沈念sama閱讀 39,053評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼封豪,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼谴轮!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起吹埠,我...
    開(kāi)封第一講書(shū)人閱讀 37,797評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤第步,失蹤者是張志新(化名)和其女友劉穎疮装,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體粘都,經(jīng)...
    沈念sama閱讀 44,250評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡廓推,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,570評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了翩隧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片受啥。...
    茶點(diǎn)故事閱讀 38,711評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鸽心,靈堂內(nèi)的尸體忽然破棺而出滚局,到底是詐尸還是另有隱情,我是刑警寧澤顽频,帶...
    沈念sama閱讀 34,388評(píng)論 4 332
  • 正文 年R本政府宣布藤肢,位于F島的核電站,受9級(jí)特大地震影響糯景,放射性物質(zhì)發(fā)生泄漏嘁圈。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,018評(píng)論 3 316
  • 文/蒙蒙 一蟀淮、第九天 我趴在偏房一處隱蔽的房頂上張望最住。 院中可真熱鬧,春花似錦怠惶、人聲如沸涨缚。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,796評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)脓魏。三九已至,卻和暖如春通惫,著一層夾襖步出監(jiān)牢的瞬間茂翔,已是汗流浹背孙蒙。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,023評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工宋列, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人姑廉。 一個(gè)月前我還...
    沈念sama閱讀 46,461評(píng)論 2 360
  • 正文 我出身青樓遵湖,卻偏偏與公主長(zhǎng)得像悔政,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子奄侠,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,595評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理卓箫,服務(wù)發(fā)現(xiàn)载矿,斷路器垄潮,智...
    卡卡羅2017閱讀 134,633評(píng)論 18 139
  • vim模板插件vim-template的使用 之前使用IDE編程烹卒,模板是最基本的功能,現(xiàn)在切換到vim弯洗,用慣了模板...
    pylego閱讀 4,032評(píng)論 0 0
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,778評(píng)論 6 342
  • WXML WXML(WeiXin Markup Language)是微信的一套標(biāo)簽語(yǔ)言旅急,結(jié)合基礎(chǔ)組件、事件系統(tǒng)牡整,可...
    許劍鋒閱讀 6,779評(píng)論 3 51
  • 一個(gè)人的成功是必須有方法和技巧的藐吮,其中最重要的方法之一就是:堅(jiān)持把一件事做到極致。 最近看了一個(gè)"10000小...
    遇見(jiàn)丁香閱讀 363評(píng)論 0 2