公司开发微信小程序，，pm想实现如下需求：

用手指缩放图片。。。。着实在实现这个需求以前，，并不知道，，微信公众号以及微信小程序内里有一个原生的api就自带这个特效，，并且微信朋侪圈也是用的这个api。。。。wx.previewImage，，就是它。。。。预览图片。。。。除了不可预览开发情形的外地电脑的图片外，，你手机真机的图片，，以及http服务器上的图片都是可以预览的，，并且缩放功效做得很流通。。。。下面就说说怎样用js来实现这个功效吧。。。。

先上源码，，然后在逐步剖析：

Page({
    data: {
        touch: {
            distance: 0,
            scale: 1,
            baseWidth: null,
            baseHeight: null,
            scaleWidth: null,
            scaleHeight: null
        }
    },
    touchstartCallback: function(e) {
        // 单手指缩铺最先，，也不做任那里置
        if(e.touches.length == 1) return
        console.log('双手指触发最先')
        // 注重touchstartCallback 真正代码的最先
        // 一最先我并没有这个回调函数，，会泛起缩小的时间有瞬间被放大历程的bug
        // 当两根手指放上去的时间，，就将distance 初始化。。。。
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
        this.setData({
           'touch.distance': distance,
        })
    },
    touchmoveCallback: function(e) {
        let touch = this.data.touch
        // 单手指缩放我们不做任何操作
        if(e.touches.length == 1) return
        console.log('双手指运动')
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        // 新的 ditance
        let distance = Math.sqrt(xMove * xMove + yMove * yMove);
        let distanceDiff = distance - touch.distance;
        let newScale = touch.scale + 0.005 * distanceDiff
        // 为了防止缩放得太大，，以是scale需要限制，，同理最小值也是
        if(newScale >= 2) {
            newScale = 2
        }
        if(newScale <= 0.6) {
            newScale = 0.6
        }
        let scaleWidth = newScale * touch.baseWidth
        let scaleHeight = newScale * touch.baseHeight
        // 赋值 新的 => 旧的
        this.setData({
           'touch.distance': distance,
           'touch.scale': newScale,
           'touch.scaleWidth': scaleWidth,
           'touch.scaleHeight': scaleHeight,
           'touch.diff': distanceDiff
        })
    },
    bindload: function(e) {
      // bindload 这个api是组件的api类似的onload属性
      this.setData({
          'touch.baseWidth': e.detail.width,
          'touch.baseHeight': e.detail.height,
          'touch.scaleWidth': e.detail.width,
          'touch.scaleHeight': e.detail.height
      })
    }
})

wxml文件对应如下，，就不做诠释了：

<view class="container"> <view bindtouchmove="touchmoveCallback" bindtouchstart="touchstartCallback"> <image src="../../resources/pic/cat.jpg" style="width: {{ touch.scaleWidth }}px;height: {{ touch.scaleHeight }}px" bindload="bindload"></image> </view> </view>