小程序如何构建骨架屏


Posted in Javascript onMay 29, 2019

首屏

一般情况下,在首屏数据未拿到之前,为了提升用户的体验,会在页面上展示一个loading的图层,类似下面这个

小程序如何构建骨架屏

其中除了菊花图以外网上还流传这各种各样的loading动画,在PC端上几乎要统一江湖了,不过最近在移动端上面看到不同于菊花图的加载方式,就是这篇文章需要分享的Skeleton Screen,中文称之为"骨架屏"

概念

A skeleton screen is essentially a blank version of a page into which information is gradually loaded.

在H5中,骨架屏其实已经不是什么新奇的概念了,网上也有各种方案生成对应的骨架屏,包括我们经常使用的知乎、饿了么、美团等APP都有应用骨架屏这个概念

小程序如何构建骨架屏

方案

先从H5生成骨架屏方案开始说起,总的来说H5生成骨架屏的方案有2种

1.完全靠手写HTML和CSS方式给每个页面定制一套骨架屏

2.利用预渲染的方式生成静态骨架屏

第一套方案,毫无疑问是最简单最直白的方式,缺点也很明显,假如页面布局有修改的话,那么除了修改业务代码之外还需要额外修改骨架屏,增加了维护的成本。

第二套方案,一定程度上改善了第一套方案带来的维护成本增加的缺点,主要还是使用工具预渲染页面,获取到DOM节点和样式,保留页面结构,覆盖样式,生成灰色块盖在原有文本、图片或者是canvas等节点上面,最后将生成的HTML和CSS打包出来,就是一个带有骨架屏的页面。最后再利用webpack工具将生成的骨架屏插入到HTML里面,详细的话可以看看饿了么的分享,这里就不多描述了。

调研了下H5生成骨架屏的方案,对于小程序生成骨架屏的方案也有了一个大致的想法,主要有2个难点需要实现

1.预渲染

2.获取节点

预渲染

再说回饿了么提供的骨架屏的方案,使用 puppeteer 渲染页面(或者使用服务端渲染,vue或者react都有提供相应的方案),拿到DOM节点和样式,这里有一点需要注意的是,页面的渲染是需要初始化的数据,数据的来源可以是初始化的data(vue)或者mock数据,当然小程序是无法直接使用 puppeteer 来做预渲染(有另外的方案可以实现),需要利用小程序初始化的 data + template 渲染之后得到一个初始化结构作为骨架屏的结构

//index.js
Page({
data: {
motto: 'Hello World',
userInfo: {
avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
nickName: 'jay'
},
lists: [
'aslkdnoakjbsnfkajbfk',
'qwrwfhbfdvndgndghndeghsdfh',
'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
],
showSkeleton: true
},
onLoad: function () {
const that = this;
setTimeout(() => {
that.setData({
showSkeleton: false
})
}, 3000)
}
})
//index.wxml
<view class="container">
<view class="userinfo">
<block>
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view wx:for="{{lists}}" class="lists">
<icon type="success" size="20" class="list skeleton-radius"/>
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
<view style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>

有了上面的 data + template 之后,就有了一个初始化的页面结构,接下来就需要拿到节点信息

节点

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

<view class="container">
<view class="userinfo">
<block>
<image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
mode="cover"></image>
<text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
</block>
</view>
<view style="margin: 20px 0">
<view wx:for="{{lists}}" class="lists">
<icon type="success" size="20" class="list skeleton-radius"/>
<text class="skeleton-rect">{{item}}</text>
</view>
</view>
<view class="usermotto">
<text class="user-motto skeleton-rect">{{motto}}</text>
</view>
<view style="margin-top: 200px;">
aaaaaaaaaaa
</view>
</view>

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

结果

小程序如何构建骨架屏

具体的调用方式和源码,请看 github ,最后求start

总结

上文有说到小程序也可以使用 page-skeleton-webpack-plugin 方式一样生成骨架屏,最重要的一点就是需要将小程序跑在chrome上面,后面的流程就一样了,至于怎么将小程序跑在chrome上面呢?可以利用 wept ,缺点就是目前作者已经停止维护这个工具了,不支持新版小程序的API。

说回来我这个生成骨架屏的方案,其实跟 page-skeleton-webpack-plugin 有点相似,不同的是,page-skeleton-webpack-plugin 采用离线渲染的方式生成静态骨架屏插入路由中,而我采用运行时先渲染页面默认结构,然后根据默认结构再绘制骨架屏。从性能角度出发确实不如 page-skeleton-webpack-plugin,但是也差不了多少了,主要还是小程序并没有提供类似服务端渲染的方案。目前从使用上来讲,还是有点小麻烦,需要默认数据撑开页面结构,需要给相应的节点添加class,后面有时间再研究下有没有更好的方案吧~~~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
setTimeout自动触发一个js的方法
Jan 15 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
zTree树形插件异步加载方法详解
Jun 14 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
新手简单了解vue
May 29 #Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 #Javascript
基于JS实现一个随机生成验证码功能
May 29 #Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 #Javascript
深入了解响应式React Native Echarts组件
May 29 #Javascript
node将geojson转shp返回给前端的实现方法
May 29 #Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
JS实现移动端按首字母检索城市列表附源码下载
2017/07/05 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
Python多线程实例教程
2014/09/06 Python
如何利用Fabric自动化你的任务
2016/10/20 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
采购部岗位职责
2013/11/24 职场文书
文言文形式的学生求职信
2013/12/03 职场文书
天网工程实施方案
2014/03/26 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android