微信小程序引入组件以及catchtouchmove实现拖动效果

首先我们建一个跟pages同级的一个文件夹components，customer就是我们要写的组件，其目录结构如下：

wxml代码如下：

    <view class='customer' catchtouchmove="setTouchMove" style="top:{{top}}rpx;left:{{left}}rpx">
      <button open-type='contact' class="btn"></button>
      <button type="default" class="btn1" catchtap='phone'></button>
      <slot></slot>
    </view>

wxss代码如下：

.customer {
  position: fixed;
  z-index: 1000;
  width:200rpx;
  height: 200rpx;
}
.btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  padding: 0;
  opacity: 0.8;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAABRCAYAAACqj0o2AAAIpElEQVR4nN2dWYwVRRSGfxoQZV9kB8dRZBMUZAgKihAEA4IaCC5RUdyDQX3wBZ9cHjQxIdEEEncFxAcXNCKCAQFBUJE1IDCAgwuMbDJsIzojmDP8lzRN9VZ9unsyX9KBube7qvtMddWp/5yqqXes/9XIkSYAOgDoBKALgOYAWgK4CEBTAA1dt1YF4DiASgCHARwD8DuAch5/5/UYDXKo83IAVwDoRcM1jXjdhQCa+Xx3FMAeAFsAlAL4VfF+Q8nKiB0BlAAYwP9r05xHL5YrLXQdgB8BHEz74dJ+nXsDGAYgrz7jFIC1AJYD2JFWJWm1RDHaKADdUio/Kg6AgTy2AlgMYLN2JdpGlD7u1hxbXhC9ePwE4AsAf2oVrGnEcQDGKpaXFiU8PgWwSKMODSNK65sEoEihrCwZD6APgPcAHEpSb9KBZQiA+6ScvCyhwD8AZvE1tyJJS5wI4KbaYIWENALwCJ3++TZF2RrxcQD903qqnJA+vTVbZSwci/udWgcNWEC6p4fjXhTXiE+yM67LiE/5aFpGnALgyjpuwAID6HFEImqfODEjB7oawF90hOXf05y61aeiczGA9lR60mYI590LwuqJYsRrUx6FRdbaxLmtKDBHQs53OJKKGtSXb0da09fbqA5tDDopzE+U3/oL6rd2hl0AVtI/+zdBOW0ADAJwY0otVN6OaZTbjIQZ8bkUpKsDAOZRXdHkAgCjAdzM11+TMgAv+5UX9BqMS8GA33DOWhXxfPf9VYecK635c2qI9yorSMUAhgNYavrSryW2A/Ci4k3I4PB2yNRKlOvuAHqwG2nH8AE4wEg4YD+AvQC2A9gZYtgJlOM0eYb3cQ5+RnzapRInRWIirwLY7VOOCBjX04GP06fJyLkGwCoa18QIAHcoGlEawZveD+s/27GD97Pu1AQ1kMn9SxzhvIicfydfvWK2xDg0ZqxmOEfsUsO1ZQxu9VV6nk4cqc8ZZExGfIIPqMErPgaU5v+UUr9Vj7/4axigqvB8v5vdQQ+lZ2oL4Hv3B94Zi1TUWamy931e4TGc/USN8kWlE12RAYbzv6QvqkEvr428RhyjVNFa9lVextGBTROZ915nKP8NACeU6h3t/sFtRGmmPRUqEFdjtuHzYRmGDx4wDIziVs1RKn+AOwbuNuIQpQrmG7IRLgFwt1L5UZliCPavC/AS4uBwllSD24iDEhV7BhkJlxg+f0yh7LjIDOZBwzXzlMovKfynYMQiqrpJWW5wgEdSfcmD3jzcbKPDnpRiztvPGlFLaPUOJg1rQRh1vOGz75TKrrFbwYgas5PdhryXQRZOtDZdAVzmKVNL/KgZiB0+ZFeFArcaPtPoZzXwujyHlV7pS8WGDg2o0Vp2en5uVgtycQqY3jTv/dog40h7R0nuOm0QAXpaRhPToC2FDjflSvV0bKBkxCOMibiRsn+jnNVGoQ5b9lKKa+y5fp9S+TVG1HjAaoNrs5pHQyo5flmuaSK643Sf8pOEJNy0dpQUm8qA76rom+VBkOgQFhCLSguHSeZJqKRiE4RJ68uCoOxY6cM/VLiHJo5LgrflNQB/hFybR0s8wj45iGUAvk5YTxMnoXsj8+SyCOftV+zIo1JKryGMTxiBtKW+GPE/y4urY6aibU9qlZiYnH8/QrMcAjjtJIjRbgsZUEznZ0mcfngD3SAbamYsJy0vjrvgZkeCG41LecxXtNInFhSFKocaoA3egFAYR5UE0SjYdB3nxZMjctyJ+Uq6sZnSZfVK29Rjm3de6QQl6oRgI7RmMbicsvRLbf3lI45hzhuV7hbX7ErQB0elzCKq14ghVxsOOQnUjCIL8aJKSYIKwqa1lzAmY8NeJ8GoBMs8l7SngDZGHJegvnKHUzbboHZhFWkcNkWcSdhQYdHSJwNoZVmfuFEHHEpCYXPMICSePDjG+eWKCoqXPRHyGN1MYDq1LWWFGQtiTpFM3M/srjDNsFNKeTgFJEvsLoMAa+IehfzFGrsVMlE3+4QW43AD0yvWcxuBg0yta8qEzT4+yUaaXMBUuxL6iut9InsSYBqqUO9mtxH3UGVpn7DQxkxH0UpJsaUZF/WYsv6duIt9fCgt+NjuWceajB80TaRBPO/zTA8phUTOlu1OLF9ZSxd9r+KIvo/aZzd6BH6GkOyGuT4DzO3uHJoEVLvzz91GLCzKuUrr6RMic/oZBpflFyrSk/jKFtjKbQl2+VQ7yptXmIDVbs3BuwRjQS0y4nRuzWJC3LK3OJCc5NKOIIVIeyXBQvcPXiOW8ShWrNCGFQEGdDMz5PvmdGX6Kd7bem/OkUnO+kixQlt+UChjIFeEaRoQpvxG04qqXXQN8tyWJcmMRhZM3sIFlNqsMAXc/Jalzc3ZiHHjPq3ozA82pNFpIQrUx6ay/IxYwdd6Yko3FEZRDIluKltf2juizPbTQoMk/sVZ7/7mYmTE84ayBaZtwC1B/XRYnGRmTFVEiy4RtMrOFBvSRmTC14PqCDNiBRfR5MEIan3e+Xw9zs2npbCu2cQMCim+RN2haUwGK6GC2M5RsRFH3axWI8zhiBxI1L0TFvDG81JneigucIzKwigGRMzY8Szv6so6zLI4i4biBuDfVZpN1GaWx81btNkK5R12tBrKcG3jKwCfxb0n2/1kPmDQX/S5ukKkQUTTiOBvTTLzJyukLOdJBWU16417NXY3bsVon9bGG1mygQNmosXkmltED2fE0DYdI0tOUEww7Q4QG809tpYyvDA2ZjA/a5bQB7TNhjuPtDYr704RobaEGsDA0qKE2R5G0trtrZRHMTcOGsgpW9ZUcturFRGWiViT1V/BaMnsh36WeY1xOMXsh43MfrBNI45MHn9KpB1XoPZmfuN5uxtZsJdZHD9TrEi0b3Zc8vhTIrIwSI5v+bNohxKIlx1LWvCQ/B1Z6SVSl6ThFbLX5PWUliWDgsTJJSIo/6b2qoYC4H//Wq/MkWF0wgAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
  background-size: cover;
}
.btn1 {
  margin-top: 20rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  padding: 0;
  opacity: 0.8;
  background-image: url(data:image/png;base64,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);
  background-repeat: no-repeat;
  background-size: cover;
}

.btn::after {
  border: none;
}

js代码如下：

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    top: 800,
    left: 570,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //组件实现拖动效果
    setTouchMove: function (e) {
      var that = this
      if (e.touches[0].clientX < (wx.getSystemInfoSync().windowWidth - 80) && e.touches[0].clientX > 0 && e.touches[0].clientY < (wx.getSystemInfoSync().windowHeight - 120) && e.touches[0].clientY > 0) {
        wx.getSystemInfo({
          success: function (res) {
            let X = (e.touches[0].clientX * (750 / res.windowWidth)); 
            // 将高度乘以换算后的该设备的rpx与px的比例
            let Y = (e.touches[0].clientY * (750 / res.windowWidth)); 
            // 将高度乘以换算后的该设备的rpx与px的比例
            that.setData({
              left: X,
              top: Y
            })
          }
        })

      }
    },
    // 拨打电话组件
    phone() {
     
      wx.makePhoneCall({
        phoneNumber: this.properties.newPhone,
        success: function () {
          console.log("拨打电话成功！")
        },
        fail: function () {
          console.log("拨打电话失败！")
        }
      })
    }
  },

  lifetimes: {
    attached() {
      // 在组件实例进入页面节点树时执行
    },
    detached() {
      // 在组件实例被从页面节点树移除时执行
    },
    created() {

    }
  }
})

至此，组件我们已经写完了，接下来要做的就是在页面引入我们所写的组件。

我们先在要引组件的页面json文件里添加一下组件路径:

{
  "usingComponents": {
    "customer": "/components/customer/customer"
  }
}

然后在要引组件的页面wxml文件里加入这一行代码：

 <customer></customer>

注意：这里的标签名要与json文件里定义的名字一致
到了这一步，我们已经大功告成了。页面效果如下所示：

组件可以实现自由拖动，涉及个人隐私，页面内容打了马赛克。