跳到主要内容

页面

每一张页面,都可以由 路由组件零或多个布局组件 组装而成。路由组件和布局组件的开发规范基本一致,可以包含以下内容:

  • 默认导出是组件的具体实现,必选。
  • 导出 dataLoader,约定页面的数据请求,可选。
  • 导出 pageConfig,约定页面的 TitleMeta 等信息,可选。

组件

对应路由组件或布局组件在页面中需要渲染的内容。

src/pages/index.tsx
import { useData } from 'ice';

export default function Home() {
const data = useData();
return (
<>
<div>Hello ICE</div>
<div>{JSON.stringify(data)}</div>
</>
);
}

获取页面初始数据

详见数据加载

配置页面运行时属性

页面主体内容之外的、其他需要通用 HTML 模板上差异化显示的内容,可以通过导出 pageConfig 来声明。

支持的页面级配置包含:

title

标题会显示在文档上,可以通过 title 属性来设置。 示例:

import { definePageConfig } from 'ice';

export const pageConfig = definePageConfig(() => ({
title: 'Home',
}));

metas

Meta 信息会显示在文档上,可以通过 metas 属性来设置。 示例:

import { definePageConfig } from 'ice';

export const pageConfig = definePageConfig(() => ({
meta: [
{ charset: 'utf-8' },
{
name: 'title',
value: 'Something cool',
},
{
name: 'description',
value: 'This becomes the nice preview on search results.',
},
],
}));

页面级需要额外插入的 <link /> 标签,会被插入 <head> 标签内,先于页面自身的 Bundle 加载,是阻塞型的。

框架提供了这个能力,但不推荐使用,除非确有需要前置加载。

import { definePageConfig } from 'ice';

export const pageConfig = definePageConfig(() => ({
links: [
{
rel: 'icon',
href: '/favicon.png',
type: 'image/png',
},
{
rel: 'stylesheet',
href: 'https://example.com/some/styles.css',
},
]
}));

推荐,在页面组件内延迟加载,以达到更好的性能体验。

// src/pages/index.tsx
export default function Home() {
return (
<>
<div>Hello ICE</div>
<link rel="stylesheet" href="https://example.com/some/styles.css" />
</>
);
}

scripts

页面级需要前置加载的脚本资源,会被插入在主 Bundle 前,但是会阻塞渲染。通常用于加载全局 JS SDK 或 Polyfill。


import { definePageConfig } from 'ice';

export const pageConfig = definePageConfig(() => ({
scripts: [
{
src: 'https://example.com/some/index.js',
},
],
}));

推荐在页面组件内按需异步加载,以达到更好的性能体验。

小程序页面配置

小程序端不支持上述 title/metas/links/scripts 等配置。但是,通过导出 pageConfig 能够声明该页面的小程序页面配置。以阿里小程序为例,阿里小程序-页面配置的内容均可通过该方式声明:

src/pages/index.tsx
import { definePageConfig } from 'ice';

export const pageConfig = definePageConfig(() => ({
"defaultTitle": "",
"allowsBounceVertical": "NO",
"transparentTitle": "auto",
"titleBarColor": "#262833",
"optionMenu": {
"icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
},
"titlePenetrate": "YES",
"barButtonTheme": "light"
}));