微信小程序进阶篇

最新推荐文章于 2024-05-11 00:01:05 发布

deepquiet

最新推荐文章于 2024-05-11 00:01:05 发布

阅读量7.2k

点赞数 2

文章标签：微信程序开发

本文链接：https://blog.csdn.net/deepquiet/article/details/72811880

版权

微信小程序

什么是微信小程序
微信小程序（weixinxiaochengxu），简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
什么产品可以使用小程序
由于小程序不需要下载，占用内存小，用户体验优秀，一些使用频率低的应用可以使用小程序。
微信小程序的开发准备
1.微信小程序开发API介绍文档链接
微信小程序开发API
2.微信注册账号（个人账号就可以开发）
3.小程序开发工具
开发工具下载地址以及介绍
APPID注册地址
APPID注册

基本的项目结构介绍

1.三个全局文件

app.js
程序启动时执行的文件，程序一旦启动就执行App()函数
app.json
规定了显示的页面（.wxml 文件，类似于html），按照循序来显示，以及标题栏的样式等，如果别的页面没有定义json则用此文件
app.wxss
页面布局样式，如果别的页面没有定义wxss则用此文件

2.一个文件夹包括一个完整页面信息

3.一个warning:项目路径必须是英文，但项目名称可以是中文

这里写图片描述

项目介绍

贪吃蛇小游戏，蛇可以根据手指指定的方向移动，吃到食物则累计加分，分数越高，长度越长，速度越快，直到碰壁或者得分超过3000，游戏停止。

用到的组件以及API

具体应用代码后续有说到

canvas

这里写图片描述

wx.getSystemInfo(OBJECT)

这里写图片描述

wx.showToast(OBJECT)

这里写图片描述

wx.showModal(OBJECT)

这里写图片描述

wx.navigateBack(OBJECT)

这里写图片描述

步骤

1.画一个背景，背景色为鹅黄色
用组件画布画了一个背景，绑定事件bindtouchstart,bindtouchmove

<canvas canvas-id="snakeCanvas" style="width:100%; height:100%; background-color:#FFFFCC;" bindtouchstart="canvasStart"  bindtouchmove="canvasMove"/>

这里写图片描述

实现绑定事件，确定手指滑动到的位置以及方向

// 手指开始位置
var startX = 0;
var startY = 0;

// 手指移动路径
var moveX = 0;
var moveY = 0;

// 差值
var X = 0;
var Y = 0;

canvasStart:function(e) {
   

      //初始坐标
      startX = e.touches[0].x;
      startY = e.touches[0].y;
  },
  canvasMove:function(e) {
   
    moveX = e.touches[0].x;
    moveY = e.touches[0].y;

    X = moveX - startX;
    Y = moveY - startY;

    if(Math.abs(X) > Math.a