一、下载安装开发者工具

在淘宝开发者工具下载最新版本IDE，下载地址：https://developer.taobao.com/

--注意若引擎为laya请选用3.0.4版本进行开发。

注：下载IDE后，必须接入高性能模式，大幅度提升小游戏的运行性能。详情参考文档高性能模式。

二、开发小游戏

1. 在游戏引擎开发并导出小游戏

1）在 Cocos Creator 开发并导出淘宝小游戏

cocos3.x在3.7.3及后续版本支持淘宝小游戏，下载使用地址：https://docs.cocos.com/creator/manual/zh/editor/publish/publish-taobao-mini-game.html

cocos2.x在2.4.12后支持淘宝小游戏，使用地址：https://docs.cocos.com/creator/2.4/manual/zh/publish/publish-taobao-mini-game.html

Cocos Creator 新手上路：https://docs.cocos.com/creator/manual/zh/getting-started/

（选择 项目-》构建发布-》淘宝小游戏）

导出淘宝小游戏流程:

构建时不要勾选分离引擎。

2）在 LayaAir 开发并导出淘宝小游戏

LayaAir3.x在3.1.1及后续版本支持淘宝小游戏，下载使用地址：https://layaair.layabox.com/#/engineDownload

LayaAir2.x在2.13.4及后续版本支持淘宝小游戏，下载使用地址：https://ldc2.layabox.com/layadownload/?type=layaairide-LayaAir%20IDE%202.13.4

LayaAir官网：https://layaair.layabox.com/#/

导出淘宝小游戏流程：选择 文件 -> 构建发布 -> 选择“淘宝小游戏” -> 构建淘宝小游戏。

导出淘宝小游戏流程：

2. 在淘宝 IDE 中导入小游戏工程

① 导入项目前，需要先切换为 ---->【小游戏-新】选项卡。如果看不到选项，可通过【小游戏】--打开项目--项目类型选择时再选择 【小游戏-新】按钮；

② 点击右上角的“打开项目”，然后选择从 游戏引擎 中导出好的工程文件夹并打开；

③ 将项目类型更改为 ----> 【小游戏-新】类型；

④ 在【关联应用】处，关联至自己在控制台创建好的小游戏应用；

⑤ 点击【确定】按钮。

3. game.json 配置

{
  "deviceOrientation": "landscape", //横屏配置
  "highPerformanceMode": true, // 开启高性能模式
  "window":{
    "defaultTitle": "接口功能演示"
  },
  "subpackages": [
    {
      "name": "subPackageA",
      "root": "stage1/" // 可以指定一个目录，目录根目录下的 game.js 会作为入口文件，目录下所有资源将会统一打包
    }, {
      "name": "subPackageB",
      "root": "stage2.js" // 也可以指定一个 JS 文件
    }
  ]
}

1）横屏配置

点击查看游戏化小程序横屏能力使用文档。

2）window 配置

{
  "window":{
    "defaultTitle": "接口功能演示"
  }
}

属性	类型	是否必填	描述
defaultTitle	String	否	页面title标题，需在非首页使用。必须在navigationBarForceEnable设置开启才能展示。使用了tabbar的非首个tab不需要开navigationBarForceEnable也能展示。
transparentTitle	String	否	导航栏透明设置。默认 none，支持 always 一直透明 / auto 滑动自适应 / none 不透明
navigationBarBackgroundBg	String	否	导航栏背景图片地址
navigationBarTextStyle	String	否	导航栏标题颜色，仅支持black/white
titleImage	String	否	导航栏图片地址
titleBarColor	HexColor	否	导航栏背景色
showNavigationBarLogo	Boolean	否	是否显示首页导航栏上的AppLogo ，默认不显示。

3）分包配置

① 代码分包

包含JS的文件夹只能设置为代码分包。

在 cocos或laya 等游戏引擎上设置bundlle的压缩类型为【淘宝小游戏分包】。游戏引擎构建导出后可自动在game.json中设置分包信息。

导出后game.json中包含以下配置。

{
  "subpackages": [
    {
      "name": "subPackageA",
      "root": "stage1/" // 可以指定一个目录，目录根目录下的 game.js 会作为入口文件，目录下所有资源将会统一打包
    }, {
      "name": "subPackageB",
      "root": "stage2.js" // 也可以指定一个 JS 文件
    }
  ]
}

② 资源分包

纯资源素材的文件夹可设置为资源分包，并提供存储素材文件的CDN域名地址，可降低包大小，提升首屏启动速度。注意：设置远程分包后，导出的淘宝小游戏里面的remote文件需要删除。

3）分包配置

调用加载分包，示例代码如下：

my.loadSubPackage({
   name: 'packageA', 
   success:  (res) => {
     this.setData({
       subpackageReady:true
     })
     console.log("download success")
   },
   fail: function (res) {
     console.log(res)
     console.log("download fail")
   }
  })

4）引擎插件配置

注意：目前不支持引擎分离，请勿勾选。

4. 调用小游戏服务端

项目根目录下新建package.json，写入：

{
  "name": "",
  "version": "1.0.0",
  "main": "",
  "license": "MIT",
  "dependencies": {
    // 版本号必须大于1.5.5，可以直接写 "*" ，表示依赖最新版本，每次小程序打包会字段更新到最新版本
    "@tbmp/mp-cloud-sdk": "1.5.5"  
  }
}

或是在 IDE终端执行 npm install @tbmp/mp-cloud-sdk --save

引用成功后的项目结构

js代码中初始化cloud并调用，详细说明文档：https://miniapp.open.taobao.com/doc.htm?docId=118538&docType=1&tag=game-dev

//game.js文件初始化示例代码
import cloud from '@tbmp/mp-cloud-sdk';

cloud.init({
  //test、online
  env: 'test'
});

----------------------------------
  //调用接口的方法
  async function testCloud() {
    let result
    try {
      result = await cloud.application.httpRequest({
        //不需要完整域名，只需要接口访问路径即可
        'path': '/welcome',
        'method': 'POST',
        //POST请求需要指定下请求格式，只支持application/json。 如："content-type":"application/json;charset=UTF-8"
        'headers': { "Content-Type":"application/json;charset=UTF-8"},
        'params': {"name":"hanruo","action":"test"},
        'body': { "xftest":"hhh",  "id":"1234"},
        'exts': { 
           //cloudAppId为域名白名单配置后获取，在配置处查看具体参数
          "cloudAppId": "xxxx",
          // 单位ms
          "timeout": 4000,
           //调用需要填写该字段，包括协议头以及端口号（可省略），支持http、https
           "domain":"https://www.taobao.com"
        }
      });
    } catch (error) {
      console.log(error)
    }
    console.log("result:", JSON.stringify(result));
  }

----------------------------------
  //执行方法
  testCloud();



==================================
  //如果需要用户授权，服务端获取对应token，则如下调用：
  //执行方法
  my.authorize({
    scopes: 'scope.userInfo', //需要授权的权限包，此处以用户信息权限包为例
    success: (res) => {
      console.log("res:", res);
      testCloud();
    },
    fail(res) {
      console.log("fail:", res);
    }
  });

5. 调用淘宝开放的TOPAPI

调用开放api：云应用模式下调用TOP 接口。

部分开放能力以TOPAPI形式开放，需要先申请API对应的权限包。在小游戏下，对于需要用户授权的top api，需要从前端发起调用，此方法在涉及用户授权时，网关层会自动判断是否有有效授权token并判断是否弹窗。开发者无需感知。

//前端调用示例
async testTopApi(){
  try {
    const result = await cloud.topApi.invoke({  
      api: 'taobao.miniapp.userInfo.get',  //调用的api名称
      data : {
        'xx':"21313",
        'xxx':'tid,type,status'
      },//参数
      authScope: 'scope.userInfo'  //api所在的权限包
    });
    my.alert({
      content: 'success ' + JSON.stringify(result)  
    });
  } catch (e) {
    my.alert({  content: 'error ' + e.message  })
  }  
}

三、调试小游戏

1.IDE 模拟器预览

激活 IDE 上方工具栏中的“模拟器”按钮，可在IDE右侧的模拟器窗口中预览游戏渲染；

同时在IDE下方的调试器栏，可查看模拟器运行环境对应的控制台；

需要注意的是，部分平台API在模拟器中不支持调用，或表现与真机有差异。仅推荐在模拟器中进行基本功能的预览和调试，完整游戏功能的验证调试建议使用真机模式。

2.真机预览&调试

点击 IDE 上方工具栏中的“预览”按钮，待编译完成后，会生成【真机预览二维码】；

用淘宝 APP 扫描该二维码，即可在手机上预览小游戏的真实运行效果。

ide支持真机断点调试

点击 IDE 上方工具栏中的“调试”按钮，待编译完成后，会生成【调试二维码】；

用淘宝 APP 扫描该二维码，即可在手机上运行并调试小游戏代码，在 IDE 调试面板中可查看日志和断点；

需要被注意的是，【调试二维码】只能被使用一次（多次扫码将无效），每次扫码后若要再次使用，需要重新生成调试码。

3.基础性能调试

1）调试工具地址：

https://market.m.taobao.com/app/polygon/web-devtool-page-html/index.html#/

2）使用方式：

在IDE内点击生成预览码或调试码：

将生成出来的二维码地址复制到输入框中，并点击生成二维码即可进行性能数据采集调试：

四、FAQ

1. 报错：no such file or directory ....build\taobao-minigame \client lapp.json

解法：cocos构建发布的时候，发布平台选择【淘宝小游戏】，或者检查自己是否打开的IDE的【小游戏-新】入口。

2. 接口报错或者不符合规范，错误信息：出现异常，错误码：2053。

回复：工程太大，生产不了二维码。

3. 提示“构建小游戏失败”，怎么处理？

回复：

① 检查是否勾选云构建；
② 检查是否安装所需要的依赖@tbmp/mp-cloud-sdk，如果需要请使用安装命令：npm install @tbmp/mp-cloud-sdk；
③ 创建的是否小游戏-新；
④ 检查是否登录过期，需要手动退出IDE后，账号重新登录。

4. new Date().toLocaleDatestring()报错，怎样处理？

目前小游戏不支持new Date().toLocaleDatestring()方法，如果有使用，建议绕过。该问题正在修复中，修复后会同步解决方法。

5. 手机淘宝客户端在什么版本开始支持淘宝小游戏？

手机淘宝客户端从版本（10.15.20）开始支持淘宝小游戏。