用來定義頁面數(shù)據(jù)和實現(xiàn)生命周期接口

語法

支持 ES6 語法

模塊聲明

可以通過 import 引入功能模塊，在代碼中調(diào)用模塊方法（具體參看接口部分文檔說明）

import fetch from "@system.fetch"

代碼引用

JS 代碼引用推薦使用 import 來導(dǎo)入, 例如：

import utils from '../Common/utils.js'

注意： 快應(yīng)用環(huán)境不是 node 環(huán)境，不要引用 node 原生模塊，如 import fs from 'fs'

對象

頁面級組件

自定義組件

prop 驗證

在自定義組件中，可將 props 定義為帶驗證需求的對象。其中，key 為屬性名，value 為屬性對應(yīng)的驗證需求。驗證失敗則輸出錯誤提示日志，增加 prop 驗證有利于規(guī)范自定義組件的使用

定義：

示例：

<script>
  export default {
    props: {
      // 單一類型檢查的簡寫
      propA: Number,
      // 多種可能類型的簡寫
      propB: [String, Number],
      // 必填的字符串
      propC: {
        type: String,
        required: true
      },
      // 帶默認值的數(shù)字
      propD: {
        type: Number,
        default: 100
      },
      // 帶有默認值的對象
      propE: {
        type: Object,
        default () {
          return { message: 'hello' }
        }
      },
      // 自定義驗證函數(shù)
      propF: {
        validator (value) {
          return value === 'hello'
        }
      }
    }
  }
</script>

計算屬性 1050+

• 類型：{ [key: string]: Function | { get: Function, set: Function } }
• 詳細：計算屬性將被混入到 Vm 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vm 實例。計算屬性的結(jié)果會被緩存，除非依賴的響應(yīng)式屬性變化才會重新計算。注意，如果某個依賴 (比如非響應(yīng)式屬性) 在該實例范疇之外，則計算屬性是不會被更新的。

示例：

export default {
  data: {
    firstName: 'Quick',
    lastName: 'App'
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(value) {
        const names = value.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  },
  onReady() {
    console.log(this.fullName) // Quick App
    this.fullName = 'John Doe'
    console.log(this.firstName) // John
    console.log(this.lastName) // Doe
  }
}

公共對象

應(yīng)用對象

可通過$app訪問

頁面對象

可通過$page訪問

方法

數(shù)據(jù)方法

公共方法

事件方法

頁面方法

可通過$page訪問

生命周期接口

頁面生命周期

頁面的生命周期接口的調(diào)用順序：

• 打開頁面A：onInit() -> onReady() -> onShow()
• 在頁面A打開頁面B：onHide()
• 從頁面B返回頁面A：onShow()
• A頁面返回：onBackPress() -> onHide() -> onDestroy()

應(yīng)用生命周期

消息通道(BroadcastChannel) 正式版本可用

用來實現(xiàn)不同頁面之間的相互通信。

接口說明

在BroadcastChannel的構(gòu)造函數(shù)中,只支持接受一個參數(shù),就是"頻道名稱"(channel name)

比如：

const test = new BroadcastChannel('channel')

BroadcastChannel 定義的接口如下：

declare interface BroadcastChannel = {
  name: string,
  postMessage: (message: any) => void;
  onmessage: (event: MessageEvent) => void;
  close: () => void;
}

消息對象（MessageEvent）的類型定義如下：

declare interface MessageEvent = {
  type: string, // "message"
  data: any
}

對參數(shù)的說明：

用法

假設(shè)在我們的應(yīng)用中，有A、B、C三個頁面

在頁面 A 中：

const pageA = new BroadcastChannel('channel1')
pageA.postMessage('haha!')

在頁面 B 中：

const pageB = new BroadcastChannel('channel1')

在頁面 C 中：

const pageC = new BroadcastChannel('channel1')
pageC.onmessage = function (event) {
  console.log(event.data)
  pageC.postMessage('hello, i am here!')
}

這樣,頁面 A 、B 、C 都創(chuàng)建一個監(jiān)聽了 'channel1' 頻道的 BroadcastChannel 對象，它們之間可以通過這個對象實現(xiàn)互相通信。

當 pageA 發(fā)布了 'haha!' 消息時，pageC 將收到一個消息事件，其 data 字段等于 'haha!'，然后也向頻道中回復(fù)一條消息。注意：自己不會收到自己發(fā)的消息。

但是 pageB 并不會收到這些消息，因為他沒有實現(xiàn)onmessage 方法，相當于沒有接收頻道中的消息，所以他實際上不是一個訂閱者。

注意:在pageA銷毀channel當前不與頁面context進行上下文綁定，需要主動關(guān)閉消息通道，如下所示:

const pageA = new BroadcastChannel('tom')
pageA.close();