加快骨架屏构建速度：一站式自如APP页面骨架屏自动化生成方案

一、背景介绍

随着业务需求不断变更，APP每新增一个新的页面，设计师都需要重新设计相应的骨架屏页面，且在后续迭代中存在着大量的维护和沟通成本，而研发人员也需要相应的跟着设计图来维护一套骨架屏的代码。这对产品迭代效率造成了极大的影响，同时由于在代码中维护了一套骨架屏的代码，这也导致了骨架屏样式和APP样式的割裂，两套代码的维护带来了更大的成本。因此，实现骨架屏的自动化生成对于产品开发而言至关重要。

二、需求分析

自如APP拥有众多页面，每个页面都有其独特的骨架屏需求。因此，骨架屏生成工具需要具备以下能力：

• 支持多种骨架屏样式的生成，如矩形、圆形、线性渐变等。
• 支持骨架屏内容的自定义，如文字、图片等。
• 支持骨架屏动画效果的生成，如渐入、渐出等。
• 支持骨架屏与APP样式的一致性，即骨架屏的样式与APP的实际样式保持一致。

三、解决方案

为了满足上述需求，自如APP前端团队采用了一系列工程化的手段，实现骨架屏的自动化生成。

1. 搭建骨架屏生成平台

自如APP前端团队搭建了一个骨架屏生成平台，该平台主要包括以下功能：

• 骨架屏样式库：提供多种骨架屏样式供选择，如矩形、圆形、线性渐变等。
• 骨架屏内容库：提供多种骨架屏内容供选择，如文字、图片等。
• 骨架屏动画库：提供多种骨架屏动画效果供选择，如渐入、渐出等。
• 骨架屏生成器：根据用户选择的样式、内容和动画效果，自动生成骨架屏代码。

2. 骨架屏代码生成

骨架屏生成器根据用户选择的样式、内容和动画效果，生成骨架屏代码。骨架屏代码是一个JavaScript对象，其中包含了骨架屏的样式、内容和动画效果等信息。

3. 骨架屏渲染

骨架屏代码生成后，需要将其渲染到页面中。自如APP前端团队采用了一种新的骨架屏渲染方式，即在页面加载时，先渲染骨架屏，然后再加载真实数据。这样可以有效减少页面加载时间，提高用户体验。

四、效果评估

骨架屏自动化生成方案实施后，自如APP前端团队的开发效率得到了大幅提升。以前，设计师需要花费大量时间来设计骨架屏页面，研发人员也需要花费大量时间来维护骨架屏代码。现在，设计师只需要在骨架屏生成平台上选择相应的样式、内容和动画效果，即可生成骨架屏代码。研发人员只需将骨架屏代码添加到页面中，即可实现骨架屏的渲染。

同时，骨架屏自动化生成方案也改善了用户体验。以前，用户在打开APP页面时，需要等待较长时间才能看到页面内容。现在，用户在打开APP页面时，可以看到骨架屏，骨架屏会随着页面内容的加载而逐渐消失。这极大地缩短了用户等待时间，提高了用户体验。

五、结语

自如APP前端团队通过工程化的手段，实现骨架屏的自动化生成，取得了显著的效果。骨架屏自动化生成方案不仅提高了开发效率，改善了用户体验，而且降低了维护成本。这对于自如APP的前端开发工作具有重要意义。

希望这篇文章对您有所帮助，如果您有任何问题，请随时与我联系。