首页手记微信小游戏开发总结

微信小游戏开发总结

标签：

JavaScript

小游戏是小程序的一个类目，小游戏是微信开放给小程序的更多的能力，让小程序开发者有了开发游戏的能力。小游戏没有WXSS、WXML、多页面等内容，但加了一些渲染、文件系统以及后台多线程的功能。

小游戏的运行环境是小程序环境的扩展，基本思路也是封装必要的 WEB 接口提供给用户，尽可能追求和 WEB 同样的开发体验。小游戏在小程序环境的基础上提供了 WebGL 接口的封装，使得渲染能力和性能有了大幅度提升。不过由于这些接口都是微信团队通过自研的原生实现封装的，所以并不可以等同为浏览器环境。

小游戏的运行环境在 iOS 上是 JavaScriptCore（注：webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。），在 Android 上是 V8 （这个不用多说Node.js目前使用的就是V8）。但是两个都没有 BOM 和 DOM 的运行环境，没有全局的 document 和 window 对象。

小游戏 VS H5游戏 VS 小程序对比图

第三方代码适配（Adapter）

主要目的提供 BOM 和 DOM 的运行环境。

由上图可以看出，因为没有 BOM 和 DOM 的运行环境，没有全局的 document 和 window 对象。为了让基于浏览器环境（上图的H5游戏）的第三方代码更快地适配小游戏运行环境，所以就有了适配器（Adapter）。它是用微信 API 模拟 BOM 和 DOM 的代码组成的库，抽象的代码层，可以根据自己的需要去实现相关方法。

例如，简单实现 document.creatElement 方法：

var document = {    createElement: function (tagName) {
        tagName = tagName.toLowerCase()        if (tagName === 'canvas') {            return wx.createCanvas()
        }        else if (tagName === 'image') {            return wx.createImage()
        }
    }
}

Adapter是否使用由开发者自己决定。不使用Adapter时，可以通过微信提供的API实现相应的方法，但不能使用 DOM API 来创建 Canvas 和 Image 等元素。

有的游戏引擎是直接调用DOM API，和访问DOM属性，所以记得使用Adapter让游戏引擎适配小游戏的运行环境，保证游戏引擎在调用 DOM API 和访问 DOM 属性时不会产生错误。

微信官方实现了一个 weapp-adapter 小游戏适配器，但仅仅只针对游戏引擎可能访问的属性和调用的方法进行了模拟，也不保证所有游戏引擎都能通过 weapp-adapter 能顺利无缝接入小游戏。这里将 weapp-adapter 适配器提供给开发者，更多地是让开发者作为参考，让开发者可以根据需要在 weapp-adapter 的基础上进行扩展，以适配自己项目使用的游戏引擎。weapp-adapter 会预先调用 wx.createCanvas() 创建一个上屏 Canvas，并暴露为一个全局变量 canvas 。

require('./weapp-adapter');var context = canvas.getContext('2d');
context.fillStyle = 'red';
context.fillRect(0, 0, 100, 100);

weapp-adapter 适配器提供了以下对象和方法：

document.createElement
canvas.addEventListener
localStorage
Audio
Image
WebSocket
XMLHttpRequest

其实官方文档里面还有很多，感兴趣可以查看官方 API文档。

小游戏的模块化

小游戏提供了 CommonJS 风格的模块 API，可以通过 module.exports 和 exports 导出模块，通过 require 引入模块。这里就不用多解释了，其实大家按正常的编码习惯编码就可以了。

module.exports = function (canvas, x, y) {    var image = new Image()
    image.onload = function () {        var context = canvas.getContext('2d')
        context.drawImage(image, x, y)
    }
    image.src = 'res/image/logo.png'}

所以小游戏对编码方面的基础能力还是很友善的。