QQ小程序 QML

QML（QQ Markup Language）

是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。

::: tip tips:

• QQ小程序同時(shí)兼容WXML標(biāo)簽語言。
• QML的數(shù)據(jù)綁定，不能使用ECMAScript規(guī)范已經(jīng)規(guī)定的關(guān)鍵字和保留字 ，使用了會(huì)提示Unexpected token或者Unexpected token: "tokenName", may be reserved words.的報(bào)錯(cuò) ::: 用以下一些簡單的例子來看看 QML 具有什么能力：

數(shù)據(jù)綁定

<!--qml-->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--qml-->
<view qq:for="{{array}}">{{item}}</view>


// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

條件渲染

<!--qml-->
<view qq:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view qq:elif="{{view == 'APP'}}">APP</view>
<view qq:else="{{view == 'MINA'}}">MINA</view>


// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--qml-->
<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'}
  }
})

事件

<view bindtap="add">{{count}}</view>

Page({
  data: {
    count: 1
  },
  add(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

具體的能力以及使用方式在以下章節(jié)查看： 數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用

數(shù)據(jù)綁定 QML 中的動(dòng)態(tài)數(shù)據(jù)均來自對(duì)應(yīng) Page 的 data。

簡單綁定

數(shù)據(jù)綁定使用 Mustache 語法（雙大括號(hào)）將變量包起來，可以作用于：

內(nèi)容

<view>{{ message }}</view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

組件屬性(需要在雙引號(hào)之內(nèi))

<view id="item-{{id}}"></view>

Page({
  data: {
    id: 0
  }
})

控制屬性(需要在雙引號(hào)之內(nèi))

<view qq:if="{{condition}}"></view>

Page({
  data: {
    condition: true
  }
})

關(guān)鍵字(需要在雙引號(hào)之內(nèi)) true：boolean 類型的 true，代表真值。 false： boolean 類型的 false，代表假值。

<checkbox checked="{{false}}"></checkbox>

運(yùn)算

可以在 {{}} 內(nèi)進(jìn)行簡單的運(yùn)算，支持的有如下幾種方式：

三元運(yùn)算

<view hidden="{{flag ? true : false}}">Hidden</view>

算數(shù)運(yùn)算

<view>{{a + b}} + {{c}} + d</view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})




view中的內(nèi)容為 3 + 3 + d。

邏輯判斷

<view qq:if="{{length > 5}}"></view>

字符串運(yùn)算

<view>{{"hello" + name}}</view>


1
2
Page({
  data: {
    name: 'MINA'
  }
})

數(shù)據(jù)路徑運(yùn)算
<view>{{object.key}} {{array[0]}}</view>


Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

組合

也可以在 Mustache 內(nèi)直接進(jìn)行組合，構(gòu)成新的對(duì)象或者數(shù)組。

數(shù)組

<view qq:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>


Page({
  data: {
    zero: 0
  }
})

最終組合成數(shù)組[0, 1, 2, 3, 4]。

對(duì)象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

Page({
  data: {
    a: 1,
    b: 2
  }
})

最終組合成的對(duì)象是 {for: 1, bar: 2} 也可以用擴(kuò)展運(yùn)算符 ... 來將一個(gè)對(duì)象展開

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最終組合成的對(duì)象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。 如果對(duì)象的 key 和 value 相同，也可以間接地表達(dá)。

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最終組合成的對(duì)象是 {foo: 'my-foo', bar:'my-bar'}。 注意：上述方式可以隨意組合，但是如有存在變量名相同的情況，后邊的會(huì)覆蓋前面，如：

<view qq:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view qq:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

列表渲染

qq:for

在組件上使用 qq:for 控制屬性綁定一個(gè)數(shù)組，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。 默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item

<view qq:for="{{array}}">
  {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

使用 qq:for-item 可以指定數(shù)組當(dāng)前元素的變量名，
使用 qq:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
<view qq:for="{{array}}" qq:for-index="idx" qq:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

qq:for 也可以嵌套，下邊是一個(gè)九九乘法表
<view qq:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" qq:for-item="i">
  <view qq:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" qq:for-item="j">
    <view qq:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block qq:for 類似 block qq:if，也可以將 qq:for 用在<block/>標(biāo)簽上，以渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如：

<block qq:for="{{[1, 2, 3]}}">
  <view>{{index}}:</view>
  <view>{{item}}</view>
</block>

qq:key

如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如 <input> 中的輸入內(nèi)容，<switch> 的選中狀態(tài)），需要使用 qq:key 來指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。

qq:key 的值以兩種形式提供

• 字符串，代表在 for 循環(huán)的 array 中 item 的某個(gè) property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動(dòng)態(tài)改變。
• 保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個(gè)唯一的字符串或者數(shù)字，如： 當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。 如不提供 qq:key，會(huì)報(bào)一個(gè) warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。

示例代碼：

<switch qq:for="{{objectArray}}" qq:key="unique" style="display: block;">
  {{item.id}}
</switch>
<button bindtap="switch">Switch</button>
<button bindtap="addToFront">Add to the front</button>


<switch qq:for="{{numberArray}}" qq: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.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]
      this.data.objectArray[y] = temp
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  addToFront(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(e) {
    this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
    this.setData({
      numberArray: this.data.numberArray
    })
  }
})

注意： 當(dāng) qq:for 的值為字符串時(shí)，會(huì)將字符串解析成字符串?dāng)?shù)組

<view qq:for="array">
  {{item}}
</view>

等同于

<view qq:for="{{['a','r','r','a','y']}}">
  {{item}}
</view>

注意： 花括號(hào)和引號(hào)之間如果有空格，將最終被解析成為字符串

<view qq:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view qq:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

條件渲染

qq:if

在框架中，使用 qq:if="" 來判斷是否需要渲染該代碼塊：

<view qq:if="{{condition}}">True</view>

也可以用 qq:elif 和 qq:else 來添加一個(gè) else 塊：

<view qq:if="{{length > 5}}">1</view>
<view qq:elif="{{length > 2}}">2</view>
<view qq:else>3</view>

block qq:if

因?yàn)?qq:if 是一個(gè)控制屬性，需要將它添加到一個(gè)標(biāo)簽上。如果要一次性判斷多個(gè)組件標(biāo)簽，可以使用一個(gè) <block/> 標(biāo)簽將多個(gè)組件包裝起來，并在上邊使用 qq:if 控制屬性。

<block qq:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

注意： <block/> 并不是一個(gè)組件，它僅僅是一個(gè)包裝元素，不會(huì)在頁面中做任何渲染，只接受控制屬性。

qq:if vs hidden 因?yàn)?qq:if 之中的模板也可能包含數(shù)據(jù)綁定，所以當(dāng) qq:if 的條件值切換時(shí)，框架有一個(gè)局部渲染的過程，因?yàn)樗鼤?huì)確保條件塊在切換時(shí)銷毀或重新渲染。 同時(shí) qq:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時(shí)候才開始局部渲染。 相比之下，hidden 就簡單的多，組件始終會(huì)被渲染，只是簡單的控制顯示與隱藏。 一般來說，qq:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運(yùn)行時(shí)條件不大可能改變則 qq:if 較好。

模板

QML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。

定義模板

使用 name 屬性，作為模板的名字。然后在<template/>內(nèi)定義代碼片段，如：

<!--
  index: int
  msg: string
  time: 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 語法，來動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：
<template name="odd">
  <view>odd</view>
</template>
<template name="even">
  <view>even</view>
</template>


<block qq:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

模板的作用域

模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)以及模板定義文件中定義的 <qs /> 模塊。

事件

什么是事件

事件是視圖層到邏輯層的通訊方式。 事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。 事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)。 事件對(duì)象可以攜帶額外信息，如 id, dataset, touches。

事件使用的方式

事件的使用方式 在組件中綁定一個(gè)事件處理函數(shù)。 如bindtap，當(dāng)用戶點(diǎn)擊該組件的時(shí)候會(huì)在該頁面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>

在相應(yīng)的Page定義中寫上相應(yīng)的事件處理函數(shù)，參數(shù)是

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

使用QS函數(shù)響應(yīng)事件 QS函數(shù)接受2個(gè)參數(shù)，第一個(gè)是event，在原有的event的基礎(chǔ)上加了event.instance對(duì)象，第二個(gè)參數(shù)是ownerInstance，和event.instance一樣是一個(gè)ComponentDescriptor對(duì)象。具體使用如下：

• 在組件中綁定和注冊(cè)事件處理的QS函數(shù)。

<qs module="qs" src="./test.qs"></qs>
<view id="tapTest" data-hi="QQ" bindtap="{{qs.tapName}}">Click me!</view>
**注：綁定的QS函數(shù)必須用{{}}括起來**

test.qs文件實(shí)現(xiàn)tapName函數(shù)

function tapName(event, ownerInstance) {
  console.log('tap wechat', JSON.stringify(event))
}
module.exports = {
  tapName
}

ownerInstance包含了一些方法，可以設(shè)置組件的樣式和class，具體包含的方法以及為什么要用QS函數(shù)響應(yīng)事件，請(qǐng)點(diǎn)擊查看詳情。

事件詳解

事件分類

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

• 冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。

• 非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

QML的冒泡事件列表：

類型	觸發(fā)條件
touchstart	手指觸摸動(dòng)作開始
touchmove	手指觸摸后移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開
longpress	手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)
longtap	手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）
transitionend	會(huì)在 QSS transition 或 qq.createAnimation 動(dòng)畫結(jié)束后觸發(fā)
animationstart	會(huì)在一個(gè) QSS animation 動(dòng)畫開始時(shí)觸發(fā)
animationiteration	會(huì)在一個(gè) QSS animation 一次迭代結(jié)束時(shí)觸發(fā)
animationend	會(huì)在一個(gè) QSS animation 動(dòng)畫完成時(shí)觸發(fā)
touchforcechange	在支持 3D Touch 的 iPhone 設(shè)備，重按時(shí)會(huì)觸發(fā)

注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(詳見各個(gè)組件)

事件綁定和冒泡

事件綁定的寫法同組件的屬性，以 key、value 的形式。

• key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。在非原生組件中，bind和catch后可以緊跟一個(gè)冒號(hào)，其含義不變，如bind:tap、catch:touchstart。
• value 是一個(gè)字符串，需要在對(duì)應(yīng)的 Page 中定義同名的函數(shù)。不然當(dāng)觸發(fā)事件的時(shí)候會(huì)報(bào)錯(cuò)。 bind事件綁定不會(huì)阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。 如在下邊這個(gè)例子中，點(diǎn)擊 inner view 會(huì)先后調(diào)用handleTap3和handleTap2(因?yàn)閠ap事件會(huì)冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父節(jié)點(diǎn)傳遞)，點(diǎn)擊 middle view 會(huì)觸發(fā)handleTap2，點(diǎn)擊 outer view 會(huì)觸發(fā)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>

事件的捕獲階段

觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時(shí)，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。 在下面的代碼中，點(diǎn)擊 inner view 會(huì)先后調(diào)用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>

如果將上面代碼中的第一個(gè)capture-bind改為capture-catch，將只觸發(fā)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>

事件對(duì)象

如無特殊說明，當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象。 BaseEvent 基礎(chǔ)事件對(duì)象屬性列表：

屬性	類型	說明
type	String	事件類型
timeStamp	Integer	事件生成時(shí)的時(shí)間戳
target	Object	觸發(fā)事件的組件的一些屬性值集合
currentTarget	Object	當(dāng)前組件的一些屬性值集合

CustomEvent 自定義事件對(duì)象屬性列表（繼承 BaseEvent）：

屬性	類型	說明
detail	Object	額外的信息

TouchEvent 觸摸事件對(duì)象屬性列表（繼承 BaseEvent）：

屬性	類型	說明
touches	Array	觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組
changedTouches	Array	觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組

特殊事件： <canvas> 中的觸摸事件不可冒泡，所以沒有 currentTarget。

type

代表事件的類型。

timeStamp

頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)。

target

target 觸發(fā)事件的源組件。

屬性	類型	說明
id	String	事件源組件的id
tagName	String	當(dāng)前組件的類型
dataset	Object	事件源組件上由data-開頭的自定義屬性組成的集合

currentTarget事件綁定的當(dāng)前組件。

屬性	類型	說明
id	String	當(dāng)前組件的id
tagName	String	當(dāng)前組件的類型
dataset	Object	當(dāng)前組件上由data-開頭的自定義屬性組成的集合

說明： target 和 currentTarget 可以參考上例中，點(diǎn)擊 inner view 時(shí)，handleTap3 收到的事件對(duì)象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件對(duì)象 target 就是 inner，currentTarget 就是 middle。

dataset

在組件中可以定義數(shù)據(jù)，這些數(shù)據(jù)將會(huì)通過事件傳遞給 SERVICE。 書寫方式： 以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.currentTarget.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。 示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>

Page({
  bindViewTap(event) {
    event.currentTarget.dataset.alphaBeta === 1 // - 會(huì)轉(zhuǎn)為駝峰寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會(huì)轉(zhuǎn)為小寫
  }
})

touches

touches 是一個(gè)數(shù)組，每個(gè)元素為一個(gè) Touch 對(duì)象（canvas 觸摸事件中攜帶的 touches 是 CanvasTouch 數(shù)組）。 表示當(dāng)前停留在屏幕上的觸摸點(diǎn)。

Touch 對(duì)象

屬性	類型	說明
identifier	Number	觸摸點(diǎn)的標(biāo)識(shí)符
pageX, pageY	Number	距離文檔左上角的距離，文檔的左上角為原點(diǎn) ，橫向?yàn)閄軸，縱向?yàn)閅軸
clientX, clientY	Number	距離頁面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角距離，橫向?yàn)閄軸，縱向?yàn)閅軸

CanvasTouch 對(duì)象

屬性	類型	說明
identifier	Number	觸摸點(diǎn)的標(biāo)識(shí)符
x, y	Number	距離 Canvas 左上角的距離，Canvas 的左上角為原點(diǎn) ，橫向?yàn)閄軸，縱向?yàn)閅軸

changedTouches

changedTouches 數(shù)據(jù)格式同 touches。 表示有變化的觸摸點(diǎn)，如從無變有（touchstart），位置變化（touchmove），從有變無（touchend、touchcancel）。

detail

自定義事件所攜帶的數(shù)據(jù)，如表單組件的提交事件會(huì)攜帶用戶的輸入，媒體的錯(cuò)誤事件會(huì)攜帶錯(cuò)誤信息。 點(diǎn)擊事件的detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。

QS響應(yīng)事件

背景 有頻繁用戶交互的效果在小程序上表現(xiàn)是比較卡頓的，例如頁面有 2 個(gè)元素 A 和 B，用戶在 A 上做 touchmove 手勢，要求 B 也跟隨移動(dòng)，<movable-view> 就是一個(gè)典型的例子。一次 touchmove 事件的響應(yīng)過程為： a、touchmove 事件從視圖層（Webview）拋到邏輯層（App Service） b、邏輯層（App Service）處理 touchmove 事件，再通過 setData 來改變 B 的位置 一次 touchmove 的響應(yīng)需要經(jīng)過 2 次的邏輯層和渲染層的通信以及一次渲染，通信的耗時(shí)比較大。此外 setData 渲染也會(huì)阻塞其它腳本執(zhí)行，導(dǎo)致了整個(gè)用戶交互的動(dòng)畫過程會(huì)有延遲。

實(shí)現(xiàn)方案

本方案基本的思路是減少通信的次數(shù)，讓事件在視圖層（Webview）響應(yīng)。小程序的框架分為視圖層（Webview）和邏輯層（App Service），這樣分層的目的是管控，開發(fā)者的代碼只能運(yùn)行在邏輯層（App Service），而這個(gè)思路就必須要讓開發(fā)者的代碼運(yùn)行在視圖層（Webview）。

使用 QS 函數(shù)用來響應(yīng)小程序事件，目前只能響應(yīng)內(nèi)置組件的事件，不支持自定義組件事件。

QS 函數(shù)的除了純邏輯的運(yùn)算，還可以通過封裝好的ComponentDescriptor 實(shí)例來訪問以及設(shè)置組件的 class 和樣式，對(duì)于交互動(dòng)畫，設(shè)置 style 和 class 足夠了。QS 函數(shù)的例子如下：

const qsFunction = function (event, ownerInstance) {
  const instance = ownerInstance.selectComponent('.classSelector') // 返回組件的實(shí)例
  instance.setStyle({
    'font-size': '14px' // 支持rpx
  })
  instance.getDataset()
  instance.setClass(className)
  // ...
  return false // 不往上冒泡，相當(dāng)于調(diào)用了同時(shí)調(diào)用了stopPropagation和preventDefault
}