小程序如何构建骨架屏


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 相关文章推荐
node.js中的buffer.write方法使用说明
Dec 10 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JavaScript获取当前cpu使用率的方法
Dec 15 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
js实现网页定位导航功能
Mar 07 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
新手简单了解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
快速配置PHPMyAdmin方法
2008/06/05 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
xss文件页面内容读取(解决)
2010/11/28 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
Python写入数据到MP3文件中的方法
2015/07/10 Python
基于python时间处理方法(详解)
2017/08/14 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
香港礼品网站:GiftU eshop
2017/09/01 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
北京华建集团SQL面试题
2014/06/03 面试题
国际贸易专业推荐信
2013/11/15 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
捐资助学倡议书
2014/04/15 职场文书
文明工地标语
2014/06/16 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年工商所工作总结
2015/05/21 职场文书
高一作文之暖冬
2019/11/09 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
Python循环之while无限迭代
2022/04/30 Python