功能说明

展示包含推荐游戏的的"小游戏盒子"界面，点击游戏列表中的游戏可以进行跳转。

⚠️ 旧版的“更多游戏”弹窗已经全部替换为小游戏盒子功能，目前会升级的宿主端包括头条，头条 Lite，西瓜，抖音，抖音 Lite，皮皮虾，火山。但具体是否升级为新版以基础库版本为准，基础库 1.67 版本后会采用新的互跳形式。

不支持小游戏盒子的宿主端点击后仍会展示“更多游戏”弹窗。

“小游戏盒子”界面

“小游戏盒子”界面提供一个推荐游戏列表展示，开发者需要在 game.json 文件中配置推荐小游戏列表。

⚠️ 基于交互统一性和规范性的要求，跳转小游戏数量至少要 1 个，最多 10 个。

在 game.json 文件中，ttNavigateToMiniGameAppIdList 字段配置跳转的小游戏列表。

{
  "ttNavigateToMiniGameAppIdList": [
    "ttXXXXXX1",
    "ttXXXXXX2",
    "ttXXXXXX3",
    "ttXXXXXX4",
    "ttXXXXXX5",
    // 至少1个，最多10个
  ]
}

用户点击任意小游戏的“玩一玩”按钮，即可跳转到对应小游戏。

对于支持小游戏盒子的宿主端，会在右上角显示小游戏盒子按钮，该按钮由系统固定显示，无需开发者控制。

展示“小游戏盒子”界面

⚠️ 推荐使用 tt.showMoreGamesModal

API	功能	支持版本
tt.showMoreGamesModal	直接展示“小游戏盒子”界面	1.33.0
tt.createMoreGamesButton	创建更多游戏按钮，按钮置于页面顶层需要手动点击触发，点击后打开小游戏盒子	1.23.0

通过 tt.showMoreGamesModal

支持这个功能的最低基础库版本为 1.33.0 版本，开发者需要对低版本进行兼容处理。

代码示例

// 监听弹窗关闭
tt.onMoreGamesModalClose(function (res) {
  console.log("modal closed", res);
});
// 监听小游戏盒子跳转
tt.onNavigateToMiniGameBox(function (res) {
  console.log(res.errCode);
  console.log(res.errMsg);
});

const systemInfo = tt.getSystemInfoSync();
// iOS 不支持，建议先检测再使用
if (systemInfo.platform !== "ios") {
  // 打开小游戏盒子
  tt.showMoreGamesModal({
    appLaunchOptions: [
      {
        appId: "ttXXXXXX",
        query: "foo=bar&baz=qux",
        extraData: {},
      },
      // {...}
    ],
    success(res) {
      console.log("success", res.errMsg);
    },
    fail(res) {
      console.log("fail", res.errMsg);
    },
  });
}

通过 `tt.createMoreGamesButton`

支持这个功能的最低基础库版本为 1.23.0 版本，开发者需要对低版本进行兼容处理。

通过小游戏跳转 API - tt.createMoreGamesButton，你可以自定义一个按钮样式，如下图红框所示。

创建更多游戏按钮代码示例如下。

const btn = tt.createMoreGamesButton({
  type: "image",
  image: "images/more_games_btn.png",
  style: {
    left: 20,
    top: 40,
    width: 150,
    height: 40,
    lineHeight: 40,
    backgroundColor: "#ff0000",
    textColor: "#ffffff",
    textAlign: "center",
    fontSize: 16,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: "#ff0000",
  },
  appLaunchOptions: [
    {
      appId: "ttXXXXXX",
      query: "foo=bar&baz=qux",
      extraData: {},
    },
    // {...}
  ],
  onNavigateToMiniGameBox(res) {
    console.log("跳转到小游戏盒子", res);
  },
});

btn.onTap(() => {
  console.log("点击更多游戏");
});