微信小程序踩坑

心都碎了

刚做完小程序视频的一个类似抖音的需求，此时此刻我好想吟诗一首:
代码千万行，bug就一行。
码的不认真，开发两行泪。
不得不说，微信小程序真是个最令人讨厌的东西，因为它拥有世界上最卡的编辑器，同时拥有世界上最多的兼容性问题。如果不是公司要求，我想我永远不会再用微信小程序。之前有人说微信小程序将制定一套类似为w3c的标准规范，我个人感觉比登天还难。

踩坑之路

video组件

1.同层渲染兼容性问题: 本来想做类似抖音那样的视频滑动,但是因为小程序的video是原生组件，属于最高层级。之前只能用cover-view去覆盖,最近官方说是支持了同层渲染,可以使用z-index控制层级，于是就兴奋的去尝试，写完了，ios测试没问题，结果安卓一测一个坑，oppo、vivo手机都有问题,实在没法去解决，最后还是用了cover-view。
2.video视频播放问题:大部分安卓手机播放一会就会开始加载转圈，90%复现率。

setData

小程序修改数据只能通过setData方法,但是这个方法有个限制就是设置的数据最大不能超过1024k。可是如果数据真的很大，有几万条怎么整，只能自己将list转为二维数组,比如一次设置10条。

原数组:[{url:xxx,pre_url:xxx,user_id:xxx,....},{url:xxx,pre_url:xxx,user_id:xxx,....},{url:xxx,pre_url:xxx,user_id:xxx,....},{url:xxx,pre_url:xxx,user_id:xxx,....}]

修改后的二维数组:[[{url:xxx,pre_url:xxx,user_id:xxx,....},{url:xxx,pre_url:xxx,user_id:xxx,....}],[{url:xxx,pre_url:xxx,user_id:xxx,....},{url:xxx,pre_url:xxx,user_id:xxx,....}]] #这样一次修改10条，但是渲染的时候渲染两次wx:for

当然最重要的还是要减少后端返回的数据，出去用不到的数据，只用到需要的数据，得到一个精简的list，比如目前我列表只用到接口返回的三四个字段，我就只取这三四个，其他的干掉。这样再setData就好多了，而且渲染速度也快。

小程序的瀑布流实现

小程序不同浏览器，没有document对象，也就是说要想取某个元素的宽高和位置信息，用不了document。只能用官方提供的wx.createSelectorQuery().select()方法，但是对于瀑布流，每次插入一条都要比较左边和右边的两列的高度，来判断插入左边还是右边。但是最好别在遍历里面进行setData,那可是ms级的修改。微信这样的“小”程序可受不了。最好的办法还是让接口返回图片的高度，底部内容给个固定高度。

let leftHeight = 0
let rightHeight = 0
videoList.forEach((v)=>{
if(leftHeight <=rightHeight){
    leftHeight += v.video[0].height
    v.left = 1
}else{
    rightHeight += v.video[0].height
    v.right = 1
}
})# 将list遍历，根据接口返回的高度来确定是放左边还是右边