微信小游戏学习（一）

新建项目选择小程序项目，选择代码存放的硬盘路径，并输入 AppId。

你可以前往 小游戏注册 通过注册小游戏帐号来获得 AppId，也可以使用无 AppId 的体验模式。给你的项目起一个好听的名字，最后，勾选“建立游戏快速启动模板”（注意：你要选择一个空的目录才会有这个选项），点击确定，你就得到了你的第一个小游戏了。 

创建一个小游戏，点击顶部菜单编译就可以在 IDE 预览你的第一个小游戏。

目录中必要的两个文件为

├── game.js             小游戏入口文件

└── game.json 配置文件

代码包大小限制，每个小游戏允许上传的代码包总大小为 4MB。

配置

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

deviceOrientation :String类型 支持的屏幕方向,默认portrait

showStatusBar ： Boolean类型 是否显示状态栏，默认false

networkTimeout： Number类型 网络请求的超时时间，单位：毫秒， 默认60000毫秒

networkTimeout.request ：Number类型 wx.request 的超时时间，单位：毫秒， 默认60000毫秒

networkTimeout.connectSocket ： Number类型 wx.connectSocket 的超时时间，单位：毫秒， 默认60000毫秒

networkTimeout.uploadFile ： Number类型 wx.connectSocket 的超时时间，单位：毫秒， 默认60000毫秒

networkTimeout.downloadFile ： Number类型 wx.downloadFile  的超时时间，单位：毫秒， 默认60000毫秒

workers ：String 多线程 Worker 配置项，详细请参考 Worker文档

deviceOrientation

值	说明
portrait	竖屏
landscape	横屏

示例配置

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

wx API微信接口：

通过  Canvas.getContext()  方法可以获取 2d 或 WebGL 渲染上下文  RenderingContext ，调用渲染上下文的绘制方法可以在 Canvas 上

进行绘制。小游戏基本上支持 2d 和 WebGL 1.0 所有的属性和方法，详情请见 RenderingContext。

显示图片

通过 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'

动画

在 JavaScript 中，一般通过 setInterval/setTimeout/requestAnimationFrame 来实现动画效果。小游戏对这些 API 提供了支持：

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

全局对象

window 对象是浏览器环境下的全局对象。小游戏的运行环境中没有 BOM API，因此没有 window 对象。但是提供了全局对象

GameGlobal，所有全局定义的变量都是 GameGlobal 的属性。

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

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

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

render()

GameGlobal 是一个全局对象，本身也是一个存在循环引用的对象。

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

console.log 无法在真机上将存在循环引用的对象输出到 vConsole 中。因此真机调试时请注释 console.log(GameGlobal) 这样的代码

，否则将会产生这样的错误

An object width circular reference can't be logged

音频播放

小游戏内只有一种音频播放的方式，即使用 InnerAudioContext 来播放。

通过 wx.createInnerAudioContext() 接口可以创建一个音频实例 innerAudioContext ，通过这个实例可以播放音频。

var audio = wx.createInnerAudioContext()
audio.src = url // src 可以设置 http(s) 的路径，本地文件路径或者代码包文件路径
audio.play()

在 iOS 系统上，默认遵循静音键设置。如果希望在静音时也能播放声音，可以设置 obeyMuteSwitch为 false
audio.obeyMuteSwitch = false

自动播放和循环播放

设置 autoplay和 loop
 属性可以自动播放和循环播放音频，一般适用于背景音乐。

var bgm = wx.createInnerAudioContext()
bgm.autoplay = true
bgm.loop = true
bgm.src = url

回到前台时恢复背景音乐

当小游戏被隐藏到后台时，所有音频会被暂停，并在回到前台之前都不能再播放成功。

回到前台之后，被暂停的音频不会自动继续播放，如果小游戏有背景音乐的话，需要监听回到前台事件，并在收到回到前台事件

之后

调用背景音乐继续播放。

wx.onShow(function () {
  bgm.play()
})

处理音频中断事件

音频中断事件指的是在游戏期间，音频被系统打断时触发的事件。音频中断事件分为中断开始和中断结束事件，

分别使用 wx.onAudioInterruptionBegin() 和 wx.onAudioInterruptionEnd() 来监听。

以下事件会触发音频中断开始事件：接到电话、闹钟响起、系统提醒、收到微信好友的语音/视频通话请求。被中断之后，

小游戏内所有音频会被暂停，并在中断结束之前都不能再播放成功。

中断结束之后，被暂停的音频不会自动继续播放，如果小游戏有背景音乐的话，需要监听音频中断结束事件，

并在收到中断结束事件之后调用背景音乐继续播放。

wx.onAudioInterruptionEnd(function () {
  bgm.play()
})

如果小游戏的逻辑强依赖音乐的播放，则需要在音频开始中断的时候暂停游戏

wx.onAudioInterruptionBegin(function () {
  // 暂停游戏
})

最佳实践

复用已有的音频实例

对于相同的音效，应该复用已有的音频实例，而不是重新创建一个音频实例。

及时销毁不需要的音频实例

如果一个音频不再需要使用了，可以调用 InnerAudioContext.destroy() 接口提前销毁这个实例。

Android 同时播放的音频数量限制

由于系统限制，在 Android 上最多同时播放 10 个音频，超过的部分会做有损处理，对开发者来说不感知，

但开发者应尽量避免同时播放过多音频。