骨架屏

为什么要在页面中使用骨架屏

提前加载页面的骨架屏，可以减少用户的白屏等待时长。百度智能小程序提供了骨架屏机制（小程序框架骨架屏比业务中创建的骨架屏加载时机更靠前，推荐使用小程序提供的框架骨架屏），使用这一机制，可以给用户带来更好的用户体验。下面将介绍如何使用骨架屏这一机制。

未使用骨架屏用户体验使用骨架屏用户体验
骨架屏 - 图1骨架屏 - 图2

骨架屏优化方案示例

  1. 在工程项目根目录新建 skeleton 文件夹（ skeleton 为指定命名，不可修改；page 文件夹中的文件名可自定义），目录如下所示：
  1.   skeleton
  2.   |--- page
  3.   |    |--- index.tpl  // 骨架屏模板代码文件
  4.   |    |--- list.tpl  // 骨架屏模板代码文件
  5.   |--- config.json  // page和骨架屏的映射关系文件
  1. 使用标准 HTML 与 CSS，编写骨架屏模板文件。如 index.tpl 骨架屏代码如下图：
    代码示例
  1. <div class="home-holder">
  2.     <div class="home-holder-content">
  3.         <div class="home-holder-content-header">
  4.             <div class="jz-holder-imgContent-img"></div>
  5.             <div class="home-holder-content-header-des jz-holder-imgContent-des c-gap-left-small">
  6.                 <div class="home-holder-content-header-des-one jz-holder-des-item"></div>
  7.                 <div class="home-holder-content-header-des-two jz-holder-des-item c-gap-top-large"></div>
  8.                 <div class="jz-holder-slider"></div>
  9.             </div>
  10.         </div>
  11.         <div class="home-holder-content-body jz-holder-block-content"></div>
  12.     </div>
  13. </div>
  14. <style>
  15. .home-holder {
  16.     padding: 0 17px;
  17.     background-color: #fff;
  18. }
  19. .home-holder-content-header {
  20.      margin-top: 40px;
  21. }
  22. .home-holder-content-header-des-two {
  23.     width: 75%;
  24. }
  25. .home-holder-content-body {
  26.     margin-top: 40px;
  27.     margin-bottom: 40px;
  28. }
  29. .jz-holder-imgContent-img,
  30. .jz-holder-des-item {
  31.     background-color: #F4F2F2;
  32. }
  33. .jz-holder-imgContent-des {
  34.     display: inline-block;
  35.     vertical-align: middle;
  36.     width: 75%;
  37. }
  38. .c-gap-left-small {
  39.     margin-left: 5px;
  40. }
  41. .c-gap-top-large {
  42.     margin-top: .15rem;
  43. }
  44. .jz-holder-block-content {
  45.     width: 100%;
  46.     height: 214px;
  47. }
  48. .jz-holder-slider {
  49.     position: absolute;
  50.     top: 0;
  51.     left: 0%;
  52.     opacity: 0.4;
  53.     width: 104px;
  54.     height: 100%;
  55.     background: -webkit-linear-gradient(left, #F4F2F2, #FFF 50%, #F4F2F2); /* Safari 5.1 - 6.0 */
  56.     background: -o-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Opera 11.1 - 12.0 */
  57.     background: -moz-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Firefox 3.6 - 15 */
  58.     background: linear-gradient(to right,#fff, #FFF 50%, #fff); /* 标准的语法（必须放在最后） */
  59.     animation: slide 1.5s infinite;
  60.     -webkit-animation: slide 1.5s infinite;
  61. }
  62. @-webkit-keyframes slide {
  63.     0% {
  64.         left: -141px;
  65.         top: 0;
  66.     }
  67.     100% {
  68.         left: 100%;
  69.         top: 0;
  70.     }
  71. }
  72. @keyframes slide {
  73.     0% {
  74.         left: -141px;
  75.         top: 0;
  76.     }
  77.     100% {
  78.         left: 100%;
  79.         top: 0;
  80.     }
  81. }
  82. </style>
  1. 配置config.json文件，页面和骨架屏可以是多对一的映射关系，可配置多个页面对应同一个骨架屏模板，也可以为每个页面配置一个骨架屏模板。
    代码示例
  1. {
  2.     "pages/home/index": "skeleton/page/index",
  3.     "pages/list/index": "skeleton/page/index"
  4. }
  1. 在首屏页面渲染完毕后，调用this.removeSkeleton()方法移除骨架屏。在调用removeSkeleton方法的时候，需要有兼容逻辑（this.removeSkeleton && this.removeSkeleton()）。
    代码示例
  1. {
  2.    onLoad() {
  3.        // 请求首屏数据，并渲染首屏
  4.        getData().then(() => {
  5.            this.setData({
  6.                pageModule
  7.            }, () => {
  8.                this.removeSkeleton && this.removeSkeleton();
  9.            });
  10.        });
  11.    }
  12. }

Bug&Tip:
1. 开发者工具需要 2.15 及其上版本，基础库需要 3.70.53 及其以上版本；
2. 若无法预览或打开 tpl 文件，请升级开发者工具至 3.3.0 及以上。