QQ小程序 注冊(cè)程序

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ò) ::: 用以下一些簡(jiǎn)單的例子來看看 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。

簡(jiǎn)單綁定

數(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)行簡(jiǎ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 就簡(jiǎn)單的多，組件始終會(huì)被渲染，只是簡(jiǎn)單的控制顯示與隱藏。 一般來說，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ā)