kylinH5框架之项目脚手架

页面介绍

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

代码引入

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

页面声明结构

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

import { Page } from '@ali/kylin-framework';
import IndexComponent from './indexComponent.vue';
class IndexPage extends Page {
  initOptions() {
    return {}
  }
  render(h) {
    return <IndexComponent></IndexComponent>
  }
}
new IndexPage('#app');

页面接口

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

命名空间

ES6 通过如下方式引入：

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

API

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

• initOptions
• render

initOptions

function initOptions(): VueOptions

返回值

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

render

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

function render(): VNode

返回值

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