-
相似颜色
1.比较颜色相似时，先比较色相范围，筛选出一定范围。再使用rgb权值公式进行比较
2.得到相似颜色之后，需要寻找颜色所在色卡，因为颜色在色卡内排布的比较规律。则可以用二分法，不断分割遍历区间。
思路：是否在头/尾/中间的颜色区间中，是则return。不是则继续二分区间，继续比较。
在写二分查找的时候遇到这么一些问题:
①二分法有两种写法，一种是while循环，一种是递归法。
一开始使用的是while查询，但是因为需要查询色卡的颜色是一个数组，那么就需要遍历数组再套while循环查找。
这样，for循环套while性能比较低，可能会使程序运行时间过长。
所以最后把查找色卡部分单独封装为一个函数，并且使用递归的写法。
②在递归并且使用闭包，调用二分法时，应该注意写函数的出口。
除了一般的出口,递归aa时，也要写return不然函数没有返回值。能console.log正确的结果但却return undefined
return function aa(){
if(...){return ...}
if(...){return ...}
else {return aa()}
}
-
模糊查询
所谓模糊查询就是带有搜索项的某个字，就会被呈现出来。
模糊查询的一些方法：
在这个项目里面我使用的一个比较简单的方法就是str.includes()。它可以把含有 连续查询字符串 的项目都匹配到。
和他相似的，还有startsWith(),endsWith()作用分别是匹配以什么开始，以什么结束的字符串。
在这之前，我是查看这篇文章的，里面还有几个方法的性能比较。https://www.jianshu.com/p/4cd4f74a0b20
-
自定义组件的生命周期
参考的是这篇文章 https://blog.csdn.net/hyupeng1006/article/details/83784197
created: function(){}, // 组件在内存中创建完毕执行
attached: function(){}, // 组件挂载之前执行
ready: function() {}, // 组件挂载后执行
detached: function(){}, // 组件移除执行
moved: function(){}, // 组件移动的时候执行
小程序官网中并没有明确地说明组件的生命周期，通过查阅资料，内容大致如下:
created 组件实例化，但节点树还未导入，因此这时不能用setData
attached 节点树完成，可以用setData渲染节点，但无法操作节点
ready(不是onReady) 组件布局完成，这时可以获取节点信息，也可以操作节点
moved 组件实例被移动到树的另一个位置
detached 组件实例从节点树中移除
-
正确理解flex布局
flex-direction默认为row，主轴为水平方向。其他值还有row-reserve,column,column-reserve
justify-content：主轴方向的排列方式。居中或两端对齐等align-items`:交叉轴方向的排列顺序。
所以不是之前以为的，水平就用justify-content，垂直就用align-items
-
瀑布流布局
实现瀑布流布局有js实现方法，也有纯css实现方法。
这次掌握了两种瀑布流写法
①父：column-count:设列数
column-gap：列间距
子：break-inside：avoid
②flex布局：
父：显式设置盒子高度
flex-direction：column
flex-wrap：wrap
以上两种瀑布流都是按照列先排，第二种方法显式设置高度，会导致每一列的div数不一样。
-
提高体验感的手段
①图片懒加载。在小程序框架直接设置一个属性就可以了。<image lazy-load="true"></image>
②设置一些过渡动画
③设置setTimeout一些延迟函数
网友评论