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

2020-07-01 11:11 更新

QML（QQ Markup Language）

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

::: tip tips:

  • QQ小程序同時(shí)兼容WXML標(biāo)簽語(yǔ)言。
  • 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ù)綁定

  1. <!--qml-->
  2. <view>{{message}}</view>

  1. // page.js
  2. Page({
  3.   data: {
  4.     message: 'Hello MINA!'
  5.   }
  6. })

列表渲染

  1. <!--qml-->
  2. <view qq:for="{{array}}">{{item}}</view>
  5. // page.js
  6. Page({
  7.   data: {
  8.     array: [1, 2, 3, 4, 5]
  9.   }
  10. })

條件渲染

  3. <!--qml-->
  4. <view qq:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
  5. <view qq:elif="{{view == 'APP'}}">APP</view>
  6. <view qq:else="{{view == 'MINA'}}">MINA</view>
  9. // page.js
  10. Page({
  11.   data: {
  12.     view: 'MINA'
  13.   }
  14. })

模板

  3. <!--qml-->
  4. <template name="staffName">
  5.   <view>
  6.     FirstName: {{firstName}}, LastName: {{lastName}}
  7.   </view>
  8. </template>
  11. <template is="staffName" data="{{...staffA}}"></template>
  12. <template is="staffName" data="{{...staffB}}"></template>
  13. <template is="staffName" data="{{...staffC}}"></template>
  1. // page.js
  2. Page({
  3.   data: {
  4.     staffA: {firstName: 'Hulk', lastName: 'Hu'},
  5.     staffB: {firstName: 'Shang', lastName: 'You'},
  6.     staffC: {firstName: 'Gideon', lastName: 'Lin'}
  7.   }
  8. })

事件

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

  1. Page({
  2.   data: {
  3.     count: 1
  4.   },
  5.   add(e) {
  6.     this.setData({
  7.       count: this.data.count + 1
  8.     })
  9.   }
  10. })

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

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

簡(jiǎn)單綁定

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

內(nèi)容

  1. <view>{{ message }}</view>

  1. Page({
  2.   data: {
  3.     message: 'Hello MINA!'
  4.   }
  5. })

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

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

  1. Page({
  2.   data: {
  3.     id: 0
  4.   }
  5. })

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

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

  1. Page({
  2.   data: {
  3.     condition: true
  4.   }
  5. })

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

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

運(yùn)算

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

三元運(yùn)算

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

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

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

  1. Page({
  2.   data: {
  3.     a: 1,
  4.     b: 2,
  5.     c: 3
  6.   }
  7. })
  12. view中的內(nèi)容為 3 + 3 + d。

邏輯判斷

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

字符串運(yùn)算

  1. <view>{{"hello" + name}}</view>
  4. 1
  5. 2
  6. Page({
  7.   data: {
  8.     name: 'MINA'
  9.   }
  10. })

  1. 數(shù)據(jù)路徑運(yùn)算
  2. <view>{{object.key}} {{array[0]}}</view>
  5. Page({
  6.   data: {
  7.     object: {
  8.       key: 'Hello '
  9.     },
  10.     array: ['MINA']
  11.   }
  12. })

組合

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

數(shù)組

  1. <view qq:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
  4. Page({
  5.   data: {
  6.     zero: 0
  7.   }
  8. })

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

對(duì)象

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

  1. Page({
  2.   data: {
  3.     a: 1,
  4.     b: 2
  5.   }
  6. })

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

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

  1. Page({
  2.   data: {
  3.     obj1: {
  4.       a: 1,
  5.       b: 2
  6.     },
  7.     obj2: {
  8.       c: 3,
  9.       d: 4
  10.     }
  11.   }
  12. })

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

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

  1. Page({
  2.   data: {
  3.     foo: 'my-foo',
  4.     bar: 'my-bar'
  5.   }
  6. })

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

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

等同于

  1. <view qq:for="{{[1,2,3] + ' '}}">
  2.   {{item}}
  3. </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

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

  1. Page({
  2.   data: {
  3.     array: [{
  4.       message: 'foo',
  5.     }, {
  6.       message: 'bar'
  7.     }]
  8.   }
  9. })

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

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

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

  1. <block qq:for="{{[1, 2, 3]}}">
  2.   <view>{{index}}:</view>
  3.   <view>{{item}}</view>
  4. </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)注其順序，可以選擇忽略。

示例代碼：

  1. <switch qq:for="{{objectArray}}" qq:key="unique" style="display: block;">
  2.   {{item.id}}
  3. </switch>
  4. <button bindtap="switch">Switch</button>
  5. <button bindtap="addToFront">Add to the front</button>
  8. <switch qq:for="{{numberArray}}" qq:key="*this" style="display: block;">
  9.   {{item}}
  10. </switch>
  11. <button bindtap="addNumberToFront">Add to the front</button>

  1. Page({
  2.   data: {
  3.     objectArray: [
  4.       {id: 5, unique: 'unique_5'},
  5.       {id: 4, unique: 'unique_4'},
  6.       {id: 3, unique: 'unique_3'},
  7.       {id: 2, unique: 'unique_2'},
  8.       {id: 1, unique: 'unique_1'},
  9.       {id: 0, unique: 'unique_0'},
  10.     ],
  11.     numberArray: [1, 2, 3, 4]
  12.   },
  13.   switch(e) {
  14.     const length = this.data.objectArray.length
  15.     for (let i = 0; i < length; ++i) {
  16.       const x = Math.floor(Math.random() * length)
  17.       const y = Math.floor(Math.random() * length)
  18.       const temp = this.data.objectArray[x]
  19.       this.data.objectArray[x] = this.data.objectArray[y]
  20.       this.data.objectArray[y] = temp
  21.     }
  22.     this.setData({
  23.       objectArray: this.data.objectArray
  24.     })
  25.   },
  26.   addToFront(e) {
  27.     const length = this.data.objectArray.length
  28.     this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
  29.     this.setData({
  30.       objectArray: this.data.objectArray
  31.     })
  32.   },
  33.   addNumberToFront(e) {
  34.     this.data.numberArray = [this.data.numberArray.length + 1].concat(this.data.numberArray)
  35.     this.setData({
  36.       numberArray: this.data.numberArray
  37.     })
  38.   }
  39. })

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

  1. <view qq:for="array">
  2.   {{item}}
  3. </view>

等同于

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

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

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

等同于

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

條件渲染

qq:if

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

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

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

  1. <view qq:if="{{length > 5}}">1</view>
  2. <view qq:elif="{{length > 2}}">2</view>
  3. <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 控制屬性。

  1. <block qq:if="{{true}}">
  2.   <view>view1</view>
  3.   <view>view2</view>
  4. </block>

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

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)定義代碼片段，如：

  1. <!--
  2.   index: int
  3.   msg: string
  4.   time: string
  5. -->
  6. <template name="msgItem">
  7.   <view>
  8.     <text>{{index}}: {{msg}}</text>
  9.     <text>Time: {{time}}</text>
  10.   </view>
  11. </template>

使用模板 使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入，如：

  1. <template is="msgItem" data="{{...item}}" />

  1. Page({
  2.   data: {
  3.     item: {
  4.       index: 0,
  5.       msg: 'this is a template',
  6.       time: '2016-09-15'
  7.     }
  8.   }
  9. })

  1. is 屬性可以使用 Mustache 語(yǔ)法，來動(dòng)態(tài)決定具體需要渲染哪個(gè)模板：
  2. <template name="odd">
  3.   <view>odd</view>
  4. </template>
  5. <template name="even">
  6.   <view>even</view>
  7. </template>
  10. <block qq:for="{{[1, 2, 3, 4, 5]}}">
  11.   <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
  12. </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ì)在該頁(yè)面對(duì)應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。

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

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

  1. event。
  2. Page({
  3.   tapName(event) {
  4.     console.log(event)
  5.   }
  6. })

  1. 可以看到log出來的信息大致如下：
  2. {
  3.   "type": "tap",
  4.   "timeStamp": 895,
  5.   "target": {
  6.     "id": "tapTest",
  7.     "dataset": {
  8.       "hi": "WeChat"
  9.     }
  10.   },
  11.   "currentTarget": {
  12.     "id": "tapTest",
  13.     "dataset": {
  14.       "hi": "WeChat"
  15.     }
  16.   },
  17.   "detail": {
  18.     "x": 53,
  19.     "y": 14
  20.   },
  21.   "touches": [
  22.     {
  23.       "identifier": 0,
  24.       "pageX": 53,
  25.       "pageY": 14,
  26.       "clientX": 53,
  27.       "clientY": 14
  28.     }
  29.   ],
  30.   "changedTouches": [
  31.     {
  32.       "identifier": 0,
  33.       "pageX": 53,
  34.       "pageY": 14,
  35.       "clientX": 53,
  36.       "clientY": 14
  37.     }
  38.   ]
  39. }

使用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ù)。

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

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

  1. function tapName(event, ownerInstance) {
  2.   console.log('tap wechat', JSON.stringify(event))
  3. }
  4. module.exports = {
  5.   tapName
  6. }

  1. 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ā)

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)