uniapp 微信小程序添加骨架屏 优化页面加载过程用户体验_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、本文章只是写来自己使用的，如果能帮到大家我很开心，如果有错误或不足的地方还望大家指正。