微信小程序-贪吃蛇开发6 画布，Canvas和tapStart、tapMove、tapEnd事件

本系列是作者自学实践过程的记录
本文是页面设计，包含Canvas和触摸开始，触摸移动等触摸事件
有问题欢迎讨论

一、前言，js介绍

// pages/snake/snake.js
Page({

  /**
 * 页面的初始数据，以键值对进行初始化
   */
  data: {
    score: 0, // 当前得分
    maxscore: 100, // 历史最高分
    start_x: 0, // 触摸开始横坐标
    start_y: 0, // 触摸开始纵坐标
    end_x: 0, // 触摸结束横坐标
    end_y:0, // 触摸结束纵坐标

    ground:[] // 存储操场的每个方块
  },

  /**
 * 生命周期函数--监听页面加载，当加载完成后执行的操作，例如获取用户登录数据
   */
  onLoad: function (options) {
  },

  /**
 * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },

  /**
 * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },

  /**
 * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },

  /**
 * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },

  /**
 * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },

  /**
 * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },

  /**
 * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

二、数据绑定

数据绑定是微信小程序非常核心的功能，wxml中所有动态的数据都是由此产生。
数据绑定使用 Mustache 语法（双大括号） 将变量包起来。
形如：

• < view> {{ message }} < /view>，其中，message可以是数值、字符串、布尔等类型

不仅赋值，同时也可以在括号内进行算数运算、逻辑运算、字符串运算（拼接）。
本例中有得分和历史得分两个变量。

wxml如图

显示效果

三、概要设计

3.1 Canvas

学到这里，基本上页面的静态设计已经结束，现在要做的就是加上js使其获得动态改变的效果。
首先，由于是小程序，是需要进行绘制和进行触控事件的，所以我们需要将之前的所有页面嵌套进一个view标签中，然后给定触控事件。
绘制图像的组件叫做画布标签Canvas。
对应属性和使用方法：

属性名	作用
type	指定 canvas 类型
canvas-id	canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性
disable-scroll	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	手指触摸动作开始
bindtouchmove	手指触摸后移动
bindtouchend	手指触摸动作结束
bindtouchcancel	手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	当发生错误时触发 error 事件，detail = {errMsg}
对应API，我们这里需要的是CanvasContext，context是上下文的意思，这个API提供的便是Canvas的上下文内容。目前CanvasContext已经被Canvas 2D取代了。
简单的使用：

  /**
 * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 创建对象
    const ctx = wx.createCanvasContext('canvas')
    // 设置颜色
    ctx.setFillStyle("pink")
    // 绘制一个矩形，前面两个为矩形左上角的横纵坐标，后两个数据是矩形的长和高
    ctx.fillRect(10,10,150,75)
    // 开始绘制
    ctx.draw()
  }

效果：

3.2 事件与行为

定义：

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

使用：

• < view id=“tapTest” data-hi=“Weixin” bindtap=“tapName”> Click me! </ view>，这里事件只需要写名字，和js有区别
• 类似于HTML中的< button onlick = “function()”></ button>，只要发生对应的动作，这个函数事件就会响应

事件分类

类型	触发条件
tap	单击
longpress	长按
dbtap	双击
touchmove	滑动
touchstart	触摸开始
touchend	结束触摸

这样，我们就可以进行触摸事件的添加了。

四、详细设计

4.1 添加开始触摸函数

先在标签内添加触摸开始组件

• < view class=“control” bindtouchstart=“tapstart”>

然后在js里定义tapstart函数，形式为：名称：function(参数) { }

  // 手指触摸开始函数，参数e是event对象，系统自动传回
  tapstart:function(e){
    console.log("开始点击")
    console.log(e)
  }

console.log()是在控制台输出，相当于printf()

运行效果：

这里的e输出的是json数据，，具体内容如图：

这里最主要用到的是touches的属性，我们可以看出它的类型是Array， 包括了横纵坐标，接下来我们要获取它的横纵坐标，我们只需要和获取json数据的方法一样即可。

4.2 触摸移动函数

在标签内添加触摸移动组件：

• < view class=“control” bindtouchstart=“tapstart” bindtouchmove=“tapmove”>

然后在js内部定义tapmove函数

  // 手指触摸移动函数
  tapmove:function(e){
    console.log("move")
    console.log(e)

    this.setData({
      end_x : e.touches[0].pageX,
      end_y : e.touches[0].pageY
    })
  }

运行效果