微信小程序 骨架屏——改善用户体验

微信小程序 骨架屏——改善用户体验

官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html

骨架屏是在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容

运行环境

下载并安装 1.03.2006032 或 1.04.2006032 以上版本的开发者工具

使用方法

1、想为哪个页面添加骨架屏，就预览哪个页面（如下图,为pages\index页面添加骨架屏）
2、在模拟器的下方右侧有三个点，点击生成骨架屏

3、弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 index.skeleton.wxml 和 index.skeleton.wxss 两个文件，
分别为骨架屏代码的模板和样式。

生成模板和样式后就可以引入了
4、 在pages/index/index.wxml 引入模板，复制index.skeleton.wxml中生成的默认代码就可以，如下所示：
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}"/>
<view wx:else>
  原本wxml内容
</view>

5、pages/index/index.wxss 中引入样式，复制index.skeleton.wxss中生成的默认代码就可以，如下所示：
@import "./index.skeleton.wxss";

6、pages/index/index.js  在data中设置loading为true,表示最开始渲染的为骨架屏，当接口请求成功（当前页面所需内容请求完成）后
设置loading为false,则进行页面渲染
Page({
  data:{
    loading:true
  }
})