普通小游戏开发
API
开放能力
数据分析
视频拍摄器
多端支持

功能说明

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

⚠️ 旧版的“更多游戏”弹窗已经全部替换为小游戏盒子功能,目前会升级的宿主端包括头条,头条 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("点击更多游戏");
});

更多游戏弹框

⚠️ 对于尚未开启小游戏盒子的宿主端,仍会采用老版的更多游戏弹框。

点击纠错
评价此篇文档