小程序WXML 使用小结-白红宇

小程序WXML 使用小结

阅读量：5034 次

发布时间：2019-06-12

本文共 11984 字，大约阅读时间需要 39 分钟。

<view>

{

{message}}

</view>

// page.js

Page({

data

: { message:

'Hello MINA!'

} })

组件属性(需要在双引号之内)

<view id=

"item-{

{id}}"

</view>

Page({ data: { id:

} })

控制属性(需要在双引号之内)

<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:

, b:

, c:

} })

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:

} })

最终组合成数组

[

, 1, 2, 3, 4]

。

对象

<template is=

"objectCombine"

data=

{for: a, bar: b}}"

></template>

Page({ data: { a:

, b:

} })

最终组合成的对象是

{for: 1, bar: 2}

也可以用扩展运算符

...

来将一个对象展开

<template is=

"objectCombine"

data=

{...obj1, ...obj2, e: 5}}"

></template>

Page({ data: { obj1: { a:

, b:

}, obj2: { c:

, d:

} } })

最终组合成的对象是

{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:

, b:

}, obj2: { b:

, c:

}, a:

} })

最终组合成的对象是

{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.js Page({ 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>

也可以将

wx:for

用在

标签上，以渲染一个包含多节点的结构块。例如：

<block wx:for=

{[1, 2, 3]}}"

<view>

{

{index}}:

</view>

<view>

{

{item}}

</view>

</block>

wx:key

如果列表中项目的位置会

动态改变

或者有

新的项目添加

到列表中，并且希望列表中的项目

保持自己的特征和状态

（如

中的输入内容，

的选中状态），需要使用

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:

, unique:

'unique_5'

}, {id:

, unique:

'unique_4'

}, {id:

, unique:

'unique_3'

}, {id:

, unique:

'unique_2'

}, {id:

, unique:

'unique_1'

}, {id:

, unique:

'unique_0'

}, ], numberArray: [

] },

switch

function

(

)

{

const

length =

this

.data.objectArray.length

for

(

let

i =

; 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

(

)

{

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

(

)

{

this

.data.numberArray = [

this

.data.numberArray.length +

].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>

</view>

<view>

</view>

</block>

并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if

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.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })

可以在模板中定义代码片段，然后在不同的地方调用。

name 属性，作为模板的名字。然后在

内定义代码片段

<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:

, 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"

"y"

"touches"

:[{

"identifier"

"pageX"

"pageY"

"clientX"

"clientY"

}],

"changedTouches"

:[{

"identifier"

"pageX"

"pageY"

"clientX"

"clientY"

}] }

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

冒泡事件列表

类型	触发条件
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 动画完成时触发

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如

的

submit

事件，

的

input

事件，

的

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>

触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前

且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好

相反

。

需要在捕获阶段监听事件时，可以采用

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>

如果将上面代码中的第一个

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>

当组件触发事件时，逻辑层绑定该事件的处理函数

会收到一个事件对象

。

BaseEvent

基础事件对象

属性列表：

属性	说明
	事件类型
	事件生成时的时间戳，页面打开到触发事件所经过的毫秒数。
	触发事件的组件的一些属性值集合
	当前组件的一些属性值集合

其中target,

触发事件

的源组件。

属性	说明
id	事件源组件的id
tagName	当前组件的类型
	事件源组件上由data-开头的自定义属性组成的集合

currentTarget为

事件绑定的当前

组件

属性	说明
id	当前组件的id
tagName	当前组件的类型
	当前组件上由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 ===

// - 会转为驼峰写法

event.currentTarget.dataset.alphabeta ===

// 大写会转为小写

} })

CustomEvent

自定义事件对象

属性列表（继承 BaseEvent）：

属性	说明
	额外的信息

"detail"

: {

"x"

"y"

自定义

事件所携带的数据，如表单组件的提交事件会携带

用户的输入

，媒体的错误事件会携带错误信息，详见

定义中各个事件的定义。

点击事件的

detail

带有的 x, y

同 pageX, pageY

代表距离文档左上角的距离。

TouchEvent

触摸事件对象

属性列表（继承 BaseEvent）：

属性	说明
	触摸事件，当前停留在屏幕中的触摸点信息的数组
	触摸事件，当前变化的触摸点信息的数组

特殊事件：

中的触摸事件不可冒泡，所以没有 currentTarget。

其中

"touches"

:[{

"identifier"

"pageX"

"pageY"

"clientX"

"clientY"

}],

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。表示当前停留在屏幕上的触摸点。

Touch 对象

属性	说明
identifier	触摸点的标识符
pageX, pageY	距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
clientX, clientY	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴