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

外部样式 1100+

开发者可通过 externalClasses 将外部样式传递给自定义组件。

注意：

1. 若传递的样式名在自定义组件中已有定义，则优先级：外部样式 > 自定义组件中定义的样式；若在一个节点上同时应用普通样式及外部样式，则优先级：外部样式 > 普通样式
2. 若在 props 中定义了同名属性，则在 externalClasses 中无法再使用该属性

示例：

// 父组件
<template>
  <div>
    <custom-component my-class="color-class font-class"></custom-component>
  </div>
</template>

<style>
.color-class {
  color: #FF0000;
}
.font-class {
  font-size: 20px;
}
</style>

// 子组件
<template>
  <div>
    <text class="my-class">该节点的样式由父组件决定</text>
  </div>
</template>

<script>
export default {
  externalClasses: ['my-class'],
}
</script>

公共对象

示例代码：

$attrs:

// 父组件 comp.ux
<template>
  <div class="demo-page">
    <child name="{{ name }}" gender="{{ gender }}" age="{{ age }}"></child>
  </div>
</template>

// 子组件 child.ux
<text>父亲name为：{{ name }}</text>
<grandson $attrs></grandson>

<script>
export default {
  props: ['name'],
}
</script>

// 孙子组件 grandson.ux
<text>高阶comp组件gender为： {{ $attrs.gender }}</text>

$listeners:

// 父组件 comp.ux
<template>
  <div class="demo-page">
    <child onevent1="handleEvent1"></child>
  </div>
</template>

<script>
export default {
  handleEvent1(evt) {
    // do something!
  }
}
</script>

// 子组件 child.ux
<grandson $listeners></grandson>

// 孙子组件 grandson.ux
<input type="button" value="grandson触发高阶组件comp中的event1事件" onclick="emitEvent1"/>

<script>
export default {
  emitEvent1() {
    this.$emit('event1', {childName: 'grandson'})
  }
}
</script>

应用对象

可通过$app访问

页面对象

可通过$page访问

方法

数据方法

公共方法

事件方法

应用方法 1010+

可通过$app访问

页面方法

可通过$page访问

注意：对于 setMenubarData 使用 shareParams 或者页面参数的情况下，页面参数的接收必须在相应页面对字串内容中的 key 值 {"key": value}显式声明 public 才可以接收到，参见 https://doc.quickapp.cn/framework/seo.html?h=%E9%A1%B5%E9%9D%A2%E5%8F%82%E6%95%B0

示例：

*页面中需要声明参数变量名称，注意参数名称需要和 shareParams 中的 key-value 的 key 值名称对应，对于 usePageParams 或者 shareCurrentPage 为 true 情况，也要对应页面参数声明对应的 key 值接收参数*

public: {

    key: null

  },

如果快应用当前页面和打开的分享页面不同，在打开快应用时候，跳转到分享页时，分享参数可以在 onInit 中接收到

onInit() {

console.log('onInit share param page :  ' + JSON.stringify(this.key))

}

如果快应用当前页面和打开的分享页面相同，在打开快应用时候，跳转到分享页时，分享参数可以在 onRefresh 接收到

onRefresh(data){

console.log('onRefresh share param page :  ' + JSON.stringify(data.key))

}

生命周期接口

页面生命周期

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

onReachTop 1080+

监听页面是否触顶。页面滚动位置从不触顶到触顶时触发

参数

无

onReachBottom 1080+

监听页面是否触底。页面滚动位置从不触底到触底时触发

参数

无

onPageScroll 1080+

监听页面滚动。页面发生滚动时触发，内嵌滑动组件的滚动不会触发

参数

event 参数：

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

• 打开页面 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>