文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

使用 LayaAir 引擎创建一个淘宝创意互动项目

更新时间：2024/08/02 访问次数：12751

一、开发环境准备

 

1. 注册商家应用账号；

2. 用户授权，用户信息等系统功能，请调用平台提供的 API。请查看平台 API 说明；

3. LayaAir 引擎版本 2.8.0 以上；

4. LayaAir IDE 版本 2.8.0 以上。

 

下载并安装LayaAirIDE集成开发环境

LayaAirIDE是LayaAir引擎的集成开发环境，集成了LayaAir引擎与示例项目，UI、动画等可视化编辑，项目代码编写与管理等开发工具。在 LayaAirIDE_2.8.0?以后的版本开发者可以发布【淘宝创意互动项目】。

IDE的下载地址：

【LayaAir 官网下载最新 LayaAir IDE?】：https://ldc2.layabox.com/layadownload/?type=layaairide-LayaAir

 

下载并安装淘宝创意互动开发者工具

开发者工具主要用于淘宝创意互动产品的预览与调试、真机测试、上传提交等，是开发的必备工具。

开发工具下载地址：点击此处访问。

 

二、创建并编译打包

 

1. 1.0 引擎需要手动自己初始化淘宝创意互动适配库，在引擎初始化之前加上适配代码 ：

 

as3: TBMiniAdapter.init();  
js或ts：Laya['TBMiniAdapter'].init();

 

2. 2.0 以上的引擎已经不需要做适配操作，只需将编译好的项目发布时候选择淘宝创意互动项目即可。

如图点击红色小方块发布按钮，在发布平台栏目选择淘宝创意互动项目。

 

image.png

 

3. 配置好发布需要的内容后。最终点击发布。即可生成淘宝创意互动项目。

4. 项目结构:

 

image.png

 

项目名称

说明

app.css

应用的全局样式文件，一般不需要修改。查看详细说明。

app.js

注册应用，获取应用的启动、显示、隐藏等消息。查看详细说明。

app.json

应用的配置文件。查看详细说明。

mini.project.json

用于配置项目用到的文件格式，如果用到了特殊的文件格式，需要在这配置。

node_modules/layaengine

导出项目所使用到的 Layaair 引擎。

pages/index 文件夹

导出后，开发者的资源与项目JS，位于的淘宝创意互动的 pages/index/ 目录下：

1）game.axml：入口的页面结构；

2）game.json：界面相关json；

3）game.js: 入口类；

4）tools 文件夹：一些工具类，不要修改；

5）其他与开发者 bin 目录下保持一致。

 

三、使用开发者工具打开项目

 

1. 创建项目

打开”小程序开发者工具“，在弹出的面板里，选择 “淘宝” => "商家应用"。并且点击页面右上角的 "打开项目"选项。

 

image.png

 

在弹出的页面中选择刚才发布的淘宝创意互动项目路径，选择好目录后如下图所示：

 

image.png

 

2. 小程序开发者工具的编译

完成小游戏项目的创建后，并且 “关联商家应用“ 即可在工具内预览效果和调试。

 

image.png

 

点击【真机调试/预览】，用淘宝App扫描弹出的二维码可以真机预览效果：

 

image.png

 

更多关于开发工具的详情请访问：官方地址。

 

四、注意事项

 

1. 目前淘宝创意互动不支持ES6以上的代码，所以必须勾选ES6转ES5（或者开发者自行进行转换）。

2. 加载的本地资源时默认的根目录为导出时的目录，即 pages/index 目录。开发者可以通过 Laya.TBMiniAdapter.baseDir 修改。

 

//修改本地资源的目录为淘宝创意互动项目根目录
Laya.TBMiniAdapter.baseDir = "";

 

3. 没有全局作用域 window ，需要使用 $global.window。

4. 淘宝创意互动将在后续版本不再开放 request 相关功能（即XMLHTTPRequest），请开发者自行使用云函数代替。

 

五、AS3项目特别注意

 

AS3编译出来的 js 代码会在window下补全 package 信息并且使用此 package 路径。

 

image.png

 

例如 view/TestView.as 可以通过 window.view.TestView 访问。

 

如果此时针对项目使用 module.def 分包，例如:

 

module:"a"
path:"../../libs/subpackageA/src"
module:"b"
path:"../../libs/subpackageB/src"

 

在外部包引用这两个分包里的代码时，会编译生成以下引用代码：

 

//编译生成
var TestA=Laya.TestA,TestB=Laya.TestB,TestGame=game.TestGame;

 

如果直接运行会出现 game is not defined 报错，此时开发者需要自行补充对 game 的定义：

 

//例如在该js的最开头,注意js的引用顺序，此时$global.window.game的game为package.game生成的对象
var game = $global.window.game

 

注意：LayaAirIDE会对src下的文件夹进行cache捕捉使用的对象，但是如果cache失败了，或者非src下的代码，还是会需要开发者自行补充定义。

 

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号