微信小程序 开发工具 骨架屏 快速生成

微信小程序开发工具，现在支持一键生成骨架屏功能。

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。通常在小程序中，我们需要手工维护骨架屏的代码，当业务变更时，同样需要对骨架屏代码进行调整。为了开发的便利，开发者工具提供了自动生成骨架屏代码的能力。

使用方法

工具可以为当前正在预览的页面生成骨架屏代码。工具入口位于模拟器面板右下角三点处。

点击生成骨架屏，将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 page.skeleton.wxml 和 page.skeleton.wxss 两个文件，分别为骨架屏代码的模板和样式。

骨架屏代码通过小程序模板（template）的方式引入 以 pages/index/index 页面为例，引入方式如下。

<!-- pages/index/index.wxml 引入模板 -->
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" data="{{}}"/>

/* pages/index/index.wxss 中引入样式 */
@import "index.skeleton.wxss";

可参考学习官方提供的示例代码：https://developers.weixin.qq.com/s/3AQoEBmh7XhF