自定义页面的开发

创建自定义页面

由于炎凰应用平台的应用框架是基于react 编写，所以我们支持用户给予react 扩展自己的自定义页面。当用户在创建应用过程中回答应用将包含web feature以后，app-raiser将会自动生成一个简单的DemoPage以供用户参考。文件位于:

${APP_HOME}/src/web/page/DemoPage/DemoPage.jsx

我们的原则是，所有自定义页面都将放置于 ${APP_HOME}/src/web/page 这个目录下，以目录做隔离，例如DemoPage的内容都将放在名为DemoPage的目录中，所以用户需要添加一个自定义页面，也需要以页面名称新建一个目录。

查看文件之后我们会发现文件内容十分简单:

import React, { useEffect } from 'react'
import layout from '@yanhuang/yh-page';


export default function DemoPage(props) {
    const { onPageTitleChange } = props;
    useEffect(() => {
        onPageTitleChange('Demo Page');
    }, []);
    return (
        <div>place holder</div>
    )
};
const viewport = document.getElementById('viewport');
layout(<DemoPage/>, viewport);

逻辑其实只是分为2步:

定义自己的PageComponent
使用@yanhuang/yh-page提供的layout 函数，将自己的page实力渲染在文档中id为viewport 的元素上

创建自定义页面​

创建自定义页面