个人项目总结：微信小程序订餐小程序的开发

在2023年，我开始尝试微信小程序的开发，包括在2023年上半年开发的饮品点餐小程序和记事本小程序，2023-2024开发的单词打卡小程序等。由于当时写的博客水平比较低，所以打算用这几天考研后的时间重写一下。其中我认为点餐小程序和记事本小程序是其中最具有代表性的项目，所以会重点记录一下这两个项目的核心内容。

一、订餐小程序的核心

订餐小程序最核心的页面就是点餐页面。 最上面的菜单比较简单，用一个swiper存放菜单栏，并且将swiper的位置作为参数导出控制菜单栏的高亮显示即可。但下面的旋转配料栏相对复杂一些，要求是配料栏可以旋转，并且将配料拖拽到中心的购物车图标时为点餐成功。这样一个复杂的操作要求配料栏是可以拖拽的，并且还要判断拖拽的方向。

二、配料元素的转动实现

首先是每个配料单元如何显示的问题。因为配料表有旋转的功能，所以给每个配料表元素设置position:absolute是看到不行的，这样配料表就不会有连续旋转的动画。由于配料表大致是按照一个圆弧旋转的，所以可以先把屏幕的正下方设置为旋转轴，再令旋转轴到配料表元素的距离固定，就可以通过角度这个唯一的参数控制所有的配料元素旋转。

然后是配料单元的调整。由于每个配料单元的大小是不一样的，所以可以根据角度写一个函数，通过transform:scale控制配料单元的大小，这样就可以让配料元素随用户的滑动自然切换大小了。当然，由于配料元素是按枢轴旋转的，元素中的图片和内容也会旋转，因此还需要对元素内部进行一个

接下来是单元的切换问题。由于配料菜单在旋转时新的单元会从两侧暴露出来，并且配料菜单在旋转完会在另一个位置停下来，此时需要更新每个位置上的配料内容。首先为了解决旋转时出现的新配料元素，可以不仅仅在页面下方设置可视的5个配料元素，而是需要在不可视的空间内多设置一些元素，当用户旋转转盘时将其变为可视元素。在本项目中，考虑到用户可能使用的最大角度，我设置了共计11个配料元素，保证用户在旋转配料表时不会出现空缺或卡顿。

单元的切换会带来另外一个显示的问题。如果一个饮品菜单的配料种类很少，那么在配料表转到两端的时候，会因为元素不够而显示空白。解决方案是将数组修改为一个逻辑上的双向循环队列，当配料元素不够用的时候，就从队列的另一端取元素补充到空位上，这样就避免了配料表只能在有限范围内旋转的问题，提高了用户的使用体验。

最后是配料元素如何平滑旋转的问题。虽然经过以上的步骤，已经可以实现配料元素的旋转展示，但这并不符合实际情况，例如显示在屏幕中的五个配料元素就不是按照角度线性均匀分布的，而是存在一定的变形。因此我取出了五个已经定好了位置的坐标，求出了它们关于坐标确定的模拟函数，用二次函数就可以解决。将这个函数代替线性旋转的位置，就可以实现配料元素相对平滑地运动。

三、配料元素的拖动实现

在这个功能的实现中，首要的问题是如何判断用户是想旋转，还是想添加配料。此时需要判断用户点击配料元素后拖动的角度问题。以配料元素旋转的轴心作为判据，使用JS Math模块的三角函数可以判断用户的拖动方向更接近切线还是更接近半径方向。最后根据实验，如果用户拖动方向与切线方向小于30度时判定为转动配料转盘，否则判定为拖动配料元素到中心。这一判定使用bindtouchstart和bindtouchmove实现，由于bindtouchstart获得用户点击时鼠标的坐标，将其作为基准坐标，就可以在bindtouchmove时获取的坐标得到差值，并使用transform:translate属性调整配料元素的拖动位置。最后，通过bindtouchend属性获取用户松开的位置，只需要判断其是否在中心区域，来确定接下来的动画。

四、更好的动画切换

当用户成功拖动配料元素后，对最终的坐标进行判断：首先需要建立一个计时器自动实现动画，对于配料表的旋转动画，由于用户拖动后配料列表不可能回到完全一样的位置上，所以需要做一个补间动画，找到离拖动后位置最接近的一个起始位置，让列表自动旋转回原来的位置。

对于拖动动画，如果已经拖到中心区域，则控制接下来的动画让配料元素慢慢变小，当配料元素的大小为零时，重新调整大小回到原位；如果没有拖到中心区域，则对元素现在的位置和原位置做补间动画，通过计时器不断遍历将元素的位置调整回原位。当元素运动结束时，删除计时器。

最后，为了避免冲突，不论何种情况，只要用户再次进行一个新的拖动，则当前动画直接结束。

五、改进措施

一开始，对于用户拖动元素的检测使用了bindtouchstart和bindtouchmove，经过后续的学习，用不冒泡的catchtouchstart和catchtouchmove也可以完成需求，因为项目并没有要求对上级冒泡。