小程序动态class_小程序骨架屏探索

小程序骨架屏探索

概念

名词：Skeleton Screen，中文称之为"骨架屏"

现状

骨架屏在诸多APP和相应H5页面已应用广泛，网上也有各种方案生成对应的骨架屏，常见的客户端有知乎、饿了么、美团等APP都有应用骨架屏这个概念。

背景

美团外卖

小程序性能优化

实现方案

1.创建模板

skeleton

skeleton.js
skeleton.json
skeleton.wxml
skeleton.wxss

使用关键API:

wx.createSelectorQuery()：返回一个SelectorQuery对象实例。

selectorQuery.select(selector)： 在当前页面下选择第一个匹配选择器selector的节点。

selectorQuery.selectAll(selector)： 在当前页面下选择匹配选择器selector的节点，与上面的方法不同的是，它选择所有匹配选择器的节点。

注意点：

selector类似于CSS的选择器，但仅支持下列语法。

ID选择器：#the-id

class选择器（可以连续指定多个）：.a-class.another-class

子元素选择器：.the-parent > .the-child

后代选择器：.the-ancestor .the-descendant

跨自定义组件的后代选择器：.the-ancestor >>> .the-descendant

多选择器的并集：#a-node, .some-other-nodes

2.预渲染

利用小程序初始化的 data + template 渲染之后得到一个初始化结构作为骨架屏的结构。

有了上面的 data + template 之后，就有了一个初始化的页面结构。

3.获取节点

接下来就需要拿到节点信息；

小程序基础库1.4.0之后小程序基础库提供了一组新的API，可用于获取节点信息，具体API包含wx.createSelectorQuery()等。跟H5方式一样，根据class或者id获取节点信息，不同的是只能获取到当前的节点信息，无法获取到其父或者子节点信息，所以需要手动给需要渲染骨架屏的节点添加相应的class或者id。

本项目DEMO约定2个特殊的class作为获取节点信息的标记skeleton-rect和skeleton-radius，在页面中获取相应的top、left、width、height进行骨架屏的绘制;

核心的代码是组件的.js和.wxml文件，使用了wx.createSelectorQuery().selectAll 非常巧妙地选择到了所有要渲染的矩形和圆形节点，在页面中，使用循环，遍历出所有的节点。

4.渲染真实数据，隐藏骨架屏

实现核心

核心的代码是组件的.js和.wxml文件，使用了wx.createSelectorQuery().selectAll 非常巧妙地选择到了所有要渲染的矩形和圆形节点，在页面中，使用循环，遍历出所有的节点。

原生小程序自定义模板应用骨架屏

使用规则同上，合理添加skeleton-rect和skeleton-radius即可；

WePY框架应用骨架屏

在config中配置skeleton组件，其他部分和原生写法相似；

小程序骨架屏优点

(1).尽快渲染出首屏，减少白屏时间;

(2).用户体验;

(3).实现容易，易上手;

小程序骨架屏缺点

(1).高度不定的元素：

如图片的mode缩放widthFix模式，宽度不变，高度自动变化，保持原图宽高比不变；

解决方案：找合适的图片比例/动态调整mode；

(2).不太适合过于复杂的应用，如层级过于复杂，含多种定位；

建议

做小程序开发的同学，可以在自己负责的小程序上，新建分支试一下。

思考

插件方式应用骨架屏，后续可以尝试调研&应用；

参考文献：

https://github.com/ElemeFE/page-skeleton-webpack-plugin

https://github.com/GoogleChrome/puppeteer

https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html