小程序wxml2canvas生成分享卡片小程序码丢失

这个 BUG 需要特定的动态卡片 &＃43; 特定的设备才能复现

这个 BUG 是如何产生的&＃xff1f;
wxml2canvas 在绘制的时候&＃xff0c;会根据一个叫做 sorted 的对象对它的 keys 进行遍历&＃xff0c;该对象的 key 为节点的 top 值&＃xff0c;value 为节点元素&＃xff1b;问题就是出在这里&＃xff0c;该库作者误以为 Object.keys() 总是会按照实际创建属性的顺序返回&＃xff0c;然而当 key 为正整数的时候&＃xff0c;返回顺序就不符合原本的预期了&＃xff0c;会出现了绘制顺序错乱&＃xff0c;从而导致这个 BUG 的产生。

const sorted &＃61; {}sorted[300] &＃61; {}
sorted[100] &＃61; {}
sorted[200] &＃61; {}
sorted[50.5] &＃61; {}console.log(Object.keys(sorted)) // 这次又输出什么呢&＃xff1f;


会不会有同学以为答案是&＃xff1a;[‘50.5’, ‘100’, ‘200’, &＃39;300’] 呢&＃xff1f;
但正确的答案应该是&＃xff1a;[‘100’, ‘200’, &＃39;300’,’50.5’]。

下面是生成小程序码的代码&＃xff1a;

再次经过对比&＃xff0c;发现原来大部分情况下&＃xff0c;top 值都会是浮点数&＃xff0c;而本次出 BUG 的卡片小程序码只是非常凑巧地为整数&＃xff0c;导致绘制顺序不对。
我才发现 wxml2canvas 原本的逻辑是想根据 sorted 创建的顺序来绘制&＃xff0c;但是没有考虑 key 为整数的情况。
所以&＃xff0c;最后通过这样修改解决问题&＃xff1a;

_sortListByTop (list &＃61; []) {let sorted &＃61; {};// 粗略地认为2px相差的元素在同一行list.forEach((item, index) &＃61;> {
- let top &＃61; item.top;
&＃43; let top &＃61; item.top.toFixed(6); // 强制添加小数点&＃xff0c;将整数转为浮点数if (!sorted[top]) {if (sorted[top - 2]) {top &＃61; top - 2;}else if (sorted[top - 1]) {top &＃61; top - 1;} else if (sorted[top &＃43; 1]) {top &＃61; top &＃43; 1;} else if (sorted[top &＃43; 2]) {top &＃61; top &＃43; 2;} else {sorted[top] &＃61; [];}}sorted[top].push(item);});return sorted;
}