阅读 566

自动生成跨多端骨架屏

概念以及背景

Skeleton Screen,中文称之为骨架屏。表示在页面数据没有加载完成之前,用一些简单的图形描绘页面内容的大致布局,让用户感知页面正在加载;当数据加载完成后,用真实的数据渲染页面,把它替换掉。

在骨架屏诞生之前,业界大多数都是用菊花图之类的loading效果去做数据等待期的加载效果展示,但是这种效果对于用户体验却未必优秀,当用户聚焦于菊花图时,就像学生盯着下课前的5分钟,感知上时间会变慢,很容易滋生焦躁情绪,如果是弱网情况下可能用户直接就关闭页面了。

如果我们能在页面真实内容呈现之前先把页面内容的轮廓展示出来,然后再逐步展示真正的内容,这样既能给用户一种内容正在被加载即将呈现出来的期待,也能降低用户等待过程中的焦躁情绪,同时还能使页面加载的过程变得更加丝滑,感官上会更加自然流畅,而骨架屏就是为此而生。

如何生成骨架屏

要生成骨架屏,我们可以怎么做呢?
答案一:手写骨架屏代码,这种方案可能大家的反应是下面这样

答案二:自动生成?

自动生成骨架屏看起来似乎很难做到,主要困难点在于:

  • 页面真实内容结构难以自动获取

  • 如果拿到了页面结构,如何根据页面结构生成骨架屏的节点和样式

这两个问题目前采用一些前端技术其实也可以解决,我写了一个webpack插件skeleton-webpack-plugin可以实现在你本地运行dev server预览页面的时候生成该页面骨架屏的html与css,总体思路如下图所示:

但是到这里我们只是生成了在h5环境可以使用的骨架屏,回到我们的主题,我们想要的是跨多端哦,也就是说iOS,android,小程序等等我全都要,这个又该如何实现呢?

skeleton-weex-plugin

目前我们团队内部在weex的基础上开发了一套跨端开发框架,借助这套框架我们可以基本实现在iOS,android,小程序等多端实现一套代码复用,但是目前尚未开源,所以我先借用weex作为跨多端的技术实现以及vue作为dsl,如果你的团队也是采用类weex技术方案,那么你可以直接复用我的代码。

对于生成多端骨架屏的问题,我的解决方案是skeleton-weex-plugin,它是skeleton-webpack-plugin的一个插件。
如前所述,skeleton-webpack-plugin可以生成对应页面骨架屏的html与css,那么进一步思考,如果我们可以将这份html与css转化成weex的代码,这样就可以实现在一套骨架屏在多端都可以呈现。skeleton-weex-plugin的实现思路如下图所示:

它会在你对应的页面目录下生成一个skeleton.vue的文件,如下所示:

<template>
<div v-if="isShow" class="skeleton-wrapper">
<div>skeleton content</div>
</div>
</template>
<script>
export default {
  name: "Skeleton",
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style scoped>
skeleton style content
</style>
复制代码

这样你就可以把它当成组件来引用,并控制它的显示和隐藏。可以来看下小桔养车首页转化出来的一个效果图:


可以说相似度还是比较高的。这样似乎可以坐下来喝杯红酒了:

但是这样就完美了么?

后续的优化之路

虽然我们初步达成了预期的实现目标,但是还存在几个比较重要的问题。

  • h5页面还是会有白屏时间,因为这种方式在js bundle加载完成前还是展示的空白页。

    这个问题的解决思路是你可以将骨架屏的html与css直接打到静态的页面模版html上,然后在js bundle加载完成后删除该节点

  • 引入的骨架屏组件会导致js bundle体积增大。

    目前我在生成weex代码过程中已经做了很多的精简工作,比如只生成在viewport可见区域内元素的骨架屏,删除一些不必要的样式等,后续也会看看是否还有可以继续精简的代码。

  • native端渲染时在页面 js bundle加载完成前页面也会是白屏。

    这个问题的解决思路是可以用骨架屏的预览页截屏生成一张图片,然后native端在js bundle加载完成前展示这张图片即可填充白屏时间。

所以,我们还能也必须可以做的更好

这里是利用weex实现了跨多端的诉求,但是如果要拓展到其他技术栈其实本质思想也是一样,只需要将骨架屏的html与css抽象语法树转化成对应技术栈的实现即可,即使生成纯native的代码也并非不能做到,欢迎大家去贡献插件。

相关代码

如果喜欢请用star砸我吧。

关注下面的标签,发现更多相似文章
评论