淘宝开放平台

登录
文档中心 > 淘宝购物小程序-开发指引

淘宝购物小程序-开发指引

创意互动项目中关于全局变量的使用

更新时间：2023/02/13 访问次数：7325

淘宝创意互动项目不支持全局变量，引用时需要开发者修改代码。例如有一个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 粒子库为例，说明如何对第三方库进行修改。


我们在 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 里都可以调用 window 和 egret 对象。

2）然后我们将 particle 挂载到 window 对象上：


image.png


3）在游戏代码 main.js 中添加 particle 的引用，这样在游戏中就可以正常调用粒子库了：

image.png


如果您使用的其他的第三方库，也需要这样配置，否则无法运行。


二、关于 EUI 的使用


EUI 是白鹭引擎官方的界面库，因为全局变量的问题，我们在编译的时候对其做了一些处理，使用引擎 5.3.10 版本创建的项目我们已经默认修改好了。下面详细讲一下修改了哪些地方，如果您的其他库中也出现了类似问题，可以参考我们的方法:


1. 挂载全局变量 generateEUI


因为游戏代码中会引用到 eui 里的 generateEUI 方法,所以要将它挂载到全局变量中。打开项目中的 scrpits/tbgame/tbgame.ts 文件，在 onFile 方法中可以看到：


image.png


2.在游戏代码中通过全局变量引用 generateEUI


打开项目中的 scrpits/tbgame/tbgame.ts 文件，在 onFile 方法中可以看到:


image.png


3. 使用皮肤文件的注意事项


因为全局变量引用的问题，我们在给一个 eui.Component 赋予一个皮肤的时候，不可以用字符串的形式来赋值，必须用对象的方式。


let cp = new eui.Component();
cp.skinName = 'skins.mySkin';// 这种写法不行
cp.skinName = skins.mySkin;// 要使用这种写法


注意： skins 对象之可以使用，是因为我们事先通过全局对象进行了引用，如果您的皮肤类名不在 skins 中，需要您自己添加引用。

打开项目中的 scrpits/tbgame/tbgame.ts 文件，在 onFile 方法中可以看到:


image.png


4. exml 中组件的皮肤


在 exml 中的组件也可以赋予皮肤，例如下面这种：


image.png


这种情况是无法用对象的方式赋值，我们是通过正则替换的方式来进行修改的。打开项目中的 scrpits/tbgame/tbgame.ts 文件，在 onFile 方法中可以看到：


image.png


default.thm.js 是 exml 编译出来的 js 文件，我们将每个赋值给 skinName 的皮肤，都通过 window 对象调用。最终替换的效果如下：


image.png


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


FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部