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

追格官方小助手/ 2023年01月13日/ 小程序/ 浏览 1911

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


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


使用方法


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




点击生成骨架屏,将有弹窗提示是否允许插入骨架屏代码。确定后将在当前页面同级目录下生成 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


发表评论

暂无评论,抢个沙发...

客服 工单