骨架屏：提升小程序启动体验的利器

前端

2024-02-02 13:16:27

骨架屏：提升小程序启动体验的利器

前言

随着移动互联网时代的飞速发展，用户体验变得至关重要。小程序作为一种轻量级应用，其启动速度和体验直接影响着用户的留存和满意度。骨架屏 ，一种模拟真实界面加载过程的占位符，正成为提升小程序启动体验的利器。

骨架屏的优势

骨架屏的优势显而易见：

视觉反馈更快： 骨架屏在小程序启动时立即出现，为用户提供即时的视觉反馈，缓解因等待造成的焦虑感。
提升用户体验： 骨架屏模拟真实界面，让用户对小程序的布局和功能一目了然，增强用户对应用程序的熟悉度和掌控感。
优化加载速度： 骨架屏通过加载占位符替代实际内容，减少了小程序启动时所需加载的数据量，从而优化了加载速度。

抖音小程序的骨架屏能力

值得一提的是，抖音小程序框架最近提供了自动生成骨架屏 的能力，这让开发人员能够轻松集成骨架屏功能，从而提升小程序的启动体验。

抖音小程序骨架屏能力的特点：

一键生成： 开发者只需简单配置，即可自动生成骨架屏，大大节省了开发时间。
高效迭代： 骨架屏的修改和更新可以即时生效，提高了开发效率和迭代速度。
出现时机更早： 抖音小程序骨架屏会在小程序启动时立即出现，为用户提供更及时的视觉反馈。

使用骨架屏提升小程序启动体验

要使用骨架屏提升小程序启动体验，开发人员可以遵循以下步骤：

配置骨架屏： 在小程序框架中配置骨架屏参数，包括显示时机、布局形状和颜色等。
生成骨架屏： 一键生成骨架屏，并预览效果。
集成骨架屏： 将骨架屏集成到小程序中，并在合适时机显示。

代码示例

// 配置骨架屏
wx.createSkeletonScreen({
  containerId: 'skeleton-container',
  skeletonRows: [
    {
      type: 'rect',
      width: '100%',
      height: '100px',
    },
    {
      type: 'rect',
      width: '80%',
      height: '20px',
      marginTop: '10px',
    },
    {
      type: 'rect',
      width: '90%',
      height: '20px',
      marginTop: '10px',
    },
  ],
});

// 生成骨架屏
wx.startSkeletonScreen({
  containerId: 'skeleton-container',
});

// 隐藏骨架屏
wx.hideSkeletonScreen({
  containerId: 'skeleton-container',
});