tencent cloud

All product documents
Tencent Cloud Super App as a Service
DocumentationTencent Cloud Super App as a ServiceGuildlines for Mini Game DevelopmentGuideRuntimeAdapter
Adapter
Download PDF
Last updated: 2025-02-24 17:10:37
Adapter
Last updated: 2025-02-24 17:10:37
Download PDF
On iOS, the running environment for mini games is JavaScriptCore, and on Android, it is V8. Both environments lack BOM (Browser Object Model) and DOM (Document Object Model), meaning there are no global document and window objects. Therefore, attempting to use DOM APIs to create elements like Canvas and Image will result in errors.
var canvas = document.createElement('canvas')
However, we can use wx.createCanvas and wx.createImage to create a custom document object.
var document = {
    createElement: function (tagName) {
        tagName = tagName.toLowerCase()
        if (tagName === 'canvas') {
            return wx.createCanvas()
        }
        else if (tagName === 'image') {
            return wx.createImage()
        }
    }
}
With this setup, you can create Canvas and Image elements just like you would in a browser environment.
var canvas = document.createElement('canvas')
var image = document.createImage('image')
Similarly, if you want to create an Image object using new Image(), you can add the following code:
function Image () {
    return wx.createImage()
}
These pieces of code that use wx APIs to simulate BOM and DOM are collectively known as an Adapter. As the name suggests, this is a layer that adapts browser-based game engines to run in the mini game environment without errors when calling DOM APIs or accessing DOM properties. Adapter is an abstract layer of code and is not specific to any third-party library for mini games. Developers can implement their own Adapter based on their project needs. The official implementation of an Adapter is called weapp-adapter, and the complete source code is available for developers to use and reference.

Adapter download weapp-adapter.zip
The weapp-adapter pre-calls wx.createCanvas() to create an on-screen Canvas and exposes 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 simulates the following objects and methods:
document.createElement
canvas.addEventListener
localStorage
Audio
Image
WebSocket
XMLHttpRequest
...
It is important to note that the simulation of the browser environment by weapp-adapter is not comprehensive. It only simulates properties and methods that game engines might access and call. It does not guarantee that all game engines can seamlessly integrate with mini games using weapp-adapter. The weapp-adapter is provided to developers more as a reference, allowing them to extend it as needed to fit their specific game engine.

Please note that weapp-adapter is not part of the mini game base library. The mini game base library only provides wx APIs like wx.createCanvas and wx.createImage, as well as common JS methods like setTimeout, setInterval, and requestAnimationFrame.
The weapp-adapter is an adaptation layer to help browser-based third-party code quickly adapt to the mini game environment and is not part of the base library. More accurately, both weapp-adapter and the game engine are considered third-party libraries that developers need to include in their mini game projects.




Was this page helpful?
You can also Contact Sales or Submit a Ticket for help.
Yes
No

Feedback

Contact Us

Contact our sales team or business advisors to help your business.

Contact Us
Technical Support

Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

Submit a Ticket
7x24 Phone Support