寺庙点灯小程序

先来说说我做完这个小程序的一些收获吧

• 在设计稿出来之前先不要写样式，按照产品搞写一下大概的dom和交互逻辑就好了
• 做一个项目之前一定要先把这个项目的思路理清然后再开始搭建项目，返工效率真的很低效还很难受
• 换个角度去思考问题很重要，很多时候你觉得这两个冲突了，做不了。但是你换个角度去解决这个冲突，这个问题可能就很容易解决了
• 去网上找一个现成的组件往往能节省很多的时间和精力，但是也不要低估了自己的实现能力
• 接口的数据结构没出来之前，搭建页面的时候先不用写数据接口
• 接口出来之后可以先把接口全部写进api.ts里面，然后接口接收和返回的数据类型就放在server-dto文件里面
• 个人认为小程序好像真的不需要写组件，因为如果项目中如果有相同的组件需要实现的花，只需要把样式写在全局样式就好

难点

小程序的难点是选择位置，类似电影院的选座，但是寺庙点灯的场景会更复杂一些。会出现一个位置占了好几个位置，数据范围也很大，1至400个位置的情况都要覆盖到.还需要放大缩小。

一开始我的实现思路比较简单，放大缩小使用的微信小程序的api，movable-area和movable-view实现选择位置区域放大缩小的功能。然后利用flex布局，遍历数组依次渲染，超过父容器后自动换行。空位利用css渲染成透明颜色。这样实现的效果有一些的问题，比如无法控制每一个列的数量。

改进方法，使用了vant的Grid组件，通过传一个参数去动态的控制每一列的数量。提前计算有多少个位置，然后根据位置的多少分成四种情况，对应四种位置尺寸，让页面看起来更加美观。

思考，怎么去表示一个位置很大，可能会是其他的位置的好几倍。不考虑代码实现的理想方案应该是一个很大特殊位置区域，然后中间有一个可点击的位置。但是代码实现起来有点复杂，并且不能达预期效果，每个位置之间的间隔会有空白。于是我换了一种实现方式，当有特殊位置出现的时候，我会现在当前位置，其他位置都是空白，但是我会在选中的座位表上注明它们占了几排几列。

坑

• van时间选择器安卓bug

在使用vant的时间选择器组件的时候，发现了一个兼容性bug，在ios手机和模拟器上正常，但是在安卓手机上选择时间的会有不规则的动画，并且选择的时候还会有1-2s的延迟。发现在两年前就已经有人github上提出了issue，然后一直都没有人解决。下面有一位网友给出方案是不要bind-input，换成bind-change。但是这样的话还是会有延迟的问题。在选中的时候立即点确定保存的值可能还是上一个的值。最后我决定使用微信小程序官方提供的时间选择器。在默认赋值的时候也出现了问题，因为js的单线程机制，在赋值的时候因为后面的数据都没有渲染出来，到处无法设置默认值。后面我在onload方法上赋值的时候使用了异步解决的这个问题。

• ios部分机型上按钮边框会消失。这个是因为border设置1rpx的宽度，渲染到具体的手机上可能宽度达不到1px，出现小数位的狂赌。安卓会统一向上取整，而ios机型则会向下取整。导致边框消失。最后是通过伪类写200%长和宽，然后再缩小一半。