⼩程序之⾻架屏
最近想要在⼩程序实现⾻架屏，⼩伙伴讨论具体的技术⽅案以及实现原理，欢迎指正。
实现⽅案
⽬前主流的实现⽅案⼤概三种：
引⼊统⼀组件，动态计算 DOM 节点，然后利⽤组件⽣成对应⾻架屏结构
针对具体页⾯单独写⼀份⾻架屏代码（⼀般通过插件或⼯具⾃动⽣成）
使⽤⾻架屏图⽚
⼀、统⼀组件
这⾥介绍其中的⼀种实现⽅式：
在需要⾻架屏的页⾯引⼊组件，组件内部通过 wx.createSelectorQuery 配合 selectAll（class名称）获取当前页⾯的节点
使⽤ boundingClientRect 获取每个节点位置数据，其中包括节点位置和宽⾼，再使⽤ exec 将节点数据以数组⽅式返回，并保存到data
利⽤数据通过 for 循环数组⽣成 dom 内容，每个 dom 节点使⽤上⾯拿到的节点位置和宽⾼，绝对定位确定位置、同时制定元素宽⾼
优点：
可⽤于多个页⾯，只需引⼊组件即可，⽅便快捷
只需⼀个组件，代码体积⼩，维护成本⼩
缺点：
只能⽤于静态数据页⾯或特殊页⾯，对于未知数据很难预测具体的页⾯效果
不利于个性化定制，如圆形头像等特殊样式需单独约定
在 HTML ⽂件中需要额外添加 class 供选定，区分⾻架屏节点以及对应节点的样式
总结：
这种形式⼀般只适合静态页⾯
参考代码：
⼆、定制⾻架屏
开发者⼯具提供对应的功能⼀键⽣成相应页⾯的⾻架屏⽂件。
开发者⼯具跳转到对应页⾯，点击右下⾓ ... 标志，选择⽣成⾻架屏，在对应的页⾯⽂件下会根据当前的页⾯内容⽣成 skeleton 两个⽂件
按照⽣成⽂件对应的提⽰引⼊即可，页⾯通过 loading 字段控制⾻架屏的显⽰和隐藏
在需要渐进式展⽰的区域设置 data-skeleton-hide 属性，并指定⼀个变量，模板内传⼊指定的变量控制区域的显⽰页⾯元素需要变为绝对定位，否则⾻架屏元素显⽰会异常
不同的页⾯数据可能会⽣成不同的⾻架屏⽂件
优点：
个性化程度⾼⽅便定制，不同页⾯数据⽣成不同⾻架屏
使⽤⼯具⽣成，模块化引⼊，简单快捷
根据现有页⾯数据⽣成，避免⽆法控制⽆数据时的⾻架屏显⽰问题
缺点：
每个页⾯对应⼀份⾻架屏⽂件，增加代码包⼤⼩，增加维护成本
同样页⾯不同数据⽣成的⾻架屏并不⼀致，需要选择合适数据
不同动态⽣成，不同页⾯效果需要重新⽣成对应代码
总结：
利⽤⼯具⾃动⽣成代码，但是会增加代码体积
小程序开发一键生成平台源码三、使⽤图⽚
最后权衡利弊，还是选择了这种⽅法，直接请UI做⼀张对应图⽚，简单到极致的⽅法~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。