跳到主要内容

淘宝创意互动小部件开发快速指南

一.开发环境准备

二.创建小游戏和可视化编译打包小游戏

  1. 使用最新版的 Egret Launcher 创建一个 Egret 游戏项目,或者将原有的 Egret 项目导入
  2. 导入或者创建完成后,会在 Egret Launcher 的列表里看到该项目。点击发布设置:
  3. 选择 创意互动小部件 标签,点击确定,创建淘宝项目
  4. 创建成功后,点击发布标签,可以可视化的发布小游戏包
  5. 游戏代码类型:把白鹭工程里的代码编译淘宝项目里
    • debug:js 代码不进行 uglify 混淆,便于 debug 调试
    • release:js 代码进行 uglify 混淆压缩
  6. 淘宝创意互动项目结构
    • widget/component 目录: index.css:小部件的样式文件,一般不需要修改 egret.tbgame.js:白鹭适配层文件
      • index.axml:小部件入口页的页面结构
      • index.js:小部件入口文件
      • index.json:小部件的配置文件
      • tools 文件夹:一些工具类,不要修改
    • widget 目录:
      • js文件夹:白鹭项目编译出来的游戏代码
      • resource文件夹:游戏的图片、音频等资源文件。目前小部件不支持本地文件读取,因此需要把资源部署到网络环境进行加载。
      • manifest.js:用于加载依赖的 js 文件
      • plugin.json:小部件的插件配置 ,详情参见
    • mini.project.json:用于配置项目用到的文件格式,如果用到了特殊的文件格式,需要在这配置
    • client 文件夹:淘宝创意互动应用主题部分

三.安装到手机

  1. 下载开发者工具
  2. 点击【小程序】->【打开项目】,选择刚才创建好的淘宝创意互动小部件项目
  3. 项目类型,选择【小程序插件】
  4. 在面板的左上方关联应用,点击右上方的真机调试,编译完成后,使用手机淘宝APP,扫码调试

四.注意事项

  1. 平台因为安全问题,游戏资源必须通过网络加载,不能放在包里,建议使用 淘宝云开发
  2. 加载远程资源时,资源要放在阿里系域名下,具体情况请咨询淘宝的技术支持。
  3. 平台提供的文字输入功能很弱,请先测试查看效果。
  4. 不支持横屏游戏
  5. iOS 暂时不支持 websock 真机调试,预览模式可以使用。
  6. 不能直接调用 window 对象,需要使用 $global.window
  7. 暂时不支持声音播放等功能,请以官方说明和真机测试为准。
  8. 暂时不支持 setInterval 方法,请以官方说明和真机测试为准。
  9. 暂时不支持 加载本地文件,请以官方说明和真机测试为准。
  10. 其他问题,请参考:淘宝创意互动小程序FAQ

五.全局变量的使用

淘宝创意互动项目不支持全局变量,具体使用方式,请看这篇教程文档