骨架屏

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

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

骨架屏优化方案示例

1. 在工程项目根目录新建 skeleton 文件夹（ skeleton 为指定命名，不可修改；page 文件夹中的文件名可自定义），目录如下所示：

     skeleton
     |--- page
     |    |--- index.tpl  // 骨架屏模板代码文件
     |    |--- list.tpl  // 骨架屏模板代码文件
     |--- config.json  // page和骨架屏的映射关系文件

2. 使用标准 HTML 与 CSS，编写骨架屏模板文件。如 index.tpl 骨架屏代码如下图：代码示例

   <div class="home-holder">
       <div class="home-holder-content">
           <div class="home-holder-content-header">
               <div class="jz-holder-imgContent-img"></div>
               <div class="home-holder-content-header-des jz-holder-imgContent-des c-gap-left-small">
                   <div class="home-holder-content-header-des-one jz-holder-des-item"></div>
                   <div class="home-holder-content-header-des-two jz-holder-des-item c-gap-top-large"></div>
                   <div class="jz-holder-slider"></div>
               </div>
           </div>
           <div class="home-holder-content-body jz-holder-block-content"></div>
       </div>
   </div>
   <style>
   .home-holder {
       padding: 0 17px;
       background-color: #fff;
   }
   .home-holder-content-header {
        margin-top: 40px;
   }
   .home-holder-content-header-des-two {
       width: 75%;
   }
   .home-holder-content-body {
       margin-top: 40px;
       margin-bottom: 40px;
   }
   .jz-holder-imgContent-img,
   .jz-holder-des-item {
       background-color: #F4F2F2;
   }
   .jz-holder-imgContent-des {
       display: inline-block;
       vertical-align: middle;
       width: 75%;
   }
   .c-gap-left-small {
       margin-left: 5px;
   }
   .c-gap-top-large {
       margin-top: .15rem;
   }
   .jz-holder-block-content {
       width: 100%;
       height: 214px;
   }
   .jz-holder-slider {
       position: absolute;
       top: 0;
       left: 0%;
       opacity: 0.4;
       width: 104px;
       height: 100%;
       background: -webkit-linear-gradient(left, #F4F2F2, #FFF 50%, #F4F2F2); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right,#fff, #FFF 50%, #fff); /* 标准的语法（必须放在最后） */
       animation: slide 1.5s infinite;
       -webkit-animation: slide 1.5s infinite;
   }
   @-webkit-keyframes slide {
       0% {
           left: -141px;
           top: 0;
       }
       100% {
           left: 100%;
           top: 0;
       }
   }
   @keyframes slide {
       0% {
           left: -141px;
           top: 0;
       }
       100% {
           left: 100%;
           top: 0;
       }
   }
   </style>
   

3. 配置 config.json 文件，页面和骨架屏可以是多对一的映射关系，可配置多个页面对应同一个骨架屏模板，也可以为每个页面配置一个骨架屏模板。
   代码示例

   {
       "pages/home/index": "skeleton/page/index",
       "pages/list/index": "skeleton/page/index"
   }
   

4. 在首屏页面渲染完毕后，调用 this.removeSkeleton() 方法移除骨架屏。在调用 removeSkeleton 方法的时候，需要有兼容逻辑（ this.removeSkeleton && this.removeSkeleton() ）。代码示例

   {
      onLoad() {
          // 请求首屏数据，并渲染首屏
          getData().then(() => {
              this.setData({
                  pageModule
              }, () => {
                  this.removeSkeleton && this.removeSkeleton();
              });
          });
      }
   }
   

Bug&Tip:

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