uni-app项目使用微信小程序生成骨架屏

最新推荐文章于 2024-05-07 13:11:02 发布
最新推荐文章于 2024-05-07 13:11:02 发布
阅读量317 收藏
点赞数 1
文章标签： uni-app 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sb1784591708/article/details/135999305
版权
本文介绍了如何在uni-app项目中利用微信小程序生成骨架屏，包括创建`skeleton.vue`组件、处理wxml和wxss文件、删除特定代码和图片引用，以及解决样式问题的方法。
摘要由CSDN通过智能技术生成

uni-app项目使用微信小程序生成骨架屏

  1. 项目运行到微信小程序后，直接三个点生成骨架屏

在这里插入图片描述

  1. 生成的wxml和wxss

  2. 在components中新建一个skeleton.vue组件，把wxss复制粘贴订单到中，把wxml复制粘贴到，在删除类似这样的代码，记得删掉对应的结尾标签，删除view 中 带有 data-event-opts=”的属性以及删除掉所有带有…/本地引入图片的路径或者用 image标签代替
    在这里插入图片描述

  3. 正常引用和使用组件就可以了。

  4. 如果样式是错乱的，把主页面的css样式复制一份到组件样式中就好了，在进行调整一下就好了

努力吧！挺自己
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序---骨架屏实现，实现起来超级简单
weixin_43452154的博客
11-24 3949
骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。
微信小程序中使用骨架屏
sun_jinlin的博客
10-12 483
骨架屏通常用于在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。
uni-app如何生成骨架屏
cozy666的博客
04-12 400
2.将生成的wxml代码复制到vscode，在index的components中新建一个vue文件，只需保留请求接口的部分即可。3.在首页中去使用骨架屏组件，如何接口正在加载则显示骨架屏，如果加载结束则显示返回的结果。1.打开微信开发者工具，找到模拟器中的页面信息，选择生成骨架屏。为什么需要骨架屏：为了缓解用户打开程序时等待接口的焦虑情绪。将wxss代码复制到style中。
微信小程序开始实现骨架屏
baorant24的博客
04-18 349
微信小程序开始实现骨架屏 问题背景 客户端开发和学习过程中，骨架屏是一种很常见的场景。应用打开时加载资源和复杂逻辑导致耗时较长，可能出现白屏等场景，此时增加骨架屏可以极大改善用户的体验。本文将介绍微信小程序中是如何实现骨架屏的。 问题分析 (1)微信开发者工具，可以很方便的给对应页面生成对应的骨架屏页面文件，如下所示： ...
uniapp 微信小程序添加骨架屏 优化页面加载过程用户体验
最新发布
nanren_nanren的博客
05-07 665
骨架屏是一种在页面加载过程中，以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条，让用户在等待内容加载时获得视觉反馈，提高了用户的满意度。
uniapp开发小程序中实现骨架屏
qq_43235503的博客
09-17 949
uniapp开发小程序中实现骨架屏
微信小程序---骨架屏组件
2301_80646752的博客
03-24 323
骨架屏是页面的一个空白页面，开发者会使用css绘制一些灰色区块，将页面内容大致勾勒出轮廓，通常会在页面完全渲染之前，将骨架代码进行展示，待数据加载完成之后，再替换成真实的内容，骨架屏的设计旨在优化用户体验。在进行项目开发时，我们需要手工维护骨架屏的代码，当业务更换时，同样需要对骨架屏代码进行调整。
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
uni-app使用微信小程序云函数的步骤示例
10-15
首先，为了使用微信小程序云函数，我们需要在uni-app项目中创建一个云函数目录。例如，可以创建名为`functions`的文件夹，并在其中放入任意文件，如`new_file.css`，确保在编译为小程序时，`cloudfunctions`文件夹会...
uni-app-mall:基于uni-app的商城微信小程序项目模板
08-04
基于 uni-app 框架开发的微信小程序项目基础模板。本项目使用 vue-cli 创建。 目录结构说明 src │ ├── config │ ├── index.js 配置对外暴露文件 │ └── api.js 接口列表 │ ├── common │ ├── ...
微信小程序组件DEMO及案例
09-28
微信小程序组件DEMO及案例
uni-app微信小程序生成海报.rar
02-07
- uni-app使用Vue的语法，因此可以利用Vue的数据绑定和计算属性功能，动态生成海报上的内容。例如，通过`v-for`循环遍历数据数组，生成多个海报元素。 - 数据管理：使用uni-app的Vuex状态管理库，集中管理全局状态...
uni-app+原生微信 小程序电商购物项目
01-28
技术选型：uniapp + 原生微信小程序开发，两套项目， 1 、首页轮播图、模糊搜索、输入触发搜索，防抖节流 2 、点击主页跳转列表页 3 、点击列表可查看详情、加购、 4 、点击我的可修改收货地址、微信头像登录 5 、...
uniapp或Vue使用小程序开发者工具骨架屏skleton
m0_71908406的博客
10-20 565
总结：自己在网上没百度到uniapp使用小程序生成的骨架屏，这个方法比较无脑，页面少还好，多了就不通用了，优点是生成的骨架屏非常漂亮，也不用手动去加类名，生成一个完美一个，而且网上有一些骨架屏组件使用起来会先闪烁原页面，体验不好。把生成的wxml复制粘贴，生成的wxss写在<style>标签里，这样一来就是一个完整的组件。3.如果是自定义头部可以把生成的对应的代码删掉，微小的样式可以自己添加长宽大小。：小程序的使用较为简单，生成-引用就行了，下面讲uniapp的使用方法。1、可以删除生成文件中类似。
微信小程序渐进式骨架屏的写法
动感超人的博客
03-11 411
其实已经完成了这样子,我们最后自己添加下延迟吧js文件data : {swiperData : false , //顶部轮播图数据是否加载完成-默认false textData : false , //中间文本数据是否加载完成-默认false bottomData : false , //底部数据是否加载完成-默认false loading : true , //数据是否还有没有加载的-默认true } , onLoad() {
uniapp实战 —— 骨架屏
朝阳39的博客
12-08 1564
1. 自动生成骨架屏代码 在微信开发者工具中，预览界面点击生成骨架屏 确定后，会自动打开骨架屏代码文件 pages\index\index.skeleton.wxml 2. 将骨架屏代码转换为vue文件 在项目中新建文件 src\pages\index\components\skeleton.vue 将pages\index\index.skeleton.wxml中的代码复制到 skeleton.vue 中 删除所有的注释和无接口访问的部分（如顶部的导航栏），如下图所示，通过 i
【uniapp】uniapp使用微信开发者工具制作骨架屏：
SunPeng的博客
08-12 1201
【uniapp】uniapp使用微信开发者工具制作骨架屏：
uni-app一套代码微信小程序和app
04-02
uni-app是一套基于Vue.js的跨平台开发框架，它可以让开发者使用一套代码同时构建微信小程序和App（包括iOS和Android平台）。uni-app的特点如下： 1. 跨平台开发：使用uni-app可以只编写一套代码，即可在多个平台上运行，包括微信小程序、App、H5、支付宝小程序、百度小程序等。 2. Vue.js生态：uni-app基于Vue.js框架，开发者可以充分利用Vue.js的特性和生态系统，如组件化开发、数据绑定、指令等。 3. 原生能力：uni-app提供了一系列的API和组件，可以直接调用原生平台的能力，如获取地理位置、扫码、支付等。 4. 优化性能：uni-app通过编译器将代码转换为原生平台的代码，提高了运行效率和性能。 5. 开发便捷：uni-app提供了丰富的开发工具和插件，如HBuilderX、uni-app插件市场等，方便开发者进行开发和调试。 6. 社区支持：uni-app拥有庞大的开发者社区，可以分享经验、解决问题，并且有很多开源的组件和模板可供使用。 总结起来，uni-app是一套跨平台开发框架，可以帮助开发者快速构建微信小程序和App，减少开发成本和工作量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值