百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

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

bigegpt 2024-10-12 06:29 3 浏览

前言

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

相关推荐

恢复软件6款汇总推荐,帮你减轻数据恢复压力!

在当今数字化生活中,数据丢失的风险如影随形。无论是误删文件、硬盘故障,还是遭遇病毒攻击,丢失的数据都可能给我们带来不小的麻烦。此时,一款优秀的数据恢复软件就成为了挽救数据的关键。今天,为大家汇总推荐...

中兴星星一号刷回官方原版recovery的教程

【搞科技教程】中兴星星一号的官方recovery也来说一下了,因为之前给大家分享过了第三方的recovery了,之前给大家分享的第三方recovery也是采用一键刷入的方式,如果细心的朋友会发现,之前...

新玩机工具箱,Uotan柚坛工具箱软件体验

以前的手机系统功能比较单调,各厂商的重视程度不一样,所以喜欢玩机的朋友会解锁手机系统的读写权限,来进行刷机或者ROOT之类的操作,让使用体验更好。随着现在的手机系统越来越保守,以及自身功能的增强,...

三星g906k刷recovery教程_三星g906k中文recovery下载

【搞科技教程】看到有一些机友在找三星g906k的第三方recovery,下面就来说一下详细的recovery的刷入方法了,因为手机只有有了第三方的recovery之后才可以刷第三方的root包和系统包...

中兴星星2号刷recovery教程_星星二号中文recovery下载

【搞科技教程】咱们的中兴星星2手机也就是中兴星星二号手机的第三方recovery已经出来了,并且是中文版的,有了这个recovery之后,咱们的手机就可以轻松的刷第三方的系统包了,如果没有第三方的re...

数据恢复软件有哪些值得推荐?这 6 款亲测好用的工具汇总请收好!

在数字生活中,数据丢失的阴霾常常突如其来。无论是误删工作文档、格式化重要磁盘,还是遭遇系统崩溃,都可能让我们陷入焦虑。关键时刻,一款得力的数据恢复软件便是那根“救命稻草”。今天,为大家精心汇总6...

中兴u956刷入recovery的教程(中兴e5900刷机)

【搞科技教程】这次主要来给大家说说中兴u956手机如何刷入第三方的recovery,因为第三方的recovery工具是咱们刷第三方rom包的基础,可是很我欠却不会刷,所以太这里来给大家整理了一下详细的...

联想A850+刷recovery教程 联想A850+第三方recovery下载

【搞科技教程】联想A850+的第三方recovery出来了,这个第三方的recovery是非常的重要的,比如咱们的手机要刷第三方的系统包的时候,都是需要用到这个第三方的recovery的,在网上也是有...

工具侠重大更新 智能机上刷机一条龙完成

工具侠是针对玩机的机油开发的一款工具,不管是发烧级别的粉丝,还是普通小白用户,都可以在工具侠上找到你喜欢的工具应用。这不,最新的工具侠2.0.16版本,更新了专门为小白准备的刷机助手工具,以及MTK超...

shift+delete删除的文件找回6种硬盘数据恢复工具

硬盘作为电脑的重要存储设备,如同一个巨大的数字仓库,承载着我们日常工作、学习和生活中的各种文件,从珍贵的照片、重要的工作文档到喜爱的视频、音乐等,都依赖硬盘来安全存放。但有时,我们可能会不小心用sh...

使用vscode+Deepseek 实现AI编程 基于Cline和continue

尊敬的诸位!我是一名专注于嵌入式开发的物联网工程师。关注我,持续分享最新物联网与AI资讯和开发实战。期望与您携手探寻物联网与AI的无尽可能。这两天deepseek3.0上线,据说编程能力比肩Cl...

详解如何使用VSCode搭建TypeScript环境(适合小白)

搭建Javascript环境因为TypeScript不能直接在浏览器上运行。它需要编译器来编译并生成JavaScript文件。所以需要首先安装好javascript环境,可以参考文章:https://...

使用VSCode来书写你的Jupyter Notebooks

现在你可以在VScode里面来书写你的notebook了,使用起来十分的方便。下面来给大家演示一下环境的搭建。首先需要安装一个jupyter的包,使用下面的命令安装:pip3install-ih...

使用VSCode模板提高Vue开发效率(vscode开发vue插件)

安装VSCode安装Vetur和VueHelper插件,安装完成后需要重启VScode。在扩展插件搜索框中找到如下Vetur和VueHelper两个插件,注意看图标。添加Vue模板打...

干货!VsCode接入DeepSeek实现AI编程的5种主流插件详解

AI大模型对编程的影响非常之大,可以说首当其冲,Cursor等对话式编程工具渐渐渗透到开发者的工作中,作为AI编程的明星产品,Cursor虽然好用,但是贵啊,所以咱们得找平替,最好免费那种。俗话说,不...