全部产品

页面

更新时间:2020-08-07 20:12:08

Page 是一个 Webview 的逻辑抽象层,同时也是组件挂载的根节点。

代码引入

  1. import { Page } from '@ali/kylin-framework';

页面声明结构

一个Page包含的接口在 页面接口 中声明,提供了对 Vue 实例的完整控制能力,简易的 Page 使用如下,initOptions 负责处理额外的 Vue 配置选项。

  1. import { Page } from '@ali/kylin-framework';
  2. import IndexComponent from './indexComponent.vue';
  3. class IndexPage extends Page {
  4. initOptions() {
  5. return {}
  6. }
  7. render(h) {
  8. return <IndexComponent></IndexComponent>
  9. }
  10. }
  11. new IndexPage('#app');

页面接口

本部分介绍页面接口的命名空间及 API。

命名空间

ES6 通过如下方式引入:

  1. import { Page } from '@ali/kylin-framework';

API

目前 Page 提供如下成员方法以供派生:

  • initOptions
  • render

initOptions

  1. function initOptions(): VueOptions

返回值

返回结果要求是一个合法的 Vue 入参。一般来说,不建议在 Page 层引入过于复杂的配置,涉及到的逻辑都可以放到 Component 中来维护。

render

该函数要求是一个合法的 Vuerender 函数。

  1. function render(): VNode

返回值

返回结果要求是合法 VNode 元素,请按照 JSX 规范进行书写。