本篇文章主要讲解，使用cocos接入抖音小游戏侧边栏接口的实例教程。
日期：2024年7月1日
作者：任聪聪
教程实例：https://download.csdn.net/download/hj960511/89509196 下载后可直接导入运行

上传游戏后抖音预审不通过

注意：这个提示就是让我们增加如侧边栏接口能力。

侧边栏复访能力说明：

注意事项：

1.不是放入侧边接口就行了，而是要以礼包的形式进行引导，点击后发放游戏内礼品奖励。
2.不是放入所有的游戏界面，只需要放在首页即可。
3.不是随便一个图标，而是必须要按照礼包类型的图标。
4.不是点了就能领取，而是必须从侧边栏的入口点击游戏图标
5.必须增加侧边栏的图片及引导性文字才可以。

效果说明：

点击前：

点击后：

点击图标进入后：

备注：张贴的图片类型，需要为截图侧边栏并带有自己的小游戏的样式，具体格式如下：

实现步骤：

使用cocos creator构建我们的实例场景，具体样式如下：

备注：在文章附带的实例中，我已经准备好了源代码，导入creator会更快速的运行项目。

创建home.ts 书写抖音逻辑

const {ccclass, property} = cc._decorator;@ccclass
export default class NewClass extends cc.Component {@property({type: cc.Label,displayName: "状态提示"})protected infoTxt : cc.Label = null;@property({type: cc.Button,displayName: "打开侧边栏按钮"})protected openButton : cc.Button = null;@property({type: cc.Button,displayName: "领取礼包按钮"})protected giftButton : cc.Button = null;// LIFE-CYCLE CALLBACKS:// onLoad () {}private isShowLeft : boolean = false;start () {let that = this;tt.onShow((res) => {//判断是否从侧边栏进入that.isShowLeft = (res.launch_from == 'homepage' && res.location == 'sidebar_card');if (that.isShowLeft) {that.infoTxt.string = "侧边栏进入";that.openButton.node.active = false;that.giftButton.node.active = true;//此处可以直接操作领取红包//...写下你的红包领取逻辑}});//判断用户手机是否具备侧边tt.checkScene({scene: "sidebar",success: (res) => {//具备时更新状态that.isShowLeft = true;},fail: (res) => {//隐藏按钮，显示不支持提示that.giftButton.node.active = false;that.openButton.node.active = false;that.infoTxt.string = "不支持侧边"}});}onLoad() {let that = this;that.openButton.node.on(cc.Node.EventType.TOUCH_END,that.openLeftFunc,that.openButton);that.giftButton.node.on(cc.Node.EventType.TOUCH_END,that.giftFunc,that.giftButton);}protected openLeftFunc(){let that = this;tt.navigateToScene({scene: "sidebar",success: (res) => {console.log("侧边栏打开成功");that.isShowLeft = true;},fail: (res) => {console.log("侧边栏打开失败: ", res);},});}protected giftFunc(){console.log("领取红包,完成~");}// update (dt) {}
}

构建我们的项目，并运行字节小游戏

end：运行后，我们便可以进行侧边栏的打开和领取红包的操作了。

需要注意的事，在配置完场景后记得进行关联相关元素，如下图：