小程序如何构建骨架屏


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 相关文章推荐
获取当前网页document.url location.href区别总结
May 10 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
web前端开发也需要日志
Dec 09 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
Node.js+ELK日志规范的实现
May 23 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 iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
Javascript Global对象
2009/08/13 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python 除法保留两位小数点的方法
2018/07/16 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
美国宠物商店:Wag.com
2016/10/25 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
后勤部经理岗位职责
2014/02/23 职场文书
就业意向书
2014/07/29 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
个人作风建设总结
2014/10/23 职场文书
初中政治教师教学反思
2016/02/23 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
用Python可视化新冠疫情数据
2022/01/18 Python