用白鷺Egret開發微信小遊戲引用第三方庫p2提示"p2 is not defined "分析及解決方案

Egret引擎版本:5.2.27    微信開發者工具:1.02.1907300    解決日期:2019年9月17日

速覽解決方案可直接翻至文章結尾,隨着時間的推移代碼邏輯發生變化本文提供的思路和解決方案可能不再適用,請酌情參考

目錄

問題表現:

原因分析及解決方案:

1.沒有生成physics.js

2.有physics.js仍提示錯誤

解決方案速覽


問題表現:

Wing內編譯正常,但是在微信開發者工具內運行console會提示"p2 is not defined "

 

原因分析及解決方案:

提示"p2 is not defined "時,我遇見了兩種表現,一種是微信小遊戲項目內js文件夾內無physics.js,另一種是有該文件夾但是還會報錯,那麼分情況分析:

1.沒有生成physics.js

使用Egret開發首先就要配置 egretProperties.json 文件,在modules下配置需要引用的第三方庫,這裏引用官方文檔的說明:

每一個庫都是形如 { "name":"moduleName" , "path":"modulePath"} 的配置格式。
name 字段是庫名,path 字段是庫文件存放路徑,

path 字段中可以包括庫文件版本號

path 字段所對應的路徑可能在項目中,也可能在項目外。

如果在項目中,項目運行時直接加載此路徑所對應的庫。
如果在項目外,引擎編譯時會首先將此路徑所對應的庫拷貝至項目中的 libs/modules 文件夾中,然後加載該文件夾中的庫。

來源:http://developer.egret.com/cn/github/egret-docs/Engine2D/projectConfig/configFile/index.html

在Egret官方的第三方庫Demo(https://github.com/egret-labs/egret-game-library/tree/master/physics)中,physics庫是放在項目外的,這裏就和官方文檔中提到的加載方式對應上了,引擎會在編譯時把項目外的庫拷貝到項目內的libs/modules 文件夾中,所以可以在egretProperties.json中配置:

{
    "name": "physics",
    "path": "../libsrc"
}

編譯項目則可生成physics.js文件。如果已經添加過庫的童鞋可以在終端輸入 egret clean,可以清除掉libs文件下所有引用的庫重新添加,同時更新根目錄下的manifest.json,重新編譯即可

2.有physics.js仍提示錯誤

當編譯完成後,雖然微信小遊戲項目中出現了js文件,單仍然提示not defined ,是因爲雖然項目中有文件了,但是還沒有聲明引用,所以還需要在js文件中聲明window.p2纔可以聲明使用,說到這裏就要提一下Egret項目目錄\scripts\wxgame\wxgame.ts這個文件了,仔細閱讀會發現,這裏在導出官方庫時進行了處理,在文件的末尾加了一句";window.xx = xx;"在導出到微信小遊戲項目的js文件末尾也確實發現了添加的這行代碼

    async onFile(file: plugins.File) {
        if (file.extname == '.js') {
            const filename = file.origin;
            if (filename == "libs/modules/promise/promise.js" || filename == 'libs/modules/promise/promise.min.js') {
                return null;
            }
            if (filename == 'libs/modules/egret/egret.js' || filename == 'libs/modules/egret/egret.min.js') {
                let content = file.contents.toString();
                content += `;window.egret = egret;`;
                content = content.replace(/definition = __global/, "definition = window");
                file.contents = new Buffer(content);
            }
            else {
                let content = file.contents.toString();
                if (
                    filename == "libs/modules/res/res.js" ||
                    filename == 'libs/modules/res/res.min.js' ||
                    filename == 'libs/modules/assetsmanager/assetsmanager.min.js' ||
                    filename == 'libs/modules/assetsmanager/assetsmanager.js'
                ) {
                    content += ";window.RES = RES;"
                }
                if (filename == "libs/modules/eui/eui.js" || filename == 'libs/modules/eui/eui.min.js') {
                    content += ";window.eui = eui;"
                }
                if (filename == 'libs/modules/dragonBones/dragonBones.js' || filename == 'libs/modules/dragonBones/dragonBones.min.js') {
                    content += ';window.dragonBones = dragonBones';
                }
                content = "var egret = window.egret;" + content;
                if (filename == 'main.js') {
                    content += "\n;window.Main = Main;"
                }
                file.contents = new Buffer(content);
            }
        }
        return file;
    }

我在期初遇見這個問題的時候在網上搜索其他人的解決方式,也遇見有人說,可以在這個文件中添加導出處理就可以解決問題:

if (filename == 'libs/modules/physics/physics.js' || filename == 'libs/modules/physics/physics.min.js') {
    content += 'window.p2 = a();';
}

然而不知道是不是回+答者當時的physics.js版本和目前我使用的版本內容不同,現在使用這種方式導出文件,會使導出的physics.js存在語法錯誤而編譯失敗,而目前我使用的p2庫已不能這樣修改,正確的修改方式是:在\libs\modules\physics\physics.js文件開頭添加一行代碼:

!function (a) { if ("object" == typeof exports)
{
    module.exports = a();
    window.p2 = a(); // 在這裏聲明引用
}
else if ("function" == typeof define && false)
    define(a);
else {
    var b;
    "undefined" != typeof window ? b = window : "undefined" != typeof global ? b = global : "undefined" != typeof self && (b = self), b.p2 = a();
} }

再次導出就可以正常編譯使用p2庫

 

解決方案速覽

  1. 將第三方庫(地址)放在Egret根目錄外同級目錄
  2. 配置egretProperties.json如下
    ​{
        "name": "physics",
        "path": "../libsrc"
    }

     

  3. 執行egret clean清理已引用的庫,重新編譯生成libs\modules文件夾下的的庫文件
  4. \libs\modules\physics\physics.js 內添加一行聲明代碼
    !function (a) { if ("object" == typeof exports)
    {
        module.exports = a();
        window.p2 = a(); // 添加這一行,聲明引用
    }

     

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章