如何用CocosCreator对接抖音小游戏的侧边栏复访

前言

最近小游戏的软著下来了，用 CocosCreator 做的游戏也完成了 1.0 版本。而当我打包成抖音小游戏进行提交时，还没到初审就给拒了，因为还有一个机审，机器检测到代码中没有接入 “侧边栏复访功能”。这个我还真不知道，那只能去官方看文档了，位置是小游戏开发文档 -> 指南 -> 开放能力 -> 侧边栏能力。

简介

侧边栏复访能力是在「2023 年 11 月 24 日」起就开启了「必接审核」，为什么要这样做呢？原来是随着抖音首页侧边栏的日活不断增高，平台也积极引导用户养成从首页侧边栏进入游戏的习惯而做的要求。这样可以大幅提升次留、7 留，反正就是你好我好大家好的局面，接就对了。

文档我也大概看了，大概的流程就是打开游戏后，判断是不是侧边栏进来，是的话就相当老用户给他一些奖励，不是的话给一些引导弹窗，让用户触发打开侧边栏。而文档里的方案示例大部分也都有奖励领取环节，但是我这个目前是单机，奖励肯定是没有的，那怎么办，于是我就做了一些简化。

流程

• 创建去侧边栏按钮和引导层
• 对接抖音提供的方法检测和跳转
• 打包后去抖音开发工具调测

操作

创建去侧边栏按钮

打开游戏场景画布，找到主界面面板，分别添加 “去侧边栏按钮节点” ，添加图文素材。

创建引导层节点

继续在主界面下添加引导层空白节点，就是展示一个遮罩，一个引导图片和跳转侧边栏和关闭按钮。遮罩层的添加方式是给节点新增 sprint 组件，组件的 sprite Frame 选择 ”internal”->”image”->”default_btn_disabled”，其他的按钮就是自己的 UI 图标了。

在主界面脚本中挂载节点

就是将去侧边栏和引导图层，跳转复访等绑定触发事件。

主要代码

import gameManager from "./gameManager";

const {ccclass, property} = cc._decorator;

@ccclass
export default class startPanel extends cc.Component {

    // 抖音侧边栏复访
    private isFromSidebar = false //状态，表示是否从侧边栏进入

    @property(cc.Node)
    public btnSidebar: cc.Node | null = null; // 入口有礼按钮

    @property(cc.Node)
    public ndSidebar: cc.Node | null = null; // 侧边栏引导对话框

    @property(cc.Node)
    public btnGotoSidebar: cc.Node | null = null; //去侧边栏按钮

    @property(cc.Node)
    public btnCloseSidebar: cc.Node | null = null; // 关闭侧边栏引导对话框

    private game:gameManager = null;

    init(game:gameManager) {
        this.game = game
    }

    onLoad() {
        this.game.startAudio();
    }

    // 弹出侧边栏引导框
    private showDialogBox() {
        // 显示引导层，隐藏开始按钮
        this.ndSidebar.active = true;
        this.startBtn.active = false;
    }

    // 关闭侧边栏对话框
    private closeSidebar() {
        this.ndSidebar.active = false;
        this.startBtn.active = true;
    }

    // 自动跳转侧边栏
    private gotoSidebar() {
        this.ndSidebar.active = false;
        this.startBtn.active = true;

        // 抖音小游戏侧边栏跳转逻辑
        tt.navigateToScene({
            scene: "sidebar",
            success: (res) => {
                console.log("navigate to scene success");
                // 跳转成功回调逻辑
            },
            fail: (res) => {
                console.log("navigate to scene fail: ", res);
                // 跳转失败回调逻辑
            },
        });
    }

    start() {
        // --侧边栏按钮判断--//
        tt.onShow((res) => {
            //判断用户是否是从侧边栏进来的
            this.isFromSidebar = (res.launch_from == 'homepage' && res.location == 'sidebar_card')

            if (this.isFromSidebar) {
                //如果是从侧边栏进来的，隐藏“去侧边栏”
                this.btnSidebar.active = false
            }
            else {
                //否则 显示“去侧边栏”按钮
                this.btnSidebar.active = true
            }
        });

        //判断用户是否支持侧边栏进入功能，有些旧版的抖音没有侧边栏，这种情况就把入口有礼那个按钮给隐藏掉
		// 因为我引导层默认就是隐藏，所以这部分可以不用判断
        /*tt.checkScene({
            scene: "sidebar",
            success: (res) => {
                this.btnSidebar.node.active = true
            },
            fail: (res) => {
                this.btnSidebar.node.active = false
            }
        });*/
        // --侧边栏按钮判断--//

        // 显示侧边栏引导框
        this.btnSidebar.on('touchstart', this.showDialogBox, this);

        // 关闭侧边栏引导对话框
        this.btnCloseSidebar.on('touchstart', this.closeSidebar, this);

        // 点击进入抖音侧边栏
        this.btnGotoSidebar.on('touchstart', this.gotoSidebar, this);
    }
}

写在后面

这样操作下来，你会发现接入这个侧边栏功能并不复杂，其实就相当于做了一个弹窗效果。麻烦的是在 CocosCreator 中添加抖音里内部方法不能马上调试，而是要打完包再放到抖音开发者工具中测试，遇到报错又改打包测试再改。还有一个是官方的文档的举例是用了一个最复杂的方式，其实对于我们单机的小游戏就只是引导一下，没有复访奖励什么的！