如何通过手势实现微信小程序放大缩小？

　　在使用小程序的时候，由于开发者的原因，有时候小程序页面会出现图片或字体太小而看不清，这时候就需要对小程序页面进行微信小程序放大缩小的调整。具体的放大或缩小的调整要怎么操作呢?小编今天会为大家讲解一下通过手势来达到微信小程序放大缩小。

　　大众比较熟悉的手势是类似 app 中的双指缩放，我们的目标也是在小程序中实现此效果。小编在仔细研究微信小程序的所有小程序事件后发现，可以通过 touchmove 事件来实现双指缩放图片。

　　此技术的核心思想是根据两只手指相对距离的变化来对图片进行放大或缩小。因此只要能知道两只手指相对距离的变化，并能做到对图片的动态缩放，就能实现我们想要的功能。在手指接触到屏幕并开始移动后，对应的小程序组件上就会以约为 16ms(屏幕渲染频率) 一次的速度不断触发 touchmove 事件，最后手指离开屏幕后，则会触发 touchend 事件。touchmove 事件所包含的事件对象中有一个 touches属*，此属*为当前停留在屏幕中的触摸点信息的数组。

　　触摸点的信息包括identifier(触摸点的标志符)、pageX / pageY(距离文档左上角的距离)、clientX / clientY(距离屏幕可显示区域左上角距离)。通过 clientX / clientY 可确定手指在屏幕上的位置。xMove = e.touches[1].clientX - e.touches[0].clientX;yMove = e.touches[1].clientY - e.touches[0].clientY;distance = Math.sqrt(xMove xMove + yMove yMove);

　　distance 即为两只手指之间的距离。将此距离储存下来，下一次 touchmove 被触发的时候，再计算一次 distance。distanceDiff(newDistance - oldDistance) 即为两次 touchmove 触发的间隔间两个手指相对距离的变化值。

　　此值为正数时，表示两指间距离在变大，即需要放大图片，反之则为需要缩小图片。下面则需要确定一个规则，将 distance 的变化值与图片放大或缩小的变化率关联起来。我们将图片正常显示时的尺寸定为基准值，即 baseWidth 和 baseHeight，图片需要放大的倍数为 scale，scale 的初始值和最小值为 1，最大值可根据需要来设置。爱范儿工程师经过多次试验，确定了一个公式：newScale = oldScale + 0.005 * distanceDiff

　　此公式中的 0.005 为图片的缩放比例。在实测中，使用 0.005 这个值可获得比较良好的缩放体验。通过上面的步骤，图片上绑定 touchmove 事件后，每次 touchmove 被触发后，我们都可以计算出新的图片需要被放大的倍数 scale。即每次 touchmove 被触发后，都可以得到一组图片被放大后的高宽值：scaleWidth(scale baseWidth)、scaleHeight(scale baseHeight)。通过下面的方式就可以实现动态的更改图片的高宽

　　实现了图片的缩放之后，还需要一个容器存放图片，用 view 组件包裹 image，并设置 overflow:scroll，即可以做到自由的缩放和浏览图片。但是微信小程序中有一个更合适的组件：scroll-view，设置 scroll-x 和 scroll-y 为 true，在放大图片后，滑动浏览图片时拥有比较良好的浏览体验。但是，目前版本(0.10.102800)中的 scroll-view 组件还存在一个渲染上的 bug，偶尔会出现界面闪动的现象。

　　而在双指缩放存在于scroll-view 中的图片，极易触发此 bug。此问题，暂时只能等待微信进行修复，或者放弃 scroll-view，即放弃更好的滑动浏览效果，而使用小程序view排版组件。

　　以上就是通过手势达到微信小程序放大缩小的全步骤，是不是很简单呢?其实大家在操作成功之后会发现小程序使用起来体验更好了!所以赶紧试试看吧!微信小程序商店会为大家提供更多实用的资料。

　　如何判断小程序地图是放大或缩小?

　　微信小程序地图不放大怎么办?小程序地图怎么实现放大?

　　小程序又放大招，微信小程序开发者可获取群ID了