小程序如何构建骨架屏

最近，在移动端上出现了一种不同于传统菊花图的加载方式，引起了广泛关注。这种新的加载方式被称为Skeleton Screen，中文称之为“骨架屏”。狼蚁网站SEO优化也与它息息相关，让我们一起来了解一下。

在首屏数据尚未加载完成时，为了提高用户体验，许多网站和APP都会展示一个loading图层。传统的菊花图已经逐渐被多样化的loading动画所取代。而在移动端，骨架屏作为一种新型的加载方式，正逐渐受到重视。

所谓骨架屏，其实就是一个页面的空白版本，随着信息的逐渐加载而呈现出完整的页面内容。这一概念在H5中已经逐渐被广泛应用，许多知名的APP如知乎、饿了么、美团等都已经开始采用骨架屏的设计。

对于如何在H5中生成骨架屏，目前主要有两种方案。第一种方案是完全依靠手写HTML和CSS的方式为每个页面定制一套骨架屏。这种方式虽然简单直观，但如果页面布局有修改，除了修改业务代码之外还需要额外修改骨架屏，这无疑增加了维护的成本。

骨架屏作为一种新型的加载方式，在提高用户体验方面有着显著的优势。它不仅可以减少用户的等待时间，还可以提供更加流畅的使用体验。随着技术的不断发展，相信骨架屏将在未来的移动端开发中扮演越来越重要的角色。对于狼蚁网站SEO优化来说，合理利用骨架屏也能提升网站的加载速度和用户体验，进一步推动网站的优化和发展。经过调研，我对于H5生成骨架屏的方案有了更深入的了解，特别是小程序生成骨架屏的方案，其中存在两个主要难点：预渲染和获取节点。

一、预渲染

针对预渲染的问题，我们可以借鉴饿了么提供的骨架屏方案。通过使用puppeteer（或服务端渲染）来渲染页面，我们可以获取到DOM节点和样式。在此过程中，值得注意的是，页面渲染需要依赖初始化的数据。这些数据可以来源于初始化的data（如vue），也可以是mock数据。由于小程序无法直接使用puppeteer进行预渲染（尽管有解决方案可以实现），我们需要利用小程序的初始data和template进行渲染，得到一个初始化结构作为骨架屏的结构。

以下是一个简单的示例代码（index.js）：

```javascript

Page({

data: {

// 初始化数据

motto: 'Hello World',

userInfo: {

avatarUrl: '链接地址',

nickName: 'jay'

},

lists: ['列表数据'],

showSkeleton: true // 是否显示骨架屏

},

onLoad: function () {

const that = this;

setTimeout(() => { // 延迟操作后隐藏骨架屏

that.setData({

showSkeleton: false

})

}, 3000)

}

})

```

二、获取节点信息

在有了初始化的页面结构后，我们需要获取节点信息。自小程序基础库1.4.0版本起，提供了一组新的API用于获取节点信息。这些API可以帮助我们轻松地获取到所需的节点数据。一旦我们获取到这些节点信息，就可以进行后续的操作，如生成骨架屏等。对于骨架屏的生成来说，获取节点信息是至关重要的步骤之一。通过获取节点信息，我们可以准确地知道哪些部分需要预渲染，哪些部分可以动态加载。这对于提高用户体验和页面加载速度具有重要意义。在实际应用中，我们可以根据具体需求使用这些API来获取所需的节点信息，然后结合预渲染技术实现骨架屏的生成。这将使得我们的页面在加载时更加流畅，提高用户体验。通过预渲染和获取节点信息这两个步骤，我们可以有效地实现小程序骨架屏的生成。这将为小程序的开发带来更好的用户体验和性能优化。随着技术的不断进步，我们期待更多创新的解决方案来解决类似的问题。让我们共同期待小程序开发领域的更多创新和突破吧！同时也要注意这部分涉及到的技术细节较多，在实际开发中需要仔细处理以确保稳定性和性能。构建小程序骨架屏：理解并优化节点信息获取

在小程序中，我们常常需要展示一个页面的骨架屏来提升用户体验，特别是在页面内容还未完全加载时。获取节点信息是构建骨架屏的关键步骤之一。本文将介绍一种基于H5方式获取节点信息的方法，并对其进行优化。

在小程序中，我们可以通过class或id来获取节点信息。但与H5不同的是，小程序只能获取到当前节点的信息，无法获取其父或子节点的信息。我们需要手动为需要渲染骨架屏的节点添加相应的class或id。

下面是一个简单的示例代码，展示了如何在小程序中使用class获取节点信息：

```html

{{userInfo.nickName}}

{{item}}

{{motto}}

aaaaaaaaaaa

```

在这个示例中，我们使用了两个特殊的class（skeleton-rect和skeleton-radius）作为获取节点信息的标记。通过获取这些节点的位置、大小等信息，我们可以进行骨架屏的绘制。

对于小程序的骨架屏生成，有一点需要注意的是，需要将小程序运行在chrome上。这样，我们可以利用chrome的开发者工具来获取节点信息。虽然有一些工具可以帮助我们将小程序运行在chrome上，但目前有些工具已经停止维护，不支持新版小程序的API。

本文介绍的生成骨架屏的方案与page-skeleton-webpack-plugin有些相似，但有所不同的是，我们在运行时先渲染页面的默认结构，然后根据默认结构绘制骨架屏。从性能角度来看，这种方法可能不如page-skeleton-webpack-plugin，但由于小程序没有类似服务端渲染的方案，所以这是一种可行的解决方案。

目前，该方案在使用上还有一些小麻烦，需要默认数据撑开页面结构，并给相应的节点添加class。后续我们可以进一步研究更好的方案。

构建小程序骨架屏需要深入理解节点信息的获取和处理。通过优化节点信息的获取方式，我们可以提高骨架屏的生成效率，提升用户体验。希望本文的内容能对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

以上内容即为本文的全部内容，如有任何疑问或建议，欢迎交流。