为了提高首屏体验，在 YIS 应用中，我们提供了页面骨架屏功能。骨架屏幕指的是根据页面目录中的 index.skel 生成的 html 页面，它会页面加载过程中的第一时间被展示，你可以根据你的页面结构渲染一个骨架屏。在有离线包的情况下，骨架屏的显示时间大概是 300+ms，所以推荐为你项目中的所有页面都提供骨架屏。
你需要通过页面目录中的 index.skel 来定义一个骨架屏模板。模板使用标准的 html 即可。
<head>
<style type="text/css">
/**
* 你的内容样式
**/
.content{}
</style>
</head>
<body>
<div class="yis-skeleton">
<!--你的内容-->
<p class="content">...</p>
</div>
</body>
骨架屏在页面加载时显示，默认会在页面第一次 render 时隐藏。但是，在有一些业务场景中，经常需要根据异步请求的数据来展示页面的内容。比如：一个列表页，在骨架屏消失之后，会显示一个加载中的动画，等列表数据返回后才会真正渲染列表。这样，相当于页面经历了两个 loading 的过程。为了解决这个问题，我们提供了手动关闭骨架屏的功能。即，你可以自行选择在什么时候关闭骨架屏。
首先，你需要在 index.skel 的 .yis-skeleton 容器上添加 data-manual-remove="true" 来告诉框架，这个页面的骨架屏是手动关闭的。
<body>
<div class="yis-skeleton" data-manual-remove="true">
<!--你的内容-->
<p class="content">...</p>
</div>
</body>
然后，你需要在页面的 index.js 中通过 PageCore 提供的 closeSkeleton api 来手动关闭骨架屏。
import { PageCore } from '@qnpm/yis';
import { Page } from '@qnpm/yis/components';
import styles from './main.css';
class Home extends PageCore {
didLoad() {
// ...
// 开始请求业务数据
// ...
}
someFun() {
// ...
// 业务数据请求回来之后
// ...
this.closeSkeleton();
}
render() {
// ...
// 渲染页面
// ...
}
}
export default Home;
以上就是页面骨架屏的使用方法。接下来我们将介绍页面的生命周期。