uni-app如何生成骨架屏

最新推荐文章于 2025-03-12 18:16:46 发布
最新推荐文章于 2025-03-12 18:16:46 发布
阅读量939 收藏 6
点赞数 6
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/web5219/article/details/135468290
版权
本文介绍了如何在微信小程序中使用骨架屏技术来提升用户体验，包括骨架屏的原理、微信开发者工具的自动生成功能，以及如何封装和在页面加载时动态切换真实内容的过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

参考效果

骨架屏作用是缓解用户等待时的焦虑情绪，属于用户体验优化方案。
在这里插入图片描述
生成骨架屏

微信开发者工具提供了自动生成骨架屏代码的能力。

使用时需要把自动生成的 xxx.skeleton.vue 和 xxx.skeleton.wxss 封装成 vue 组件。
1.点击模拟器中的页面信息/生成骨架屏，会生成两个文件
在这里插入图片描述
2.生成xxx.skeleton.vue 和 xxx.skeleton.wxss 两个文件
在这里插入图片描述
3.将这两个文件封装成一个vue组件
4.在组件中使用

// 加载中标记
let isLoading
最低0.47元/天 解锁文章
【第一趴】初探uni-app（uni-app发行者、uni-app推出背景、为什么选择uni-app）
官方推荐
11-07 4万+
聚沙成塔——每天进步一点点，大家好我是几何心凉，不难发现越来越多的前端招聘JD中都加入了uni-app 这一项，它也已经成为前端开发者不可或缺的一项技能了，所以凉哥为大家推出聚沙成塔【45天玩转uni-app】专栏，帮助大家对 uni-app 进行学习和理解，uni-app可以通过一套代码多端发行，相信你掌握本语言后无论是毕设还是求职项目都可以说是锦上添花，妥妥加分项；快来订阅专栏跟着凉哥一起来感受 uni-app 为开发者带来的劲感吧！
《uni-app跨平台开发与应用》一课一得
baiyixiangxiaoho的博客
04-25 2098
uni-app是一个基于Vue.js的跨平台应用开发框架，它允许开发者使用Vue.js语法进行一次编码，然后将代码编译成可以运行在多个平台上的原生应用，包括iOS、Android、Web等。uni-app提供了丰富的组件和API，使开发者可以轻松地创建高性能、原生体验的应用，并且具有良好的开发效率和跨平台兼容性。通过uni-app，开发者可以大大减少开发成本和时间，快速推出产品，适应不同平台的需求。使用view组件构建页面的整体结构，包括音乐头部、轮播图、排行榜、用户信息等模块。
uni-app 骨架屏实现
qq_34720440的博客
09-11 6139
基本理解 骨架屏可以理解为是当数据还未加载进来前，通过占位线框元素，渐进式加载数据，先呈现页面基本结构。 效果图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200911115804811.gif#pic_center 需要的文件 【skeleton.vue】 <template> <div> <div class="wrap" :style="{'width':systemInfo.width+'px
uniapp实战 —— 骨架屏
朝阳39的博客
12-08 2957
1. 自动生成骨架屏代码 在微信开发者工具中，预览界面点击生成骨架屏 确定后，会自动打开骨架屏代码文件 pages\index\index.skeleton.wxml 2. 将骨架屏代码转换为vue文件 在项目中新建文件 src\pages\index\components\skeleton.vue 将pages\index\index.skeleton.wxml中的代码复制到 skeleton.vue 中 删除所有的注释和无接口访问的部分（如顶部的导航栏），如下图所示，通过 i
uniapp开发微信小程序配置骨架屏快捷方式
最新发布
zhou404的博客
03-12 223
使用微信开发者工具的生成骨架屏功能，如图所示：该功能会微信开发者工具的文件夹下生成两个文件分别是和文件名.skeleton.wxss。
uni-app开发微信小程序：首页骨架屏
听海边涛声
09-18 1576
uni-app开发微信小程序：首页骨架屏
uni-preset-vue-master uniapp项目模板
12-02
3. **脚手架工具**：uni-app提供了命令行工具，通过npm或yarn安装后，可以使用uni init命令创建新项目，选择uni-preset-vue模板，一键生成项目骨架。 4. **插件市场**：uni-app有丰富的插件市场，提供了各种组件和...
基于uni-app的网易云微信小程序完整源码+说明（包括：云音乐首页分类、音乐列表页展示、音乐详情页等实现）.zip
03-28
【资源说明】 1、该资源内项目代码都是经过...基于uni-app的网易云微信小程序源码+项目说明（包括：云音乐首页分类、音乐列表页展示、音乐详情页、音乐播放器、推荐音乐、用户留言、音乐搜索、加载骨架屏等实现）.zip
create-skeleton-quickly:骨架屏自动生成可视化工具
05-28
create-skeleton-quickly 快速生成网页骨架屏的可视化工具。 支持同时生成多个网页的骨架屏代码。 提供了便捷的 CLI 命令，安装即用。 QuickStart npm i create-skeleton-quickly -g 方法一：打开可视化界面 csq run 5000 //谷歌会自动打开，其他浏览器需要手动 方法二：配置文件生成骨架屏代码 生成配置文件 csq init // 在当前文件夹创建skeleton.config.js 开始编译 csq start // 开始生成骨架屏代码 方法三：提供了扩展方法 const DrawPageStructure = require('create-skeleton-quickly'); new DrawPageStructure({ isAnimation: true, background: '#ecf
uniapp 微信小程序添加骨架屏 优化页面加载过程用户体验
nanren_nanren的博客
05-07 1268
骨架屏是一种在页面加载过程中，以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条，让用户在等待内容加载时获得视觉反馈，提高了用户的满意度。
正确使用uniapp搭配微信开发者工具自带的骨架屏功能，生成骨架屏
刘杨造梦的博客
05-07 2691
很多人都知道微信开发者工具自带生成骨架屏的功能，但是却不知道怎么使用，接下来教大家使用 步骤： 1、点击微信开发者工具左下角生成骨架屏 2、回到hbuilderx的项目中，在component中建立一个vue组件，命名为index.vue 3、在index.vue中，把刚刚生成的index.skeleton.wxml和index.skeleton.wxss两个文件复制到index.vue文件里面，注意wxml文件应该放在template标签中，wxss的文件内容应该放在style标签中 4、最重要的一
uniapp 小程序实现使用骨架屏
abc123abccc的博客
07-20 711
大家好，今天测试大佬，让我在项目中使用骨架屏技术，优化一下用户的体验，当时第一反应是，可不可以使用vue3内置组件 Suspense 来实现，使用后，发现报了一堆红。然后会有弹框提示，确定后会在微信开发者工具当前页面同级目录下生成xxx.skeleton.wxml和xxx.skeleton.wxss两个文件，分别为骨架屏代码的模板和样式。骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容，这样极大的优化了用户的体验。
uni-app vue3 使用骨架屏 以及实现骨架屏
2303_77072102的博客
10-23 1381
*query.selectAll 参数就是class类名 可以获取到所有带skeleton-circle类名的节点 这个类名可以自己起 *//*query.selectAll 参数就是class类名 可以获取到所有带skeleton-rect类名的节点 这个类名可以自己起*//* 获取当前组件的实例 vue2里面是用this vue3里面没有this就要换成getCurrentInstance()来获取实例 *//* 我这边用的是定时器来模拟后端数据异步返回的结果从而实现骨架屏 */
uni-app 微信小程序中使用微信开发者工具生成“骨架屏”，skeleton
从入门到放弃
11-08 3657
废话不多说直接上效果 效果展示结束了接下来告诉大家怎么去使用这个呢，其实我们微信开发者工具已经给我们提供了自动生成骨架屏的功能了： 在编辑器-模拟器-右下角（‘...’） 点击之后呢我们就可以看到生成骨架屏的按钮了 点击以后他会告诉我们对应的提示 点击确定 在对应的文件夹下方就生成了我们对应页面的骨架屏文件了。 接下来我们怎么在uni-app 中使用他呢？ 第一步哈，随便我们找个位置新建一下我们骨架屏的组件文件夹，这里我们在uni-app 文件目录中创建 ：commo...
uniapp网络延迟优化之骨架屏
专研技术的大学生
09-09 1031
uniapp中网络延迟之骨架屏优化
最简单的骨架屏实现方式，适用于VUE项目，小程序项目，uniapp项目。
神夜空间
05-26 2236
1、VUE项目 skeleton.vue插件 <template> <div> <div class="wrap" :style="{'width':systemInfo.width+'px','height':systemInfo.height+'px', 'background-color':bgcolor}"> <div v-for="(item,index) in skeletonRectLists" .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值