跳到主要内容

关于全局变量的使用

关于全局变量的使用

淘宝创意互动项目不支持全局变量,引用时需要开发者修改代码。例如有一个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"
}
]
}
  1. 打开项目中的 scrpits/tbgame/tbgame.ts 文件,在 onFile 方法中可以看到,我们给每一个 js 文件的开头部分都添加一行代码:

    var global = $global; var window = $global.window; var egret = window.egret;

    这样每个 js 里都可以调用 windowegret 对象。

  2. 然后我们将 particle 挂载到 window 对象上:

  3. 在游戏代码 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.jsexml 编译出来的 js 文件,我们将每个赋值给 skinName 的皮肤,都通过 window 对象调用。最终替换的效果如下:

5. 同过上述的修改,eui 就可以正常运行了。