Adapter

The running environment of the mini-game is JavaScriptCore on iOS and V8 on Android. Both are running environments without BOM and DOM, and there are no global document and window objects. Therefore, when you want to use DOM API to create elements such as Canvas and Image, errors will be caused.

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 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 using new Image(), just add the following code.

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

The library that uses wx API to simulate BOM and DOM is called Adapter. As the name implies, this is an adaptation layer for browser-based game engines in the mini-game running environment, so that the game engine will not generate errors when calling DOM API and accessing DOM attributes. Adapter is an abstract code layer, not specifically referring to a third-party library that adapts to mini-games. Each developer can implement the corresponding Adapter according to their own project needs. The official implementation of an Adapter named weapp-adapter provides complete source code for developers to use and reference.

Adapter download address weapp-adapter.zip

weapp-adapter will pre-call wx.createCanvas() 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 so on...

It should be emphasized that weapp-adapter's simulation of the browser environment is far from complete. It only simulates the properties and methods that the game engine may access, and it does not guarantee that all game engines can smoothly and seamlessly access the mini-game through weapp-adapter. Weapp-adapter is directly provided to developers for more reference. Developers can expand on the basis of weapp-adapter as needed to adapt to the game engine used in their own projects.

weapp-adapter is not part of the mini-game basic library. The mini-game basic library only provides wx APIs such as wx.createCanvas and wx.createImage, as well as commonly used JS methods such as setTimeout/setInterval/requestAnimationFrame.

The weapp-adapter on top of this is an adaptation layer to allow third-party code based on the browser environment to adapt to the mini-game running environment more quickly, and is not part of the basic library. More precisely, we regard weapp-adapter and game engine as third-party libraries, which need to be introduced by developers in mini-game projects.