快速开始安装开发工具

进入开发者工具下载页面，根据您的操作系统下载对应的安装包并安装。

你的第一个微信小游戏

要创建新项目，请选择小程序项目并选择存储代码的硬盘路径。 目前，该小游戏不提供公开注册。 您可以点击以无模式体验小游戏。 给你的项目起一个好听的名字，最后，勾选“创建游戏快速启动模板”（注意：你必须选择一个空目录才能有这个选项），点击确定，你就会得到你的第一个小游戏了。

单击顶部菜单上的“编译”以在 IDE 中预览您的第一个迷你游戏。

真机预览

点击工具上的编译按钮，你可以在工具左侧的模拟器界面中看到这个小游戏的性能。 点击预览按钮，通过微信扫一扫，体验你手机上的第一个小游戏。

文件结构

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

├── game.js └── game.json

game.js 小游戏入口文件 game.json 配置文件配置

小游戏开发者通过在根目录中编写game.json文件来配置它。 开发者工具和客户端需要读取此配置来完成相关的界面渲染和属性设置。

键 数据类型 说明 默认值

支持的屏幕方向

是否显示状态栏

网络请求超时时间，单位：毫秒

。

wx.的超时时间，单位：毫秒

。

wx.的超时时间，单位：毫秒

。

wx.的超时时间，单位：毫秒

。

wx.的超时时间，单位：毫秒

多线程配置项，详细请参考文档

没有任何

数值说明

竖屏

横屏

配置示例

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

编程接口

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

创造

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

var canvas = wx.createCanvas()

此时创建的是上层屏幕，它已经显示在屏幕上，并且与屏幕具有相同的宽度和高度。

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

在整个小游戏代码中，第一次调用 wx.() 创建了上屏幕，后续调用创建了离屏幕。 如果你的项目使用了官方提供的-.js（具体是什么请参考官方教程），那么此时你创建的将会是一个离屏的。 因为wx.()在-.js中被调用过一次，并且返回值被公开为全局变量。 假设您的项目目录结构如下：

├── game.js ├── weapp-adapter.js └── game.json

在-.js中，wx.()被调用一次，返回值作为全局变量公开。

// weapp-adapter canvas = wx.createCanvas()

如果您在 -.js 之后调用 wx.()，则创建的 wx.() 将在屏幕外，因为这不是第一次调用 API。

require('./weapp-adapter') var myCanvas = wx.createCanvas()

画在

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

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

可以通过 .() 方法获取 2d 或渲染上下文，并通过调用渲染上下文的绘图方法来进行绘制。 小游戏基本支持2d和1.0的所有属性和方法，详情请查看。 由于使用的绘制流程比较复杂，因此本文的示例代码均是在2d渲染上下文的绘制方法中编写的。

对象的宽度和高度可以通过设置和属性来改变，但这也会导致内容被清除以及渲染上下文被重置。

canvas.width = 300 canvas.height = 300

显示图像

通过wx.()接口，可以创建一个对象。 该对象可以加载图像。 仅当将对象绘制到图片上时，图片才会出现在屏幕上。

var image = wx.createImage()

设置对象的src属性可以加载本地图片或网络图片。 当图像加载时，注册的回调函数将被执行，并且可以在其上绘制对象。

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

创建多个

整个小游戏运行过程中，第一次调用wx. 界面创建上层屏幕。 你在上面画的任何东西都会显示在屏幕上。 第二次、第三次及后续调用 wx. 都会创建屏幕外的内容。 离屏绘制的内容只绘制在离屏上，不会显示在屏幕上。

以下面的代码为例。 运行后，你会发现屏幕上(0, 0)处没有显示红色矩形。 因为我们是在屏幕外绘画的。

var screenCanvas = wx.createCanvas() var offScreenCanvas = wx.createCanvas() var offContext = offScreenCanvas.getContext('2d') offContext.fillStyle = 'red' offContext.fillRect(0, 0, 100, 100)

为了让这个红色矩形出现在屏幕上，我们需要将屏幕外的部分绘制到屏幕上方。

var screenContext = screenCanvas.getContext('2d') screenContext.drawImage(offScreenCanvas, 0, 0)

动画片

中，动画效果一般是通过//e来实现的。 小游戏提供对这些API的支持：

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

触摸事件

响应用户与屏幕的交互是游戏的重要组成部分。 小游戏提供了以下API来参考DOM来监听触摸事件：

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) })

全局对象

该对象是浏览器环境中的全局对象。 小游戏的运行环境中没有BOM API，因此没有对象。 然而，提供了一个全局对象，所有全局定义的变量都是属性。

console.log(GameGlobal.setTimeout === setTimeout) console.log(GameGlobal.requestAnimationFrame === requestAnimationFrame) // true

开发者可以根据需要挂载自己封装的类和函数。

GameGlobal.render = function () { //省略方法的具体实现... } render()

它是一个全局对象，本身也是一个具有循环引用的对象。

console.log(GameGlobal === GameGlobal.GameGlobal)

.log在真机上无法输出对.log有循环引用的对象。因此，在真机上调试时请注释掉.log()这样的代码，否则会出现这样的错误。

An object width circular reference can't be logged