# Adapter

The running environment of the mini game is JavaScriptCore on iOS and V8 on Android, They are all running environments without BOM and DOM, and without global document and window objects. Therefore, when you want to use the DOM API to create elements such as Canvas and Image, an error will be raised.

var canvas = document.createElement('canvas')

But we 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()
        }
    }
}

At this time, the code can create Canvas and Image just like creating elements in a browser.

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

Similarly, if you want to create an Image object by implementing new Image(), you only need to add the following code.

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

The library composed of code that uses wx API to simulate BOM and DOM is called Adapter. As the name implies, this is an adaptation layer for the game engine based on the browser environment under the running environment of the mini game, so that the game engine will not generate errors when calling the DOM API and accessing the DOM properties. Adapter is an abstract code layer, and does not specifically refer to a third-party library that adapts to small games. Every developer can implement the corresponding Adapter according to their own project needs. An Adapter named weapp-adapter is officially implemented, and a complete source code is provided for developers to use and reference.

Adapter download link weapp-adapter.zip

weapp-adapter will call wx.createCanvas() in advance to create an on-screen Canvas and expose it as a global variable canvas.

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

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

-document.createElement -canvas.addEventListener -localStorage -Audio -Image -WebSocket -XMLHttpRequest

• and many more...

It should be emphasized that the simulation of the browser environment by weapp-adapter is far from complete. It only simulates the attributes and methods that the game engine may access and does not guarantee that all game engines can pass the weapp-adapter smoothly. Seamless access to mini games. Provide the weapp-adapter directly to developers, more as a reference, developers can expand on the basis of weapp-adapter as needed to adapt to the game engine used in their projects.

# weapp-adapter is not part of the basic library of mini games

The basic library for mini games only provides wx APIs such as wx.createCanvas and wx.createImage, and commonly used JS methods such as setTimeout/setInterval/requestAnimationFrame. The weapp-adapter on top of this is an adaptation layer that allows third-party code based on the browser environment to adapt to the running environment of the mini game faster, and is not part of the basic library. To be more precise, we regard weapp-adapter and game engine as third-party libraries, and developers need to introduce them in small game projects.