WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
说明:
WXML 的数据绑定,不能使用 ECMAScript 规范已经规定的关键字和保留字,使用了会提示
Unexpected token
或者Unexpected token: "tokenName", may be reserved words.
的报错。能力概要
用以下一些简单的例子来介绍 WXML 有什么能力,具体的能力以及使用方式在以下章节查看:
数据绑定
<!--WXML--><view>{{message}}</view>
// page.jsPage({data: {message: 'Hello MINA!',},})
列表渲染
<!--WXML--><view wx:for="{{array}}">{{item}}</view>
// page.jsPage({data: {array: [1, 2, 3, 4, 5],},})
条件渲染
<!--WXML--><view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view><view wx:elif="{{view == 'APP'}}">APP</view><view wx:else="{{view == 'MINA'}}">MINA</view>
// page.jsPage({data: {view: 'MINA',},})
模板
<!--WXML--><template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view></template><template is="staffName" data="{{...staffA}}"></template><template is="staffName" data="{{...staffB}}"></template><template is="staffName" data="{{...staffC}}"></template>
// page.jsPage({data: {staffA: { firstName: 'Hulk', lastName: 'Hu' },staffB: { firstName: 'Shang', lastName: 'You' },staffC: { firstName: 'Gideon', lastName: 'Lin' },},})
事件
<view bindtap="add">{{count}}</view>
Page({data: {count: 1,},add(e) {this.setData({count: this.data.count + 1,})},})
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
简单绑定
需要使用 Mustache 语法(双大括号)将变量包起来才能实现引用,可以作用于:
内容
<view>{{ message }}</view>
Page({data: {message: 'Hello MINA!',},})
组件属性(需要在双引号之内)
<view id="item-{{id}}"></view>
Page({data: {id: 0,},})
控制属性(需要在双引号之内)
<view wx:if="{{condition}}"></view>
Page({data: {condition: true,},})
关键字(需要在双引号之内)
true
:boolean 类型的 true,代表真值。false
: boolean 类型的 false,代表假值。注意:
不要直接写
checked="false"
,其计算结果是一个字符串,转成 boolean 类型后代表真值。运算
可以在 {{}} 内进行简单的运算,支持的有如下几种方式:
三元运算
<view hidden="{{flag ? true : false}}">Hidden</view>
算数运算
<view>{{a + b}} + {{c}} + d</view>
Page({data: {a: 1,b: 2,c: 3,},})
view 中的内容为 3 + 3 + d。
逻辑判断
<view wx:if="{{length > 5}}"></view>
字符串运算
<view>{{"hello" + name}}</view>
Page({data: {name: 'MINA',},})
数据路径运算
<view>{{object.key}} {{array[0]}}</view>
Page({data: {object: {key: 'Hello ',},array: ['MINA'],},})
组合
也可以在 Mustache 内直接进行组合,构成新的对象或者数组。
数组
<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
Page({data: {zero: 0,},})
最终组合成数组[0, 1, 2, 3, 4]。
对象
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2,},})
最终组合成的对象是
{for: 1, bar: 2}
也可以用扩展运算符
...
来将一个对象展开。<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({data: {obj1: {a: 1,b: 2,},obj2: {c: 3,d: 4,},},})
最终组合成的对象是
{a: 1, b: 2, c: 3, d: 4, e: 5}
。如果对象的 key 和 value 相同,也可以间接地表达。
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({data: {foo: 'my-foo',bar: 'my-bar',},})
最终组合成的对象是
{foo: 'my-foo', bar:'my-bar'}
。上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({data: {obj1: {a: 1,b: 2,},obj2: {b: 3,c: 4,},a: 5,},})
最终组合成的对象是
{a: 5, b: 3, c: 6}
。花括号和引号之间如果有空格,将最终被解析成为字符串。
<view wx:for="{{[1,2,3]}} ">{{item}}</view>
等同于
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>
列表渲染
wx:for
在组件上使用
wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为
index
,数组当前项的变量名默认为 item
。<view wx:for="{{array}}">{{index}}: {{item.message}}</view>
Page({data: {array: [{message: 'foo',},{message: 'bar',},],},})
使用
wx:for-item
可以指定数组当前元素的变量名,使用
wx:for-index
可以指定数组当前下标的变量名:<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">{{idx}}: {{itemName.message}}</view>
wx:for
也可以嵌套,下边是一个九九乘法表:<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view></view>block wx:for
类似
block wx:if
,也可以将 wx:for
用在<block/>
标签上,以渲染一个包含多节点的结构块。例如:<block wx:for="{{[1, 2, 3]}}"><view>{{index}}:</view><view>{{item}}</view></block>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如
<input>
中的输入内容,<switch> 的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。wx:key
的值以两种形式提供:字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
保留关键字
*this
代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
如不提供
wx:key
,会报一个 warning
, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。示例代码:
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;">{{item.id}}</switch><button bindtap="switch">Switch</button><button bindtap="addToFront">Add to the front</button><switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;">{{item}}</switch><button bindtap="addNumberToFront">Add to the front</button>
Page({data: {objectArray: [{ id: 5, unique: 'unique_5' },{ id: 4, unique: 'unique_4' },{ id: 3, unique: 'unique_3' },{ id: 2, unique: 'unique_2' },{ id: 1, unique: 'unique_1' },{ id: 0, unique: 'unique_0' },],numberArray: [1, 2, 3, 4],},switch(e) {const length = this.data.objectArray.lengthfor (let i = 0; i < length; ++i) {const x = Math.floor(Math.random() * length)const y = Math.floor(Math.random() * length)const temp = this.data.objectArray[x]this.data.objectArray[x] = this.data.objectArray[y]this.data.objectArray[y] = temp}this.setData({objectArray: this.data.objectArray,})},addToFront(e) {const length = this.data.objectArray.lengththis.data.objectArray = [{ id: length, unique: 'unique_' + length }].concat(this.data.objectArray)this.setData({objectArray: this.data.objectArray,})},addNumberToFront(e) {this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)this.setData({numberArray: this.data.numberArray,})},})
花括号和引号之间如果有空格,将最终被解析成为字符串。
<view wx:for="{{[1,2,3]}} ">{{item}}</view>
等同于:
<view wx:for="{{[1,2,3] + ' '}}">{{item}}</view>
条件渲染
wx:if
在框架中,使用
wx:if="{{condition}}"
来判断是否需要渲染该代码块:<view wx:if="{{condition}}">True</view>
也可以用
wx:elif
和 wx:else
来添加一个 else 块:<view wx:if="{{length > 5}}">1</view><view wx:elif="{{length > 2}}">2</view><view wx:else>3</view>
block wx:if
因为
wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。<block wx:if="{{true}}"><view>view1</view><view>view2</view></block>
<block/>
并不是一个组件,它只是一个包装元素,不会在页面中做任何渲染,只接受控制属性。wx:if
vs hidden
因为 wx:if 之中的模板也可能包含数据绑定,所以当
wx:if
的条件值切换时,框架有一个局部渲染的过程,因此它会确保条件块在切换时,销毁或重新渲染。同时
wx:if
也是惰性的,如果在初始渲染条件为 false
,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。相比之下,
hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。一般来说,
wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
较好。模板
WXML 提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
定义模板
使用 name 属性,作为模板的名字。然后在
<template/>
内定义代码片段,如:<!--index: intmsg: stringtime: string--><template name="msgItem"><view><text>{{index}}: {{msg}}</text><text>Time: {{time}}</text></view></template>
使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
<template is="msgItem" data="{{...item}}" />
Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15',},},})
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 传入的数据以及模板定义文件中定义的
<wxs />
模块。事件
什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息,如 id,dataset,touches。
事件的使用方式
在组件中绑定一个事件处理函数。
如
bindtap
,当用户单击该组件的时候会在该页面对应的 Page 中找到相应的事件处理函数。<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
在相应的 Page 定义中写上相应的事件处理函数,参数是 event。
Page({tapName(event) {console.log(event)},})
可以看到 log 出来的信息大致如下:
{"type": "tap","timeStamp": 895,"target": {"id": "tapTest","dataset": {"hi": "WeChat"}},"currentTarget": {"id": "tapTest","dataset": {"hi": "WeChat"}},"detail": {"x": 53,"y": 14},"touches": [{"identifier": 0,"pageX": 53,"pageY": 14,"clientX": 53,"clientY": 14}],"changedTouches": [{"identifier": 0,"pageX": 53,"pageY": 14,"clientX": 53,"clientY": 14}]}
使用 WXS 函数响应事件
WXS 函数接受 2 个参数,第一个是 event,在原有的 event 的基础上加了
event.instance
对象,第二个参数是ownerInstance
,和event.instance
一样是一个ComponentDescriptor
对象。具体使用如下:在组件中绑定和注册事件处理的 WXS 函数。
<wxs module="wxs" src="./test.wxs"></wxs><view id="tapTest" data-hi="TMF" bindtap="{{wxs.tapName}}">Click me!</view>**注:绑定的WXS函数必须用{{}}括起来**
test.wxs 文件实现 tapName 函数:
function tapName(event, ownerInstance) {console.log('tap wechat', JSON.stringify(event))}module.exports = {tapName,}
ownerInstance
包含了一些方法,可以设置组件的样式和 class,具体包含的方法以及为什么要用 WXS 函数响应事件,请单击查看详情。事件详解
事件的分类
事件分为冒泡事件和非冒泡事件:
冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
WXML 的冒泡事件列表:
类型 | 触发条件 |
touchstart | 手指触摸动作开始 |
touchmove | 手指触摸后移动 |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 |
touchend | 手指触摸动作结束 |
tap | 手指触摸后马上离开 |
longpress | 手指触摸后,超过 350ms 再离开,如果指定了事件回调函数并触发了这个事件,tap 事件将不被触发 |
longtap | 手指触摸后,超过 350ms 再离开(推荐使用 longpress 事件代替) |
transitionend | 会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
animationstart | 会在一个 WXSS animation 动画开始时触发 |
animationiteration | 会在一个 WXSS animation 一次迭代结束时触发 |
animationend | 会在一个 WXSS animation 动画完成时触发 |
touchforcechange | 在支持 3D Touch 的 iPhone 设备,重按时会触发 |
说明:
除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如<form/>的 submit 事件,<input/>的 input 事件,<scroll-view/>的 scroll 事件。
事件绑定和冒泡
事件绑定的写法同组件的属性,以 key、value 的形式。
key 以 bind 或 catch 开头,然后跟上事件的类型,如
bindtap
、catchtouchstart
。在非原生组件中,bind
和catch
后可以紧跟一个冒号,其含义不变,如bind:tap
、catch:touchstart
。value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
bind
事件绑定不会阻止冒泡事件向上冒泡,catch
事件绑定可以阻止冒泡事件向上冒泡。在下面的代码中,单击 inner view 会先后调用
handleTap3
和handleTap2
(因为 tap 事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),单击 middle view 会触发handleTap2
,单击 outer view 会触发handleTap1
。<view id="outer" bindtap="handleTap1">outer view<view id="middle" catchtap="handleTap2">middle view<view id="inner" bindtap="handleTap3">inner view</view></view></view>
事件的捕获阶段
触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用 capture-bind、capture-catch 关键字,后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中,单击 inner view 会先后调用
handleTap2
、handleTap4
、handleTap3
、handleTap1
。<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view></view>
如果将上述代码中的第一个
capture-bind
改为 capture-catch
,则只会触发 handleTap2
。<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">outer view<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">inner view</view></view>
事件对象
如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。
BaseEvent基础事件对象属性列表:
属性 | 类型 | 说明 |
type | string | 事件类型 |
timeStamp | interger | 事件生成时的时间戳 |
target | object | 触发事件的组件的一些属性值集合 |
currentTarget | object | 当前组件的一些属性值集合 |
CustomEvent 自定义事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
detail | object | 额外的信息 |
TouchEvent 触摸事件对象属性列表(继承 BaseEvent):
属性 | 类型 | 说明 |
touches | array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | array | 触摸事件,当前变化的触摸点信息的数组 |
特殊事件:
<canvas>
中的触摸事件不可冒泡,所以没有 currentTarget。type
代表事件的类型。
timeStamp
页面打开到触发事件所经过的毫秒数。
target
属性 | 类型 | 说明 |
id | string | 事件源组件的 id |
tagName | string | 当前组件的类型 |
object | 事件源组件上由 data- 开头的自定义属性组成的集合 |
currenTarget
属性 | 类型 | 说明 |
id | string | 当前组件的 id |
tagName | string | 当前组件的类型 |
object | 当前组件上由 data- 开头的自定义属性组成的集合 |
dataset
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以
data-
开头,多个单词由连字符-
链接,不支持大写(大写会自动转成小写)如data-element-type
,最终在 event.currentTarget.dataset
中会将连字符转成驼峰elementType
。代码示例:
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">DataSet Test</view>
Page({bindViewTap(event) {event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写},})
touches
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
Touch 对象
属性 | 类型 | 说明 |
identifier | number | 触摸点的标识符 |
pageX,pageY | number | 距离文档左上角的距离,文档的左上角为原点,横向为 X 轴,纵向为 Y 轴 |
clientX,clientY | number | 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为 X 轴,纵向为 Y 轴 |
CanvasTouch 对象
属性 | 类型 | 说明 |
identifier | number | 触摸点的标识符 |
x, y | number | 距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为 X 轴,纵向为 Y 轴 |
changedTouches
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。
detail
自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息。
单击事件的
detail
带有的 x,y 同 pageX,pageY 代表距离文档左上角的距离。WXS响应事件
背景
有频繁用户交互的效果在小程序上表现是比较卡顿的,例如页面有 2 个元素 A 和 B,用户在 A 上做 touchmove 手势,要求 B 也跟随移动,<movable-view> 就是一个典型的例子。一次 touchmove 事件的响应过程为:
1. touchmove 事件从视图层(Webview)抛到逻辑层(App Service)。
2. 逻辑层(App Service)处理 touchmove 事件,再通过 setData 来改变 B 的位置。
一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染,通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟。
实现方案
本方案基本的思路是减少通信的次数,让事件在视图层(Webview)响应。小程序的框架分为视图层(Webview)和逻辑层(App Service),这样分层的目的是管控,开发者的代码只能运行在逻辑层(App Service),而这个思路就必须要让开发者的代码运行在视图层(Webview)。
使用 WXS 函数用来响应小程序事件,目前只能响应内置组件的事件,不支持自定义组件事件。WXS 函数的除了纯逻辑的运算,还可以通过封装好的
ComponentDescriptor
实例来访问以及设置组件的 class 和样式,对于交互动画,设置 style 和 class 足够了。WXS 函数的例子如下:const wxsFunction = function(event, ownerInstance) {const instance = ownerInstance.selectComponent('.classSelector') // 返回组件的实例instance.setStyle({'font-size': '14px', // 支持rpx})instance.getDataset()instance.setClass(className)// ...return false // 不往上冒泡,相当于调用了同时调用了stopPropagation和preventDefault}
其中入参 event 是小程序事件对象基础上多了
event.instance
来表示触发事件的组件的 ComponentDescriptor
实例。ownerInstance
表示的是触发事件的组件所在的组件的 ComponentDescriptor
实例,如果触发事件的组件是在页面内的,ownerInstance
表示的是页面实例。ComponentDescriptor
的定义如下:方法 | 参数 | 描述 |
selectComponent | selector 对象 | 返回组件的 ComponentDescriptor 实例 |
selectAllComponents | selector 对象数组 | 返回组件的 ComponentDescriptor 实例数组 |
setStyle | Object/string | 设置组件样式,支持 rpx。设置的样式优先级比组件 WXML 里面定义的样式高。不能设置最顶层页面的样式 |
addClass/removeClass/ hasClass | String | 设置组件的 class。设置的 class 优先级比组件 WXML 里面定义的 class 高。不能设置最顶层页面的 class |
getDataset | 无 | 返回当前组件/页面的 dataset 对象 |
callMethod | (funcName:string, args:object) | 调用当前组件/页面在逻辑层(App Service)定义的函数。funcName 表示函数名称,args 表示函数的参数 |
requestAnimationFrame | Function | 和原生 requestAnimationFrame 一样。用于设置动画 |
getState | 无 | 返回一个 object 对象,当有局部变量需要存储起来后续使用的时候用这个方法 |
triggerEvent | (eventName, detail) | 和组件的 triggerEvent 一致 |
WXS 运行在视图层(Webview),里面的逻辑毕竟能做的事件比较少,需要有一个机制和逻辑层(App Service)开发者的代码通信,上面的
callMethod
是 WXS 里面调用逻辑层(App Service)开发者的代码的方法,而 WxsPropObserver
是逻辑层(App Service)开发者的代码调用 WXS 逻辑的机制。使用方法
WXML 定义事件:
<wxs module="test" src="./test.wxs"></wxs><viewchange:prop="{{test.propObserver}}"prop="{{propValue}}"bindtouchmove="{{test.touchmove}}"class="movable"></view>
上面的
change:prop
(属性前面带 change:前缀)是在 prop 属性被设置的时候触发 WXS 函数,值必须用{{}}
括起来。类似 Component 定义的 properties 里面的 observer 属性,在setData({propValue: newValue})
调用之后会触发。说明:
WXS 函数必须用
{{}}
括起来。当 prop 的值被设置 WXS 函数就会触发,而不只是值发生改变,所以在页面初始化的时候会调用一次WxsPropObserver
的函数。WXS 文件 test.wxs 里面定义并导出事件处理函数和属性改变触发的函数:
module.exports = {touchmove(event, instance) {console.log('log event', JSON.stringify(event))},propObserver(newValue, oldValue, ownerInstance, instance) {console.log('prop observer', newValue, oldValue)},}
WXS 文件 test.wxs 里面定义并导出事件处理函数和属性改变触发的函数:
说明:
目前还不支持原生组件的事件、<input> 和 <textarea> 组件的 bindinput 事件。
目前在 WXS 函数里面仅支持 console.log 方式打日志定位问题,注意连续的重复日志会被过滤掉。
引用
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>