# Adapter

The running environment for the Mini Game on iOS is JavaScriptCore and on Android is V8. There are no running environments for BOM and DOM, and there are no global document and window objects. So when you want to use the DOM API to create elements like Canvas and Image, it will incur an error.

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 point, the code can create Canvas and Image as if creating elements in the browser.

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

Likewise, if you want to create an Image object by implementing new Image() , just add the following code.

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

These libraries, which use the wx API to simulate the BOM and DOM code, are called Adapters. As the name implies, this is a layer of adapter to the browser-based environment of the game engine in the Mini Game running environment, so that the game engine will not generate errors when calling the DOM API and accessing DOM attributes. The Adapter is an abstract code layer, and does not specifically refer to a third-party library that adapts to Mini Game. Each developer can implement the corresponding Adapter according to his project needs. The official implementation of an Adapter called weapp-adapter, which provides a complete source code for developers to use and reference.

Adapter Download Address weapp-adapter.zip

The 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 the weapp-adapter is far from complete. It only simulates the properties that the game engine may access and the methods the game engine may call. It does not guarantee that all game engines can use the weapp-adapter to seamlessly access to Mini Game. Providing weapp-adapter directly to developers is more of a reference. Developers can expand on a weapp-adapter basis to adapt to the game engine used in their projects.

# Weapp-Adapter is Not Part of the Mini Game Base Library

Mini Game base library only provides wx APIs such as wx.createCanvas and wx.createImage, and commonly used JS methods such as setTimeout/setInterval/requestAnimationFrame. The weapp-adapter above this is to adapt the third-party code based on the browser environment to the adapter of the Mini Game running environment more quickly, and is not part of the base library. To be more precise, we consider the weapp-adapter and game engine as a third-party library, and developers need to draw them to Mini Game project on their own.

At present, Cocos, Egret, and Laya have completed the adaptation and support of their own engines and their tools for Mini Game. Accessing the corresponding official documents will allow faster access to the development of Mini Game.

• Cocos：https://docs.cocos.com/creator/manual/zh/editor/publish/publish-wechatgame.html
• Egret：https://docs.egret.com/engine/docs/publish/minigame/wechat/tutorial
• LayaBox：https://ldc.layabox.com/doc/?nav=zh-as-5-0-1

Once again, the weapp-adapter is not part of the Mini Game base library. The weapp-adapter will not be updated and maintained officially any longer. Developers should implement their own Adapter based on their own game engine to adapt the game engine to the running environment of Mini Game.