前言
最近小游戏的软著下来了，用 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;
@ccclassexport 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 中添加抖音里内部方法不能马上调试，而是要打完包再放到抖音开发者工具中测试，遇到报错又改打包测试再改。还有一个是官方的文档的举例是用了一个最复杂的方式，其实对于我们单机的小游戏就只是引导一下，没有复访奖励什么的！
评论