首先,接过微信小游戏的开发者都知道,微信小游戏是通过 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个
]
大功告成!开发技能又提升了!~~