微信小程序 快速开始

来源，官方文档

https://mp.weixin.qq.com/debug/wxagame/dev/index.html

  先下载开发工具，使用最新版的微信web开发工具，根据平台下载安装即可，下载地址：https://mp.weixin.qq.com/debug/wxagame/dev/devtools/download.html?t=201812

    接下来启动微信开发者工具，新建小程序项目，选择代码存放的硬盘路径。 由于目前小游戏不提供公开注册，先使用无 AppID 模式。 给项目起个名字，最后，勾选“建立游戏快速启动模板”（注意：你需要选择一个空的目录才会有这个选项），点击确定，就可以开始体验了，模板项目是一个打飞机游戏。 

  点击顶部菜单编译就可以在 IDE 预览小游戏,如图。

文件结构

  小游戏只有以下两个必要文件：

  game.js 小游戏主程序入口

  game.json 配置文件

主要配置项

  游戏小程序开发者通过在根目录编写一个 game.json 文件进行配置，开发者工具和客户端需要读取这个配置，完成相关界面渲染和属性设置。

• deviceOrientation:landscape（横屏）/portrait（竖屏）

• showStatusBar:是否显示状态栏,默认false

• networkTimeout:网络请求的超时时间，单位：毫秒,默认60000

• networkTimeout.request:wx.request 的超时时间，单位：毫秒,默认60000

• networkTimeout.connectSocket:wx.connectSocket 的超时时间，单位：毫秒,默认60000

• networkTimeout.uploadFile:wx.uploadFile 的超时时间，单位：毫秒,默认60000

• networkTimeout.downloadFile:wx.downloadFile 的超时时间，单位：毫秒,默认60000

• workers:多线程 Worker 配置项，详细请参考 Worker文档,默认无

示例配置

{  "deviceOrientation": "portrait",
"networkTimeout": {    "request": 5000,    "
connectSocket": 5000,    "
uploadFile": 5000,    "
downloadFile": 5000
  }
}

环境

  开发者只能使用 JavaScript 来编写小游戏。小游戏的运行环境是一个 绑定了一些方法的 JavaScript VM。不同于浏览器，这个运行环境没有 BOM 和 DOM API，只有 wx API。接下来我们将介绍如何用 wx API 来完成创建画布、绘制图形、显示图片以及响应用户交互等基础功能。

创建 Canvas

  调用 wx.createCanvas() 接口，可以创建一个 Canvas 对象。

var canvas = wx.createCanvas()

  此时创建的 canvas 已经显示在了屏幕上，且与屏幕等宽等高。

console.log(canvas.width, canvas.height)

  但是由于没有在 canvas 上进行绘制，所以 canvas 是透明的。使用 2d 渲染上下文的进行简单的绘制，可以在屏幕左上角看到一个 100x100 的红色矩形。

var context = canvas.getContext('2d')
context.fillStyle = 'red'
context.fillRect(0, 0, 100, 100)

  通过 Canvas.getContext() 方法可以获取 2d 或 WebGL 渲染上下文 RenderingContext，调用渲染上下文的绘制方法可以在 Canvas 上进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法，详情请见 RenderingContext。由于使用 WebGL 的绘制过程较为复杂，所以本文中的示例代码都以 2d 渲染上下文的绘制方法编写。

  通过设置 width 和 height 属性可以改变 Canvas 对象的宽高，但这也会导致 Canvas 内容的清空和渲染上下文的重置。

canvas.width = 300
canvas.height = 300

图片

  通过 wx.createImage() 接口，可以创建一个 Image 对象。Image 对象可以加载图片。当 Image 对象被绘制到 Canvas 上时，图片才会显示在屏幕上。

var image = wx.createImage()

  设置 Image 对象的 src 属性可以加载一张本地图片或网络图片，当图片加载完毕时会执行注册的 onload 回调函数，此时可以将 Image 对象绘制到 Canvas 上。

image.onload = function () {
    console.log(image.width, image.height)
    context.drawImage(image, 0, 0)
}
image.src = 'logo.png'

动画

  开发小游戏的时候，可以通过下面的方法来实现动画效果：

setInterval()
setTimeout()
requestAnimationFrame()
clearInterval()
clearTimeout()
cancelAnimationFrame()

  另外，还可以通过 wx.setPreferredFramesPerSecond() 修改执行 requestAnimationFrame 回调函数的频率，以降低性能消耗。

触摸事件

  响应用户与屏幕的交互是游戏中必不可少的部分，小游戏参照 DOM 中的 TouchEvent 提供了以下监听触摸事件的 API：

wx.onTouchStart()
wx.onTouchMove()
wx.onTouchEnd()
wx.onTouchCancel()
wx.onTouchStart(function (e) {
    console.log(e.touches)
})

wx.onTouchMove(function (e) {
    console.log(e.touches)
})

wx.onTouchEnd(function (e) {
    console.log(e.touches)
})

wx.onTouchCancel(function (e) {
    console.log(e.touches)
})