在微信小程序中使用骨架屏

在微信小程序中使用骨架屏可以优化用户体验，避免页面加载时出现白屏现象。以下是详细的使用方法和注意事项：

使用方法

1. 生成骨架屏代码：
   • 打开微信开发者工具，进入需要添加骨架屏的页面。
   • 在模拟器面板右下角点击三个点，选择“生成骨架屏”。
   • 点击“确定”后，会在当前页面同级目录下生成page.skeleton.wxml和page.skeleton.wxss两个文件。
2. 引入骨架屏：
   • 在页面的wxml文件中引入骨架屏模板：

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

   • 在页面的wxss文件中引入骨架屏样式：

     @import "./page.skeleton.wxss";
     

3. 控制骨架屏显示与隐藏：
   • 在页面的data数据对象中添加一个loading变量，并将其初始值设置为true。
   • 在数据加载完成后，通过setData方法将loading变量设置为false，隐藏骨架屏。

配置骨架屏

可在project.config.json中增加字段skeletonConfig进行骨架屏相关配置，页面配置会覆盖掉全局配置。开发者可根据需要设置文字、图片、按钮的颜色和形状，同时可根据excludes、remove、hide等忽视或隐藏部分页面元素，以获取更优的展示效果。

注意事项

1. 骨架屏仅包括页面首屏中的可见区域，对于横向滚动的swiper等容器，超出屏幕的子元素将被忽略。
2. 骨架屏的布局复用开发者的页面布局，需要骨架屏自适应页面尺寸时，页面布局应采用rpx等自适应方案。
3. 部分组件如movable-view、movable-area、rich-text、editor、picker、picker-view、picker-view-column、ad、official-account和open-data无法生成理想的骨架效果，可通过添加一个父容器，结合grayBlock、empty等配置，将其置灰。
4. 请勿修改自动生成的骨架屏的代码，当效果不理想时，建议调整相关配置，这样当页面变更时，仍可自动生成。
5. 生成的骨架屏代码中会包含预览时的页面数据，将被用来填充页面。
6. 骨架屏通常用于商品列表、新闻列表等页面，对于动画/原生组件较多的页面展示效果不佳。
7. 该能力除用于展示首屏骨架外，也可作为局部加载的loading样式，可灵活使用。
8. 在使用过程中，为了避免骨架屏和真实页面元素同时出现，可在真实页面的view标签上加一个wx:else的条件。
9. 微信开发工具生成wxml有行样式需要修改