关于全局变量的使用
关于全局变量的使用
淘宝创意互动项目不支持全局变量,引用时需要开发者修改代码。例如有一个js,里面有一个方法 a:
a.js 中的内容:
var a = function(){
console.log("a")
}
然后我们引用 js,调用该方法,在 H5 上是可以正常输出内容的。
require("a.js")
a(); //a
但是在淘宝创意互动平台上是不支持这种写法的,需要把该方法挂载到全局变量上,修改如下:
a.js 中的内容:
var a = function(){
console.log("a")
}
$global.window.a = a; //必须使用 $global 才能获取全局对象
然后我们引用 js,调用该方法,也要通过全局变量引用
require("a.js")
$global.window.a(); //a
一.第三方库的使用
我们以引入 particle 粒子库为例,说明如何对第三方库进行修改。
1. 我们在 egretProperties.json 中的配置如下:
{
"modules": [
{
"name": "particle",
"path": "libs/particle"
}
]
}
打开项目中的
scrpits/tbgame/tbgame.ts文件,在onFile方法中可以看到,我们给每一个js文件的开头部分都添加一行代码:var global = $global; var window = $global.window; var egret = window.egret;这样每个
js里都可以调用window和egret对象。然后我们将
particle挂载到window对象上:在游戏代码
main.js中添加particle的引用,这样在游戏中就可以正常调用粒子库了:
如果您使用的其他的第三方库,也需要这样配置,否则无法运行
二.关于 EUI 的使用
EUI 是白鹭引擎官方的界面库,因为全局变量的问题,我们在编译的时候对其做了一些处理,使用引擎 5.3.10 版本创建的项目我们已经默认修改好了。下面详细讲一下修改了哪些地方,如果您的其他库中也出现了类似问题,可以参考我们的方法:
1. 挂载全局变量 generateEUI
因为游戏代码中会引用到 eui 里的 generateEUI 方法,所以要将它挂载到全局变量中。打开项目中的 scrpits/tbgame/tbgame.ts 文件,在 onFile 方法中可以看到:
2.在游戏代码中通过全局变量引用 generateEUI
打开项目中的 scrpits/tbgame/tbgame.ts 文件,在 onFile 方法中可以看到:
3. 使用皮肤文件的注意事项
因为全局变量引用的问题,我们在给一个 eui.Component 赋予一个皮肤的时候,不可以用字符串的形式来赋值,必须用对象的方式。
let cp = new eui.Component();
cp.skinName = 'skins.mySkin';// 这种写法不行
cp.skinName = skins.mySkin;// 要使用这种写法
注意: skins 对象之可以使用,是因为我们事先通过全局对象进行了引用,如果您的皮肤类名不在 skins 中,需要您自己添加引用。
打开项目中的 scrpits/tbgame/tbgame.ts 文件,在 onFile 方法中可以看到:
4. exml 中组件的皮肤
在 exml 中的组件也可以赋予皮肤,例如下面这种:
这种情况是无法用对象的方式赋值,我们是通过正则替换的方式来进行修改的。打开项目中的 scrpits/tbgame/tbgame.ts 文件,在 onFile 方法中可以看到:
default.thm.js 是 exml 编译出来的 js 文件,我们将每个赋值给 skinName 的皮肤,都通过 window 对象调用。最终替换的效果如下:

