字节跳动小游戏实现游戏跳转功能

最新推荐文章于 2025-04-25 11:34:56 发布

星星之Coder

最新推荐文章于 2025-04-25 11:34:56 发布

阅读量3.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：小游戏开发小游戏开发文章标签：字节跳动小游戏头条小游戏

本文链接：https://blog.youkuaiyun.com/linguifa/article/details/98939356

小游戏开发同时被 2 个专栏收录

38 篇文章

订阅专栏

小游戏开发

14 篇文章

订阅专栏

本文详述了字节平台小游戏无法直接使用tt.navigateToMiniProgram进行跳转的原因，并介绍了替代方案tt.createMoreGamesButton的使用方法。文章强调了参数image必须为本地地址，提供了网络图片转换本地地址的解决方案，同时提醒开发者注意按钮样式、位置适配及层次关系等问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，接过微信小游戏的开发者都知道，微信小游戏是通过 wx.navigateToMiniProgram来实现跳转的，但是在字节平台，先泼一下冷水，tt.navigateToMiniProgram api是不可用的，不可用！

这不是Bug，是官方定的策略。不要问我为什么，我也不知道！虽然我也很想要这个api!

其次，官方提供其它api tt.createMoreGamesButton来实现游戏跳转，间接实现游戏矩阵功能。字节官方的策略是游戏内创建个按钮，用户点击该按钮后，会弹出一个固定样式的弹窗，弹窗中包含预先配置的小游戏列表。这个弹窗是小游戏底层自动创建，无需开发者开发。
伪代码：

let obj:any = {
      type: 'image',
       image: imgurl , //"images/xxx.png"
       style: { 
           left: Math.round(left), 
           top: Math.round(top), 
           width: Math.round(width), 
           height: Math.round(height), 
           backgroundColor: "#ffffff", 
           borderColor: "#ffffff", 
           borderWidth: 0, 
           borderRadius: 5,
           textColor: "#ffffff",    
           textAlign: "center",    
           fontSize: 16,    
           lineHeight: 40
       },
       appLaunchOptions: [{appId:"", query:"", extraData:{}}],
       onNavigateToMiniGame(res){
           // console.log("跳转其他小游戏", res);
       }
   }
   if(this.button){
       try{
           this.button.offTap(this.onTap);
           this.button.destroy();
       }catch(e){
       }
   }
   var button = this.button = window["tt"].createMoreGamesButton(obj);

效果图

在这里不讲api tt.createMoreGamesButton的详细用法，具体请戳这个api地址

主要讲几个需要注意的地方：

参数 image 只能是本地地址，不能是网络地址，直接传 http这种网络地址是无效的。那想用网络图片怎么办呢？需要借助 tt.downloadFile api先下载下来再给 createMoreGamesButton api使用。
贴一点伪代码：

window["tt"].downloadFile({
    url:imgurl,
    success:(v)=>{
        if (v.statusCode >= 400){
            self.playNext_557();
        }
        else{
            self.imgCache[imgurl] = v.tempFilePath;
            self.showBtn(v.tempFilePath);
        }               
    },
    fail: (e) => {
        self.playNext_557();
    }
})

注意按钮的 width、top适配，createMoreGamesButton api使用的是原始尺寸定位的，需要根据 stage.width/ stage.height 和实际屏幕宽高比例做好缩放。
参数 borderColor、textColor 这些特别注意是字符串"#ffffff"，不是十六进制的 0xffffff，本人做的时候不小心没注意被卡了一小时才发现问题。
注意按钮的层次关系，createMoreGamesButton创建的按钮是在最顶层的，需要做好和游戏弹窗的显示和隐藏的逻辑关系。
不是所有版本都支持这个api，只有 1.23.0版本以上才支持，需要用 SDKUpdateVersion判断（怎么读取SDKUpdateVersion请查看官方api）
遇到坑“api用法正确，但仍然偶现创建的按钮不显示的情况”，这是官方已知Bug，升级app小游戏库（无需更新app，未验证）
不要忘记，和微信一样，想跳转的游戏需要在 game.json文件中配置 appid，

"ttNavigateToMiniGameAppIdList": [
		"tt xxxxxxxx ",
		"tt xxxxxxxx "
		// 至少4个，最多10个
	]

大功告成！开发技能又提升了！~~