用白鹭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(); // 添加这一行,声明引用
    }

     

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值