微信小程序骨架屏

骨架屏幕可以理解为页面的空白版本和加载数据之前的简单关键渲染路径。可以看到，在页面完全渲染之前，用户会看到一个样式简单的骨架屏幕页面，描绘了当前页面的大致框架，然后骨架屏幕中所有的占位部分就会被实际资源完全替代。在这个过程中，用户会感觉到内容正在逐渐被加载并呈现出来，减少了用户的焦虑，使加载过程主观上变得流畅，如下图所示：

微信小程序的框架屏主要分为两种方案。我们来谈谈这两个方案。

1.为需要使用框架屏幕的每个页面定制一组静态页面。

这种方法有明显的缺点，需要针对每个页面单独定制。如果修改版面，需要同时修改两页，增加了维护成本。但是，这种方法特别适合长列表。它只需要对用户可见，可以在一定程度上提高响应速度。

2.使用工具渲染页面

获取指定的DOM节点和对应的样式，生成灰色块覆盖原有的样式结构，从而实现骨架屏。这种方法易于使用和维护。个人认为不适合长列表页面。https://github.com/jayZOU/skeleton's骨架屏组件轻巧方便快捷，内置教程，强烈推荐。使用以下第二种方法制作微信小程序的骨架屏幕。

安装组件：

npm安装-保存迷你程序-框架

引入skeleton自定义组件

{ '使用组件' 3360 { '框架' : './小程序_ NPM/小程序-骨架' }小程序中NPM的配置和使用：

在微信开发者工具中，设置-项目设置-勾选使用npm模块。在微信开发者工具Tools-Build npm中，构建完成后会生成miniprogram_npm文件夹，项目中用到的所有npm包都在这里。根据页面的使用路径，从miniprogram_npm导入所需的包。

使用骨架屏组件

1.在wxml页面需要用到的地方使用，如下：

!-介绍骨架屏幕模板-骨架WX:IF=' { {显示骨架} } '/骨架！- index.wxml -！-将skeleton添加到页面根节点类以获取当前页面大小，否则将默认使用屏幕大小-view class=' container skeleton ' view class=' user info ' block！- skeleton-radius绘制圆形-image class=' user info-avatar skeleton-radius ' src=' { { user info . avatar URL } } ' mode=' cover '/image！-skeleton-rect draw rectangle-text class=' user info-昵称skeleton-rect ' { user info .昵称} }/text/block/view style=' margin 3360 20px 0 ' view wx : for=' { { list } } ' class=' lists '图标类型=' success ' size=' 20 ' class=' list skeleton-radius '/text class=' skeleton-rect ' { item } }/text/view/view class=' user座右铭' text class=' user-座右铭skeleton skeletonaaaaaaaaaaaa/view/view

2.在js页面需要用到的地方使用，如下：

//index . js//初始化默认数据，默认数据用于展开页面结构，这样骨架屏幕就可以得到整个页面结构页面({data3360 {Motto3360' hello world '，useinfo : { avatarurl 3360 ' https://wx . qlogo.cn/MMO pen/VI _ 32/syiaiba 5 faerayboqcwdsx4hsjfkiawSetTimeout(()={//3S以后，隐藏骨架屏幕那. setdata({ show skeleton : false })}，3000)})