小程序如何构建骨架屏


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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
js中关于Blob对象的介绍与使用
Nov 29 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获取汉字的拼音(全部与首字母)
2013/06/27 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
javascript call方法使用说明
2010/01/11 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
python将一组数分成每3个一组的实例
2018/11/14 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
css3背景图片透明叠加属性cross-fade简介及用法实例
2013/01/08 HTML / CSS
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
劳动实践课感言
2014/02/01 职场文书
初中生自我评价
2014/02/01 职场文书
团委书记的竞聘演讲稿
2014/04/24 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Redis如何一键部署脚本
2021/04/12 Redis
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
如何利用Python实现一个论文降重工具
2021/07/09 Python
MySQL创建定时任务
2022/01/22 MySQL