script 脚本

用来定义页面数据和实现生命周期接口

语法

支持 ES6 语法

模块声明

可以通过 import 引入功能模块，在代码中调用模块方法（具体参看接口部分文档说明）

import fetch from '@system.fetch'

代码引用

JS 代码引用推荐使用 import 来导入, 例如：

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

注意： 快应用环境不是 node 环境，不要引用 node 原生模块，如 import fs from 'fs'

对象

页面级组件

自定义组件

prop 验证 1010+

在自定义组件中，可将 props 定义为带验证需求的对象。其中，key 为属性名，value 为属性对应的验证需求。验证失败则输出错误提示日志，增加 prop 验证有利于规范自定义组件的使用

定义：

示例：

<script>
  export default {
    props: {
      // 单一类型检查的简写
      propA: Number,
      // 多种可能类型的简写
      propB: [String, Number],
      // 必填的字符串
      propC: {
        type: String,
        required: true
      },
      // 带默认值的数字
      propD: {
        type: Number,
        default: 100
      },
      // 带有默认值的对象
      propE: {
        type: Object,
        default () {
          return { message: 'hello' }
        }
      },
      // 自定义验证函数
      propF: {
        validator (value) {
          return value === 'hello'
        }
      }
    }
  }
</script>

计算属性 1050+

• 类型：{ [key: string]: Function | { get: Function, set: Function } }
• 详细：计算属性将被混入到 Vm 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vm 实例。计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

示例：

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

公共对象

应用对象

可通过$app访问

页面对象

可通过$page访问

方法

数据方法

公共方法

事件方法

应用方法 1010+

可通过$app访问

页面方法

可通过$page访问

生命周期接口

页面生命周期

onInit

监听页面初始化。当页面完成初始化时调用，只触发一次

参数

onReady

监听页面创建完成。当页面完成创建可以显示时触发，只触发一次

参数

无

onShow

监听页面显示。当进入页面时触发

参数

无

onHide

监听页面隐藏。当页面跳转离开时触发

参数

无

onDestroy

监听页面退出。当页面跳转离开（不进入导航栈）时触发

参数

无

onBackPress

监听返回按钮动作。当用户点击返回按钮时触发

参数

无

返回值

onMenuPress

监听菜单按钮动作。当用户点击菜单按钮时触发

参数

无

返回值

onRefresh 1050+

监听页面重新打开。

1.当页面在 manifest 中 launchMode1050+ 标识为'singleTask'时，仅会存在一个目标页面实例，用户多次打开目标页面时触发此函数。
2.打开目标页面时在 push 参数中携带 flag 'clearTask'，且页面实例已经存在时触发。
该回调中参数为重新打开该页面时携带的参数。
详见页面启动模式

参数

onConfigurationChanged 1060+

监听应用配置发生变化。当应用配置发生变化时触发，如系统语言或主题模式改变

参数

event 参数：

event 中type 现在支持的参数值如下：

示例代码：

onConfigurationChanged(evt) {
  console.log(`触发生命周期onConfigurationChanged, 配置类型：${evt.type}`)
}

onKey car 1060+

监听按键响应。当按键被触发时回调

参数

event 参数：

示例代码：

onKey(evt) {
  console.log('key pressed!'+event);
  console.info(`触发页面生命周期 onKey`)
  // false：默认值，表示不拦截key值操作，直接执行对应key值；true：表示自己处理key值；
  // return true
}

注意： 一个页面可以多个组件注册onkey回调 但是在遥控器发起操作时，客户端会寻找当前焦点的元素，判断其是否注册了onkey回调。如有，则执行onkey回调 因此，同一个页面只有一个组件的onkey回调会被执行

页面的生命周期接口的调用顺序

• 打开页面 A：onInit() -> onReady() -> onShow()
• 在页面 A 打开页面 B：onHide()
• 从页面 B 返回页面 A：onShow()
• A 页面返回：onBackPress() -> onHide() -> onDestroy()

自定义组件的生命周期 1050+

自定义组件，指的是通过语法引入的 ViewModel 组件

应用生命周期

onCreate()

监听应用创建,应用创建时调用

参数

无

onRequest() 1070+

监听应用收到一个外部的打开新页面的请求

参数

无

onShow() 1070+

监听应用返回前台,应用返回前台时调用

参数

无

onHide() 1070+

监听应用退到后台,应用退到后台时调用

参数

无

onDestroy()

监听应用销毁,应用销毁时调用

参数

无

onError(Object) 1030+

监听应用报错,应用捕获异常时调用

参数

onPageNotFound(Object) 1060+

监听页面跳转的异常，当页面跳转异常时，如果前端在 app.ux 定义了 onPageNotFound，将会收到错误回调

页面跳转场景：router.push、router.replace、a 标签配置 href 属性跳转

示例代码：

// this methods must be written at app.ux
// app.ux
export default {
  onPageNotFound(params) {
    const { uri = '' } = params
    console.error('error uri', uri)
  }
}

onPageNotFound 回调返回一个对象，对象参数值如下展示：

app.ux 对象的属性

app.ux 对象指的是：开发者在app.ux中<script>节点内要导出的对象

消息通道(BroadcastChannel) 1000+

用来实现不同页面之间的相互通信。

接口说明

在 BroadcastChannel 的构造函数中,只支持接受一个参数,就是"频道名称"(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
}

对参数的说明：

用法

假设在我们的应用中，有 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 都创建一个监听了 'channel1' 频道的 BroadcastChannel 对象，它们之间可以通过这个对象实现互相通信。

当 pageA 发布了 'haha!' 消息时，pageC 将收到一个消息事件，其 data 字段等于 'haha!'，然后也向频道中回复一条消息。注意：自己不会收到自己发的消息。

但是 pageB 并不会收到这些消息，因为他没有实现 onmessage 方法，相当于没有接收频道中的消息，所以他实际上不是一个订阅者。

注意:在 pageA 销毁 channel 当前不与页面 context 进行上下文绑定，需要主动关闭消息通道，如下所示:

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

框架前端插件 1060+

开发者有时面对更多的解耦合与 AOP（Aspect Oriented Programming）需求，插件机制用于解决开发者业务代码与平台本身能力的耦合分离；

比如，开发者需要记录用户打开快应用与每个页面打开返回等的时间操作节点，用于埋点需求，此时通过插件机制就可以不侵入到每个页面代码模块中，实现更优雅；

定义插件

开发者通过定义一个普通的 js 对象就可以代表一个插件（称为：插件对象），该对象提供 install 方法，将在应用启动时加载并安装插件，此时该方法得到执行；

插件对象

VmClass 类

如下代码所示：

// file：plugin-demo.js

const PluginDemo = {
  // 安装入口
  install(VmClass) {
    // 页面生命周期
    VmClass.mixin({
      onInit() {
        console.info(`页面生命周期：onInit`)
      },
      onReady() {
        console.info(`页面生命周期：onReady`)
      },
      onShow() {
        console.info(`页面生命周期：onShow`)
      },
      onHide() {
        console.info(`页面生命周期：onHide`)
      }
    })

    // 应用生命周期
    VmClass.mixinApp({
      onCreate() {
        console.info(`页面生命周期：onCreate`)
      }
    })
  }
}

export default PluginDemo

插件引入

开发者在app.ux对象中声明 plugins 属性（类型为数组），数组中的元素声明为需要引入的插件；

如下代码所示：

<script>
  // file：app.ux

  import pluginDemo from './plugin-demo.js'

  export default {
    plugins: [
      pluginDemo
    ]
  }
</script>