uniapp 微信小程序添加骨架屏 优化页面加载过程用户体验

一、什么是骨架屏

骨架屏是一种在页面加载过程中,以占位符形式展示页面结构的技术。它通过显示简单的灰色块和线条,让用户在等待内容加载时获得视觉反馈,提高了用户的满意度。

二、为什么需要骨架屏

在移动设备和慢速网络环境下,页面加载速度变得尤为关键。用户不愿等待长时间才能看到页面内容。骨架屏能够在内容加载完全之前快速展示页面结构,让用户感受到页面加载的进度,从而提高了用户体验。

三、骨架屏的实现——纯CSS

就是自己在做页面布局的同时使用CSS再画一个骨架屏,然后在网络请求数据响应回来之前先显示这个骨架屏内容。

四、骨架屏的实现——微信开发者工具

1、用微信开发者工具生成骨架屏文件

微信开发者工具中有一个功能能够帮我们根据页面内容快速生成一个骨架屏。

点击这个就能自动快速的生成两个文件,一个.wxml文件和一个.wxss文件。这两个文件存放的就分别是存放的<template>部分和<style>部分。如图就是我为我的orderDetails(订单详情页)页面生成的骨架屏文件。

2、在uniapp项目中使用

可以在components文件中新建一个.vue文件,然后把这个.wxml中的内容复制到orderDetails.vue文件中的<template>中,把.wxss的内容复制到orderDetails.vue的<style>中。这样你就得到了一个骨架屏.vue文件。

然后在需要显示的页面引入、注册、使用就行了。

这里我是用loading来控制显示,当获取页面数据的响应回来之前loading为true,也就是显示骨架屏内容。响应回来之后将loading赋值为false即可。如果你是微信小程序原生开发,过程也大差不差。

3、显示效果

五、注意事项

1、用微信开发者工具生成的骨架屏文件内容,H5端使用不了。app或其他移动端是否可行还没试。

2、如果生成的骨架屏效果不满意可以调整页面过后保存运行到微信开发者工具中。然后重新生成一次,如此反复。

3、如果你在页面中有引入其他组件的情况,在生成骨架屏的时候.wxml的内容里面会有类似于<view is="">的情况,这种运行会报错。你只需要将is=""的内容删除就行。

4、本文章只是写来自己使用的,如果能帮到大家我很开心,如果有错误或不足的地方还望大家指正。

  • 6
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值