骨架屏

了解开发工具中的骨架屏功能

通过本节你将学会：

• 生成骨架屏
• 预览骨架屏
• 骨架屏文件语法功能

生成骨架屏

注意：IDE 3.7.0 及以上版本才支持骨架屏功能

1. 点击工具栏中的「骨架屏」图标，首次使用骨架屏功能时，需要先点击「安装」按钮安装骨架屏插件。

   

2. 插件安装成功后，按提示重新加载窗口。

   

3. 再次点击「骨架屏」图标，打开下图弹窗。

   

   骨架屏，是根据真机效果生成。所以，需要先开启真机预览。生成骨架屏的具体操作如下：

   • 如果手机上的调试器和引擎，版本小于 1090，请点击「更新调试器和引擎」按钮，更新到最新版本（>= 1090）。

   • 使用快应用调试器扫描二维码，连接真机。

   • 真机上切换到需要生成骨架屏页面，IDE 点击「生成骨架屏」按钮，即可生成骨架屏文件。 如下图，真机切换到 组件-容器组件-refresh 页面，生成的就是该页面的骨架屏。

     

4. 如下图所示，在 skeleton/page 目录下生成骨架屏文件（文件后缀为 sk），在 skeleton 目录下生成配置文件 config.json。另外，骨架屏插件会右侧，自动打开预览视图。

   

   配置文件和骨架屏文件的编写方法，请参考骨架屏文档。

预览骨架屏

1. 预览

   • 打开 sk 文件后，可以点击「在侧边打开骨架屏预览」按钮，打开预览视图。

     注意：暂不支持预览 <full-screen-img>

     

   • 如果打开多个 sk 文件，切换文件，预览视图可以自动切换。

   • 更新 sk 文件的内容，保存文件，预览视图可以自动更新。

2. 预览尺寸

   使用用开发者工具生成骨架屏时，开发者工具会保存真机尺寸，用于计算预览视图的高度，具体如下：

   • 竖屏，预览视图的宽度设置为 375px，高度按真机比例算出；
   • 横屏，预览视图的宽度设置为 750px，高度按真机比例算出；

3. 设置预览尺寸

   设置预览的真机尺寸，可以模拟骨架屏在不同真机上的显示效果。设置步骤如下：

   • 通过「首选项」「设置」菜单，打开设置面板。

     

   • 在设置面板，搜索 skeleton，切换到 工作区，配置预览的真机尺寸。

     

     • Height：屏幕高度
     • Width：屏幕宽度
     • Top：屏幕顶部偏移量，即标题栏和状态栏的高度，默认为 0
     • Left：屏幕左侧偏移量，默认为 0

骨架屏文件语法功能

1. 语法高亮

2. 自动补全

   • 标签补全：输入 < 触发。
   • 属性补全：在标签中，输入空格，触发属性补全。比如 <rect> 标签会提示 x、y 等属性。

   

3. Emmet

   • sk 文件支持 emmet 补全，如下图所示，输入 rect*4，再点 enter 键，可以输入 4 个 rect 标签。

   

4. 悬浮提示

   • 鼠标悬浮可以查看标签信息、属性信息。

   

5. 取色器

   • 鼠标悬浮在颜色上(如 #74b4b4)，出现取色面板，点击选择新颜色。

   

6. 格式化

   • 右键菜单，选择「格式化文档」，可对 sk 文件进行格式化。

     

   • 配置格式化规则：

     通过「首选项」「设置」菜单，打开设置面板。

     

     在设置面板，搜索 skeleton，配置 hap-skeleton.prettyHtml。

     

     配置后，需要重新加载窗口才会生效。操作如下：通过快捷键 Ctrl + Shift + P (Mac：Cmd + Shift + P) 调起「命令面板」，输入 开发人员: 重新加载窗口。