微信小程序关于we-cropper框架对各类机型适配问题 - 已解决

这篇文章是针对上一篇文章做出的适配性修改。

上一章剪切头像完整demo下载地址为：https://download.youkuaiyun.com/download/java558/10544752

开始之前，来张美女镇楼：

实践中发现原本的cropper框架在小米手机和华为P10系列/P20系列的剪切头像页面存在着适配问题。

小米手机上表现为宽高多出1-2px的白边；而华为P10系列手机上表现为屏幕内虚拟导航栏下滑隐藏时，会出现白色区域。

经过一系列的修改，终于解决了这些问题，修改的代码为：
1、pages下upload.js中的：

const width = device.windowWidth
const height = device.windowHeight - 50

替换为：

const width = device.windowWidth + 2
const height = device.windowHeight + 50

并且将同文件的：

data: {
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300) / 2,
        width: 300,
        height: 300
      }
    }
  },

替换为：

data: {
    cropperOpt: {
      id: 'cropper',
      width,
      height,
      scale: 2.5,
      zoom: 8,
      cut: {
        x: (width - 300) / 2,
        y: (height - 300 - 48 - 50) / 2,
        width: 300,
        height: 300
      }
    }
  },

2、pages下upload.xml全部替换为以下代码：

<import src="../../we-cropper/dist/weCropper.wxml" />

<view class="cropper-wrapper">
  <template is="weCropper" data="{{...cropperOpt}}">
  </template>
</view>

3、we-cropper资源包下dist文件夹下的weCropper.wxml全部替换为以下代码：

<template name="weCropper">
  <canvas class="cropper" disable-scroll="true" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" style="width:{{width}}px; height:{{height}}px; background-color: rgba(0, 0, 0, 0.8);" canvas-id="{{id}}">
    <cover-view class="cropper-buttons">
      <cover-view class="upload" bindtap="uploadTap">
        重新选择
      </cover-view>
      <cover-view class="getCropperImage" bindtap="getCropperImage">
        确定
      </cover-view>
    </cover-view>
  </canvas>
</template>

至此，上面提到的所有问题都完美解决了，开心~
如果觉得还不错，来波关注呗~