自如APP完整页面下的骨架屏生成方案

2401_84149785

于 2024-05-08 12:02:18 发布

阅读量714

点赞数 12

分类专栏：程序员文章标签： javascript java 前端

本文链接：https://blog.csdn.net/2401_84149785/article/details/138566652

版权

程序员专栏收录该内容

269 篇文章 0 订阅

订阅专栏

获取视图层级数据

大家都知道页面布局是DOM结构，所以一般只需要提供一个根视图，通过递归就可以遍历出所有的子视图并获取到视图的属性，拿到数据后按照定义的数据结构进行保存即可

文件读写

操作文件需要提供文件名称和路径，为了方便管理，文件放在同一目录下，文件名称以控制器名称命名，如（ZRXXXController）。

解析DSL生成骨架屏

读取数据文件，按照层级结构依次创建view，需要注意的是骨架屏页面无需创建不同类型的视图（Label,Button等按照View来绘制），只需区分出视图样式即可，比如Label显示什么颜色，Button显示什么颜色，普通View显示什么颜色。

可视化调试

直接根据已有的页面生成骨架屏，样式或许无法直接满足需求，此时就需要提供可视化编辑的能力。调试模式下，点击骨架屏中的View，打开调试面板，编辑坐标，大小，颜色，圆角等属性，同时可以隐藏一些不想要的视图。

4、使用

调试完骨架屏并生成数据文件以后就剩下如何使用的问题了，使用之前需要先将数据文件导出放在工程里以便读取（后续考虑通过云端下发），然后解析文件生成骨架屏，控制其展示和隐藏即可

文件导出

找到骨架屏调试用的设备，找到对应APP，点击下载，下载完成后文件右键显示包内容，在对应沙盒目录下即可找到数据文件

图片19.png

5、完整流程

其中云端上传和下发部分暂未实现

图片20.png

三、本方案的优点

1、骨架屏自动生成，设计师无需出骨架屏设计图，省去了APP版本迭代中的维护和沟通成本，开发人员无需为骨架屏单独维护一套UI代码，节省了研发成本 2、单独生成完整骨架屏页面，有效避免了骨架屏侵入业务代码，有效降低了代码耦合度 3、开发阶段提供可视化调试功能，可编辑骨架屏子视图并实时预览编辑效果 4、云端下发骨架屏配置文件，可动态修改线上骨架屏展示样式

四、结语

以上便是骨架屏生成方案的全部内容，目前该方案细节上尚有不完善之处，样式规范和数据结构需不断优化。Over

作者：自如大前端研发中心-服务研发组-吴辉建
招聘信息

自如大前端研发中心招募新同学！

FE/iOS/Android工程师

公司福利有：

全额五险一金，并额外购买商业保险
免费健身房+年度体检
公司附近租房9折优惠
每年2次晋升机会

欢迎对技术有执着热爱的你加入我们！简历请投递 zhangxl122@ziroom.com, 或加微信 v-nice-v 详聊！