<view>
{{message}}
</view>
// page.js
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,代表假值。
<checkbox checked=
"{{false}}"
>
</checkbox>
特别注意:不要直接写
checked="false"
可以在
{{}}
内进行简单的运算,支持的有如下几种方式:
三元运算
<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'
] }})
数组
<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>
<view
wx:for="{{array}}"> {{item}} </view>
// page.jsPage({ data: { array: [1, 2, 3, 4, 5] }})
wx:for
绑定一个数组
默认数组的当前项的下标变量名默认为
index
,数组当前项的变量名默认为
item
<view wx:for=
"{{array}}"
>
{{index}}: {{item.message}}
</view>
Page({ data: { array: [{ message:
'foo'
, }, { message:
'bar'
}] }})
使用
wx:for-index
可以指定数组当前下标的变量名
使用
wx:for-item
可以指定数组当前元素的变量名
<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>
也可以将
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
:
function
(
e
)
{
const
length =
this
.data.objectArray.length
for
(
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] //2个值交换一下
this
.data.objectArray[y] = temp }
this
.setData({ objectArray:
this
.data.objectArray }) },
addToFront:
function
(
e
)
{
const
length =
this
.data.objectArray.length
this
.data.objectArray = [{id: length, unique:
'unique_'
+ length}].concat(
this
.data.objectArray)
this
.setData({ objectArray:
this
.data.objectArray }) },
addNumberToFront:
function
(
e
)
{
this
.data.numberArray = [
this
.data.numberArray.length +
1
].concat(
this
.data.numberArray)
this
.setData({ numberArray:
this
.data.numberArray }) }})
注意:
当
wx:for
的值为字符串时,会
将字符串解析成字符串数组
<view wx:for=
"array"
>
{{item}}
</view>
等同于
<view wx:for=
"{{['a','r','r','a','y']}}"
>
{{item}}
</view>
注意:
花括号和引号之间如果有空格,将最终被解析成为字符串
<view wx:for=
"{{[1,2,3]}} "
>
{{item}}
</view>
等同于
<view wx:for=
"{{[1,2,3] + ' '}}"
>
{{item}}
</view>
<view wx:if=
"{{view == 'WEBVIEW'}}"
>
WEBVIEW
</view>
<view wx:elif=
"{{view == 'APP'}}"
>
APP
</view>
<view wx:else=
"{{view == 'MINA'}}"
>
MINA
</view>
// page.js
Page({ data: { view:
'MINA'
}})
<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
较好。
<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'} }})
可以在模板中定义代码片段,然后在不同的地方调用。
name 属性,作为模板的名字。然后在
<template/>
内定义代码片段
<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'
} }})
动态决定
具体需要渲染哪个模板:
<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 />
模块
。
<view
bindtap="add"> {{count}} </view>
Page({ data: { count: 1 }, add: function(e) { this.setData({ count: this.data.count + 1 }) }})
事件对象可以携带额外信息,如 id, dataset, touches。
如何 使用?
在组件中绑定一个事件处理函数。
如
bindtap
,当用户
点击该组件的时候
会在该页面对应的Page中找到相应的事件处理函数。
<view id=
"tapTest"
data-hi=
"WeChat"
bindtap=
"tapName"
>
Click me!
</view>
写上相应的事件处理函数,参数是event。
Page({ tapName:
function
(
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
}]}
事件分为冒泡事件和非冒泡事件:
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
- 非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
冒泡事件列表
类型 | 触发条件 |
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 动画完成时触发 |
除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如
<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 | 事件类型 |
timeStamp | 事件生成时的时间戳, 页面打开到触发事件所经过的毫秒数。 |
target | 触发事件的组件的一些属性值集合 |
currentTarget | 当前组件的一些属性值集合 |
其中target,
触发事件
的源组件。
属性 | 说明 |
id | 事件源组件的id |
tagName | 当前组件的类型 |
dataset | 事件源组件上由data-开头的自定义属性组成的集合 |
currentTarget为
事件绑定的当前
组件
属性 | 说明 |
id | 当前组件的id |
tagName | 当前组件的类型 |
dataset | 当前组件上由data-开头的自定义属性组成的集合 |
说明: target 和 currentTarget 可以参考上例中,点击 inner view 时,
handleTap3
收到的事件对象 target 和 currentTarget 都是 inner,而
handleTap2
收到的事件对象 target 就是
inner
,currentTarget 就是 middle。
其中dateset:
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以
data-
开头,多个单词由连字符
-
链接,
不能有大写
(大写会自动转成小写)如
data-element-type
,
最终
在 event.
currentTarget
.dataset 中会将连字符转成驼峰
elementType
。
示例:
<view data-alpha-beta=
"1"
data-alphaBeta=
"2"
bindtap=
"bindViewTap"
>
DataSet Test
</view>
Page({ bindViewTap:
function
(
event
)
{ event.currentTarget.dataset.alphaBeta ===
1
// - 会转为驼峰写法
event.currentTarget.dataset.alphabeta ===
2
// 大写会转为小写
}})
CustomEvent
自定义事件对象
属性列表(继承 BaseEvent):
属性 | 说明 |
detail | 额外的信息 |
"detail"
: {
"x"
:
53
,
"y"
:
14
},
点击事件的
detail
带有的 x, y
同 pageX, pageY
代表距离文档左上角的距离。
TouchEvent
触摸事件对象
属性列表(继承 BaseEvent):
属性 | 说明 |
touches | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
changedTouches | 触摸事件,当前变化的触摸点信息的数组 |
特殊事件:
<canvas/>
中的触摸事件不可冒泡,所以没有 currentTarget。
其中
"touches"
:[{
"identifier"
:
0
,
"pageX"
:
53
,
"pageY"
:
14
,
"clientX"
:
53
,
"clientY"
:
14
}],
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
Touch 对象
属性 | 说明 |
identifier | 触摸点的标识符 |
pageX, pageY | 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴 |
clientX, clientY | 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴 |
CanvasTouch 对象
属性 | 说明 |
identifier | 触摸点的标识符 |
x, y | 距离 Canvas 左上角的距离,Canvas 的左上角为原点 , 横向为X轴,纵向为Y轴 |
"changedTouches"
:[{
"identifier"
:
0
,
"pageX"
:
53
,
"pageY"
:
14
,
"clientX"
:
53
,
"clientY"
:
14
}]
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。
WXML 提供两种文件引用方式
import
和
include
。
import
import
可以在该文件中使用目标文件定义的
template
,如:
在 item.wxml 中定义了一个叫
item
的
template
:
<template name=
"item"
>
<text>
{{text}}
</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用
item
模板:
<import src="item.wxml"/>
<template is=
"item"
data=
"{{text: 'forbar'}}"
/>
import 的作用域
只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。即不会递归引用
如:C import B,B import A,在C中可以使用B定义的
template
,在B中可以使用A定义的
template
,
但是C不能使用A定义的
template
。
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>