Adapter

In iOS, the Mini Game runtime environment is JavaScriptCore, and it is V8 in Android. Neither of these environments support BOM or DOM, and they do not have global document and window objects. Therefore, if you want to use DOM APIs to create a canvas, image, or other elements, an error will be reported.

var canvas = document.createElement('canvas')

However, you can use wx.createCanvas and wx.createImage to encapsulate a document.

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

This way, the code can create canvases and images just like elements are created in a browser.

var canvas = document.createElement('canvas')
var image = document.createImage('image')

Likewise, if you want to implement the new Image() method to create an image object, you must add the following code.

function Image () {
    return wx.createImage()
}

These libraries that are composed by using wx APIs to simulate BOM and DOM code are called adapters. As the name implies, this is an adaptation layer in the Mini Game runtime environment for browser environment-based game engines. This layer ensures that the game engine does not produce an error when calling DOM APIs or accessing DOM properties. An adapter is an abstract code layer. It does not specifically refer to a third-party library that adapts to Mini Games. Each developer can implement the appropriate adapter for their product needs. The officially implemented Adapter is called weapp-adapter. It provides the complete source code and can be used and referenced by developers.

Adapter download address weapp-adapter.zip

weapp-adapter pre-calls wx.createCanvas() to create an on-screen canvas, which is exposed as a global variable canvas.

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

In addition, the weapp-adapter simulates the following objects and methods:

  • document.createElement
  • canvas.addEventListener
  • localStorage
  • Audio
  • Image
  • WebSocket
  • XMLHttpRequest
  • and more...

It must be emphasized that the browser environment simulated by the weapp-adapter is far from complete. It only simulates the properties and methods that may be used by the game engine. We cannot guarantee that all game engines can smoothly and seamlessly access Mini Games through the weapp-adapter. The weapp-adapter is provided to developers more as a reference. Developers can extend the weapp-adapter as needed to suit the game engines used for their projects.

weapp-adapter Is Not Part of the Mini Game Base Library

The Mini Game base library only provides wx.createCanvas, wx.createImage, and other wx APIs along with setTimeout, setInterval, requestAnimationFrame, and other common JS methods. On this basis, the weapp-adapter is an adaptation layer that allows browser environment-based third-party code to more quickly adapt to the Mini Game environment. It is not a part of the base library. It would be more accurate to say that weapp-adapter and the game engine are both third-party libraries that must be introduced by the developer in the Mini Game project.