前言
本文章是在最近开发微信小程序的过程中发现的一些问题与优化方案，具有一定的参考意义。
问题一
canvas画布触摸，页面跟随滑动：
<canvas bindtouchstart="canvasBindtouchstart" bindtouchend="canvasBindtouchend" bindtouchmove="canvasBindtouchmove" />
最近开发小程序的时候， 使用到了canvas画布，但是在触摸画布操作图形的过程中发现，手指在画布上移动时，整个页面也会跟随移动，这样就非常影响用户的体验，效果非常不好，而且容易产生误操作。
产生问题的原因
- bindtouchstart 手指按下画布时
- bindtouchmove 手指在画布上上移动时
- bindtouchend 手指离开画布时
这三个方法是官方案例里面使用的，所以当时开发的时候就直接拿来用了，但是这三个方法在页面没有滚动条时，大部分时候是没有问题的，苹果设备除外（因为苹果设备就算页面不能滑动，但是滑动页面的时候，还是可以进行部分的拖动）
这是因为微信小程序的 bind+事件 会导致事件冒泡，那么在画布上移动的时候，页面也会跟随滑动。
解决的方式
微信小程序的 catch+事件 不会导致事件冒泡，使用以下三个函数替换上面的三个方法，解决该问题
<canvas catch:touchstart="canvasBindtouchstart" catch:touchend="canvasBindtouchend" catch:touchmove="canvasBindtouchmove" />
- catch:touchstart 手指按下画布时
- catch:touchmove 手指在画布上移动时
- catch:touchend 手指离开画布时
题外话
上面使用这三个方法可以解决页面跟随滑动的问题，但是要注意页面的代码， bind+事件 传递的event参数中，有x、y这个关键字，但是在 catch+事件的event参数中，是没有x、y这两个关键字的，开发的过程中可以使用 clientX、clientY或者pageX、PageY替代x、y这两个关键字
bind+事件的关键字
catch+事件的关键字
个人建议在开发微信小程序的过程中，尽量不要使用bind+事件,而是使用catch+事件
问题二
scroll-view元素在flex布局时的问题
产生问题的原因
最近在页面中使用 scroll-view元素进行页面开发时，将多个子节点放入到该元素中，使其页面进行横向滚动，但是在页面布局的过程中发现，使用flex布局时，子节点的第一个元素并不在scroll-view元素可视角度的第一个位置，具体效果如下：
解决的方式
经过排产，发现产生该问题的原因是因为使用了flex布局中的样式导致的
- align-content: space-around;
- justify-content: space-around;
将这两个样式移除以后，发现子节点的第一个布局是正常的
题外话
在使用scroll-view时，建议在css部分中添加box-sizing: border-box;属性，这样页面的布局会简单很多。
问题三
微信小程序安卓与苹果的事件回调频率不一致
产生问题的原因
在最近开发canvas的过程中发现，在手指触摸画布，然后触发事件回调时，苹果设备的回调频率相对安卓设备而言要少很多次，打个比方就是：苹果设备在1秒钟的时间内回调了20次触摸事件，而安卓设备会在1秒钟以内回调40——60次触摸事件。
解决问题的方式
在开发的过程中，首先判断用户的设备信息，然后根据设备的不同，配置不同的参数，从而提升用户的使用体验
结语
下面是我平时开发小程序的本地设置
调试基础库这里，建议更新到高版本，百分比最大的基础库。
各位在前端开发的过程中，遇到的问题与优化方案，欢迎在评论区留言，大家一起探讨。
原文链接：https://juejin.cn/post/7324624772978098188 作者：无我Code
