Adapter

小遊戲的運作環境在 iOS 上是 JavaScriptCore，在 Android 上是 V8，都是沒有 BOM 和 DOM 的運作環境，沒有全域的 document 和 window 對象。因此當您希望使用 DOM API 來建立 Canvas 和 Image 等元素的時候，會引發錯誤。

var canvas = document.createElement("canvas");

但是我們可以使用 wx.createCanvas 和 wx.createImage 來封裝一個 document。

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

這時程式碼就可以像在瀏覽器中建立元素一樣建立 Canvas 和 Image 了。

var canvas = document.createElement("canvas");
var image = document.createImage("image");

同樣，如果想實現 new Image() 的方式建立 Image 對象，只須添加以下程式碼。

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

這些使用 wx API 模擬 BOM 和 DOM 的程式碼所組成的函式庫稱之為 Adapter。顧名思義，這是對基於瀏覽器環境的遊戲引擎在小遊戲運行環境下的一層適配層，使遊戲引擎在呼叫 DOM API 和存取 DOM 屬性時不會產生錯誤。 Adapter 是一個抽象的程式碼層，並沒有特別指某一個適配小遊戲的第三方函式庫，每位開發者都可以依照自己的專案需求實現對應的 Adapter。官方實作了一個 Adapter 名為 weapp-adapter， 並提供了完整的源碼，供開發者使用和參考。

Adapter 下載位址 weapp-adapter.zip

weapp-adapter 會預先呼叫 wx.createCanvas() 建立一個上螢幕 Canvas，並揭露為一個全域變數 canvas。

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

除此之外 weapp-adapter 也模擬了以下對象和方法：

• document.createElement
• canvas.addEventListener
• localStorage
• Audio
• Image
• WebSocket
• XMLHttpRequest
• 等等...

需要強調的是，weapp-adapter 對瀏覽器環境的模擬是遠不完整的，僅僅只針對遊戲引擎可能訪問的屬性和調用的方法進行了模擬，也不保證所有遊戲引擎都能通過 weapp-adapter 順利無縫接入小遊戲。直接將 weapp-adapter 提供給開發者，更多是作為參考，開發者可以根據需要在 weapp-adapter 的基礎上進行擴展，以適配自己專案使用的遊戲引擎。

weapp-adapter 不是小遊戲基礎庫的一部分。小遊戲基礎函式庫只提供 wx.createCanvas 和 wx.createImage 等 wx API 以及 setTimeout/setInterval/requestAnimationFrame 等常用的 JS 方法。

在此之上的 weapp-adapter 是為了讓基於瀏覽器環境的第三方程式碼更快地適配小遊戲運行環境的一層適配層，並不是基礎函式庫的一部分。更準確地說，我們將 weapp-adapter 和遊戲引擎都視為第三方函式庫，需要開發者在小型遊戲專案中自行引入。