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

tt.createMoreGamesButton

基础库 1.23.0 开始支持本方法,低版本需做兼容处理

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

创建更多游戏按钮。用户点击该按钮后,会跳转到小游戏盒子(tt.showMoreGamesModal),盒子中包含预先配置的小游戏列表以及其他更多游戏。

语法

tt.createMoreGamesButton(options);

参数说明

options 为 object 类型,属性如下:

属性类型默认值必填描述支持版本
typestring按钮的类型,取值 image 或 text。image 对应图片按钮,text 对应文本按钮
imagestring按钮的背景图片,type 为 image 时必填。仅支持本地图片,目录包括代码包目录、临时文件目录和本地用户目录
textstring更多游戏按钮上的文本内容, type 为 text 时有效
actionTypestring点击互跳按钮的跳转行为1.61.0+
appLaunchOptionsArray<object>小游戏的启动参数
onNavigateToMiniGamefunction跳转小游戏时的回调函数( 废弃
onNavigateToMiniGameBoxfunction跳转到小游戏盒子时的回调函数1.67.0+
styleobject按钮的样式

actionType 参数说明

string 类型:

说明
box点击按钮跳转到小游戏盒子,通过小游戏盒子展示开发者配置的推荐游戏和更多其他游戏 (在不支持游戏盒子的宿主端会展示更多游戏弹框)

appLaunchOptions 参数说明

Array<object>类型,内部对象结构如下:

属性类型默认值必填说明
appIdstring要打开的小游戏 appId
querystring查询字符串,必须是 key1=val1&key2=val2 的格式。可通过tt.getLaunchOptionSynctt.onShow 获取启动参数中的 query
extraDataobject需要传递给目标小游戏的数据。可通过tt.getLaunchOptionSynctt.onShow 返回的 referrerInfo 字段获取对应数据

onNavigateToMiniGameBox 回调函数参数

object 类型,属性如下:

属性类型说明
errCodenumber跳转错误码
errMsgstring跳转失败时的提示信息

onNavigateToMiniGame 回调函数参数(已废弃)

object 类型,属性如下:

属性类型说明
errCodenumber跳转错误码
errMsgstring跳转失败时的提示信息

errCode 取值说明

说明
0跳转成功
1跳转失败
2用户取消

style 对象参数说明

属性类型必填说明
leftnumber左上角横坐标
topnumber左上角纵坐标
widthnumber宽度
heightnumber高度
backgroundColorstring背景颜色
borderColorstring边框颜色
borderWidthnumber边框宽度
borderRadiusnumber边框圆角
textAlignstring文本的水平居中方式
fontSizenumber字号
lineHeightnumber文本的行高
textColorstring文本颜色

style.textAlign 属性合法值

说明
left居左
center居中
right居右

返回值

返回值为object类型,属性如下:

属性类型说明参数参数类型参数说明
onTapFunction监听按钮点击事件callbackFunction按钮点击后触发的事件
offTapFunction移除 onTap 绑定的监听函数callbackFunctiononTap 绑定的函数
destroyFunction销毁按钮
showFunction显示按钮
hideFunction隐藏按钮

onTap 回调函数的参数

Object 类型,属性如下:

属性类型说明
bannerIdnumber注册监听函数的 id

代码示例

//  按钮类型为text
const buttonWithText = tt.createMoreGamesButton({
  type: "text",
  style: {
    left: 120,
    top: 400,
    width: 120,
    height: 100,
    backgroundColor: "#ffffff",
    borderColor: "#ffff00",
    borderWidth: 10,
    borderRadius: 10,
    textAlign: "left",
    fontSize: 13,
    lineHeight: 50,
    textColor: "#000000",
  },
  text: "text的button",
  actionType: "box",
  appLaunchOptions: [
    {
      appId: "ttXXXXXX",
      query: "foo=bar&baz=qux",
      extraData: {},
    },
    // {...}
  ],
  onNavigateToMiniGameBox(res) {
    console.log("跳转到小游戏盒子", res);
  },
});
//  按钮类型为image
const buttonWithImage = 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",
  },
  actionType: "box",
  appLaunchOptions: [
    {
      appId: "ttXXXXXX",
      query: "foo=bar&baz=qux",
      extraData: {},
    },
    // {...}
  ],
  onNavigateToMiniGameBox(res) {
    console.log("跳转到小游戏盒子", res);
  },
});

let handler = () => {
  console.log("点击更多游戏按钮");
};
// 监听点击更多游戏按钮事件
buttonWithImage.onTap(handler);
// 取消监听点击更多游戏按钮事件
buttonWithImage.offTap(handler);
// 显示更多游戏按钮
buttonWithImage.show();
// 隐藏更多游戏按钮
buttonWithImage.hide();
// 销毁更多游戏按钮
buttonWithImage.destroy();

Bug&Tip

  • appLaunchOptions 填写格式必须为数组,如果遇到 tt.createMoreGamesButton 返回对象为 undefined,请检查 appLaunchOptions 值。
点击纠错
评价此篇文档