小程式開發之檢視層WXML模板、引用(import和include)
阿新 • • 發佈:2019-01-08
模板
WXML提供模板(template),可以在模板中定義程式碼片段,然後在不同的地方呼叫。
定義模板
使用 name 屬性,作為模板的名字。然後在內定義程式碼片段
例如:
index.wxml
<!-- index: int msg: string time: string --> <template name="msgItem"> <view> <text>{{index}}: {{msg}}</text> <text>Time: {{time}}</text> </view> </template>
使用模板
使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入
例如:
index.wxml
<template is="msgItem" data="{{...item}}" />
index.js
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2019-01-08'
}
}
})
`
is
屬性可以使用 Mustache 語法,來動態決定具體需要渲染哪個模板:
<template name="odd">
<view>odd</view>
</template>
<template name="even">
<view>even</view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>
模板的作用域
模板擁有自己的作用域,只能使用 data 傳入的資料以及模板定義檔案中定義的 模組。
引用
WXML 提供兩種檔案引用方式import
和include
。
import
import可以在該檔案中使用目標檔案定義的template,如:
在 item.wxml 中定義了一個叫item的template:
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用item模板:
<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />
import 的作用域
import 有作用域的概念,即只會 import 目標檔案中定義的 template,而不會 import 目標檔案 import 的 template。(不向下繼承)
如:C import B,B import A,在C中可以使用B定義的template,在B中可以使用A定義的template,但是C不能使用A定義的template。
<!-- A.wxml -->
<template name="A">
<text>A template</text>
</template>
<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
<text>B template</text>
</template>
<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" />
<!-- Error! Can not use tempalte when not import A.(不向下繼承) -->
<template is="B" />
include
include 可以將目標檔案除了 <template/>
<wxs/>
外的整個程式碼引入
,相當於是拷貝到 include 位置
例如:
<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>