向宇宙发送一枚小可爱

微信小程序打包后dist文件用工具生成的骨架屏与手动在components写vue在引入的区别，到底用谁呢？

用工具生成的骨架屏（必须用最好的，大家就用这个。）

特点：

• 1.完全静态的WXML结构。
• 2.纯CSS样式（灰色占位符）

作用：

• 1.只是"视觉占位符"
• 2.改善用户体验（让用户看到页面在加载）

优势：

• 1.纯静态-快速加载，零逻辑开销
• 2.自动分离-自动匹配页面结构
• 3.样式分离-.skeleton.wxss独立，不会冲突
• 4.位置在页面-路径简单，样式加载正常。

用组件写的骨架屏（不准你用这个。）

特点：

• 1.有JS逻辑（生命周期、事件处理）
• 2.执行业务逻辑
• 3.处理交互和数据
• 4.可能调用接口获取数据

作用：

• 1.真正的功能组件
• 2.实现具体的业务功能。

工具生成骨架屏在页面使用步骤：

生成骨架屏之后在theater.wxml写上这两行

<import src="theater.skeleton.wxml"/>
<template is="skeleton" wx:if="{{a}}" />

新建一个theater.wxss 引入theater.skeleton.wxss

@import "theater.skeleton.wxss";

宝子们，这就是骨架屏的样子啦！

在网络请求慢的情况下，2G,3G,4G会不会影响骨架屏？

不会直接影响骨架屏的显示，但会影响骨架屏的显示时长。

骨架屏的生命周期：

各网络环境下的表现：

骨架屏的真正价值：

// JS代码
isLoading.value = true;  // 本地执行，瞬间显示骨架屏 我的a就是true

//  网络请求中...（快3G/4G，慢2G）

接口返回数据后:
isLoading.value = false;  // 隐藏骨架屏，显示真实内容

骨架屏的好处：

• 网络慢时（2G/3G），用户能立即看到页面在加载（而不是空白屏幕）
• 改善用户体验，让用户感觉不那么"卡顿"
• 网络快时（4G/WiFi），骨架屏一闪而过，用户几乎察觉不到

总结：

• 网络速度的影响：
• 不影响骨架屏是否显示
• 影响骨架屏显示的时间长短
• 网络越慢，骨架屏显示时间越长
• 这正是骨架屏的设计初衷 → 优化用户体验

执行流程图：