微信小程序
什么是微信小程序
微信小程序(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