pixi.js開發微信小遊戲——一個問題的解決

biaoti11

pixi.js 開發微信小遊戲#

我使用的 pixi.js 是 5.2.1 版本的，加載資源的 API 變成了一個全局單例對象 PIXI.Loader.shared

在運行小遊戲項目的時候，加載圖片資源是這樣寫的：

let loader = PIXI.Loader.shared
loader.add('bg', 'static/textures/bg.png');

但是微信開發者工具一直報錯，提示沒有 indexOf 方法，於是開始追蹤報錯信息，定位到報錯棧的上一層，在調用 crossOrigin 方法前有一個 if 判斷

判斷 source 類型，如果不是繼承自 HTMLImageElement ，則會將 source 當做一個字符串，進入到後續方法，並且調用 indexOf 方法報錯

但問題就出在 source 已經是一個 image 對象了，自然沒有 indexOf 方法，所以就報錯了

Untitled

那為啥 instanceof 判斷會失敗了，於是在瀏覽器環境下測試

Untitled 1

控制台輸入下，很明顯返回是 true

Untitled 2

那為啥小遊戲環境下就返回 false 呢，那就估計是 adapter 的問題了

我這裡用的 adapter 是別人重新修改的 @iro/wechat-adapter （微信原來提供的版本有很多問題），發現如下一處代碼寫得有問題：

export class HTMLImageElement extends wx.createImage().constructor {

}

經過我測試發現，wx.createImage().construcotr 本身就已經是 HTMLImageElement , 這裡又多了個 extends ，原型鏈上多了一層，自然就有問題了

不熟悉原型鏈的朋友，可以看下這個圖簡單理解下（我理解的 instanceof 和 extends 本質就是原型鏈的查找）

Untitled 3

所以我們直接改成等於就好，不需要 extends

export const HTMLImageElement = wx.createImage().constructor

如果只是想臨時修改代碼，我們可以 git clone 到本地後，修改代碼，然後在項目的依賴中，指向本地即可：

"@iro/wechat-adapter": "file:/Users/rayepeng/Documents/OpenSource/MyFrontEndCode/wechat-adapter/src/",

這樣就項目就成功運行起來了