微信小程序开发详解---小知识，大功能【实现按钮的随着手指移动】

一.功能点说明

1. 获取屏幕的宽和高

var windowWidth = wx.getSystemInfoSync().windowWidth;
var windowHeight = wx.getSystemInfoSync().windowHeight;

2.设置图片全屏

wxss设置：width: 100%;height: 100vh;

• 切记height:100%是不可行的，图片加载不出来
• vh和vw：vh等于viewport高度的1/100；vw等于viewport宽度的1/100。了解更多CSS单位

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.screen {
  width: 100%;
  height: 100vh;
}

wxml设置：

<view class="container">
<image class="screen" src="{{imageurl}}"></image>
<view>

3.catchtouchstart，catchtouchmove，catchtouchend和bindtap事件冲突问题

事件绑定的写法同组件的属性，以 key、value 的形式。

• key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本
  1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。

• value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

• bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

更多微信小程序事件处理
因为catch事件绑定可以阻止冒泡事件向上冒泡，所以在执行完catchtouchend之后，阻止了事件向上传递，bindtap就不会执行了，直接catchtouchstart，catchtouchmove，
catchtouchend更换为bindtouchstart，bindtouchmove，bindtouchend即可。
No Code，No Truth。
原代码：

<image class="refresh" src="{{refreshImageUrl}}" bindtap="reloadScreen" catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style='top:{{buttonTop}}px;left:{{buttonLeft}}px;'></image>

修正之后：

<image class="refresh" src="{{refreshImageUrl}}" bindtap="reloadScreen" bindtouchmove="buttonMove" bindtouchstart="buttonStart" bindtouchend="buttonEnd" style='top:{{buttonTop}}px;left:{{buttonLeft}}px;'></image>

4.在方法中获取和赋值data数据

• 在方法中获取data中的数据：this.data.imageurl
• 在方法中设置data中的数据：this.setData({});
• 在子方法【方法中的方法，如setTimeout】中获取和data中的数据：
  （1）在方法中创建一个局部变量，并将this赋值给该变量，如var self = this;
  （2）获取数据：self.data.imageurl
  （3）设置数据： self.setData({ imageurl: tempImageUrl});

data: {
    imageurl: "../../drawable/image1.png",
    buttonTop: 0,
    buttonLeft: 0,
    refreshImageUrl:"../../drawable/refresh.png"
  },
  reloadScreen: function () {
    var self = this;  
    console.log("reloadScreen");
    wx.showLoading({
      title: '图片加载中......',
    })
    var tempImageUrl ;
    if (this.data.imageurl === "../../drawable/image1.png"){
      tempImageUrl = "../../drawable/screen.jpg"
    }else{
      tempImageUrl = "../../drawable/image1.png"
    }
    setTimeout(function () {
      console.log("tempImageUrl:" + self.data.imageurl);
      self.setData({
        imageurl: tempImageUrl
      });
      wx.hideLoading();
    }, 2000)
  },

5.设置一个文件中的全局变量

如果希望一个变量在整个文件中通用，将变量的定义放在Page外面；

var windowWidth;
var windowHeight;
Page({ 
data: {
    imageurl: "../../drawable/image1.png",
    buttonTop: 0,
    buttonLeft: 0,
    refreshImageUrl:"../../drawable/refresh.png"
  },
onLoad: function (options) {
     windowWidth = wx.getSystemInfoSync().windowWidth;
     windowHeight = wx.getSystemInfoSync().windowHeight;
}
  }）

6.按钮随着手指移动

先上效果图

实现原理：其中60是悬浮窗的宽高

buttonStart: function (e) {
    var startPoint = e.touches[0];
    this.setData({
      refreshImageUrl: "../../drawable/refresh_press.png"
    })
  },
  buttonMove: function (e) {
    var endPoint = e.touches[e.touches.length - 1];
    var tempTop = 0;
    var tempLeft = 0;
    console.log("endPoint.clientY:" + endPoint.clientY);
    console.log("endPoint.clientX:" + endPoint.clientX);
    if (endPoint.clientY < 30) {
      tempTop = 0
    } else if (endPoint.clientY > windowHeight-60) {
      tempTop = windowHeight - 60
    } else {
      tempTop = endPoint.clientY - 30
    }
    if (endPoint.clientX < 30) {
      tempLeft = 0
    } else if (endPoint.clientX > windowWidth - 60) {
      tempLeft = windowWidth - 60
    } else {
      tempLeft = endPoint.clientX - 30
    }

    console.log("buttonEnd tempTop:" + tempTop);
    this.setData({
      buttonTop: tempTop,
      buttonLeft: tempLeft
    })
  },
  buttonEnd: function (e) {
    var endPoint = e.changedTouches[0];
    console.log("buttonEnd endPoint.clientY:" + endPoint.clientY);
    console.log("buttonEnd endPoint.clientX:" + endPoint.clientX);
    var tempTop = 0;
    var tempLeft = 0;
    if (endPoint.clientY < 30) {
      tempTop = 0
    } else if (endPoint.clientY > windowHeight - 60) {
      tempTop = windowHeight - 60
    } else {
      tempTop = endPoint.clientY - 30
    }
    if (endPoint.clientX < 30) {
      tempLeft = 0
    } else if (endPoint.clientX > windowWidth - 60) {
      tempLeft = windowWidth - 60
    } else {
      tempLeft = endPoint.clientX - 30
    }
    console.log("buttonEnd tempTop:" + tempTop);
    this.setData({
      buttonTop: tempTop,
      buttonLeft: tempLeft,
      refreshImageUrl: "../../drawable/refresh.png"
    })
  }
  ,

完整代码地址