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 規範進行書寫。