小程序如何构建骨架屏


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 相关文章推荐
jQuery function的正确书写方法
Aug 02 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP的中问验证码
2006/11/25 PHP
初级的用php写的采集程序
2007/03/16 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
在NodeJS中启用ECMAScript 6小结(windos以及Linux)
2014/07/15 NodeJs
JavaScript的原型继承详解
2015/02/15 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
jQuery+CSS3实现点赞功能
2017/03/13 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
大学生个人自我鉴定
2013/12/03 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
运动会邀请函范文
2014/01/31 职场文书
生产厂长岗位职责
2014/02/21 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
小孩不笨观后感
2015/06/03 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js