框架

YIS 应用是以页面为维度，进行资源和逻辑处理的。下面我们将围绕页面的相关内容进行详细介绍。

页面创建

一个页面需要有 index.js、index.skel、main.css 三个基础文件。你可以通过 ykit addPage -p 页面名称 来迅速构建一个包含基础内容的页面目录。

index.js

index.js 是页面的逻辑入口。通过构建一个页面组件来与框架进行逻辑交互。

所有的页面组件都继承自 PageCore 这个基础类。
页面的样式文件也需要在该文件中引入。
Page 组件是我们封装的页面容器组件，包括一些 UI 相关功能，推荐作为所有页面组件的根节点。

import { PageCore } from '@qnpm/yis';
import { Page } from '@qnpm/yis/components';
import styles from './main.css';

class Home extends PageCore {
    render() {
        return (
            <Page>
                <div className={ styles.hello }>Hello World</div>
            </Page>
        );
    }
}

export default Home;

当然，你也可以对 Home 组件进行一些封装。

代码节选自：yis-demo/src/pages/home/index.js

export default function() {
    // ...
    // 对 Home 进行一些封装和处理
    // ...
    return <Home />;
}

main.css

css 文件需要先引入框架的 reset.css文件，然后即可根据需求自行定制。更多关于 YIS 中的样式可以参照样式。

代码节选自：yis-demo/src/pages/home/main.css

@import '@qnpm/yis/components/reset.css';

.hello {
    font-size: .24rem;
    text-align: center;
}

index.skel

index.skel 是页面的骨架屏模板，会在打包之后生成完整的 html 文件，在页面加载后首先展示。

骨架屏的内容比较复杂，我们将在下一个小节单独讲解。