小程序如何构建骨架屏


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 相关文章推荐
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
jquery插件validation实现验证身份证号等
Jun 04 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 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根据IP地址获取所在城市具体实现
2013/11/27 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JavaScript While 循环基础教程
2007/04/05 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
jQuery中contents()方法用法实例
2015/01/08 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
2015/01/09 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
pandas的唯一值、值计数以及成员资格的示例
2018/07/25 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python 实现多线程下载视频的代码
2019/11/15 Python
关于python中的xpath解析定位
2020/03/06 Python
python实现mean-shift聚类算法
2020/06/10 Python
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
中学家长会邀请函
2014/02/03 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
物理教育专业求职信
2014/06/25 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
2016入党心得体会范文
2016/01/06 职场文书
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL