字节跳动头条小游戏更多游戏跳转

发布于: 2020-02-04 更新于: 2024-11-11 分类于: game 阅读次数:

头条小游戏和微信小游戏基本语法都是相同的，只是多了录屏的功能，后期陆续更新了一些和微信略微不同的功能，更多游戏功能就是这样的，和微信的小游戏跳转基本功能是一致的，但是多了封装，面板是官方已经写好的，我们只要配置数据即可，而且有个更多好玩游戏直达小游戏中心，让更多玩家找到更好玩的游戏。

接下来就简单的说说这个更多游戏的用法：

总的来讲，其实更多游戏有两种实现方案，一种是初始化一个按钮即可，按钮显示的后续操作，已经封装好了，属于比较简单的，第二种是可以自己自定义入口按钮，这样可以添加更多的样式和操作，然后点击的时候调用更多游戏的面板即可，下面就说说这两种的挑战是如何实现的，首先我们打开官网：点击进入

tt.createMoreGamesButton 方法

这个方法是用 tt.createMoreGamesButton 创建一个按钮，按钮可以是文本和图片两种类型，如果是图片，必须是本地的图片，不能远程加载。

参数Object 类型，属性如下：

属性	类型	默认值	必填	描述
type	string		是	按钮的类型，取值 image 或 text。image 对应图片按钮，text 对应文本按钮
image	string		否	按钮的背景图片，type 为 image 时必填。仅支持本地图片，目录包括代码包目录、临时文件目录和本地用户目录
text	string	更多游戏	否	按钮上的文本内容， type 为 text 时有效
style	object		是	按钮的样式
appLaunchOptions	Array		是	小游戏的启动参数
onNavigateToMiniGame	function		否	跳转小游戏时的回调函数

appLaunchOptions 参数说明 Array

属性	类型	必填	说明
appId	string	是	要打开的小游戏 appId
query	string	否	查询字符串，必须是 key1=val1&key2=val2 的格式。可通过 tt.getLaunchOptionSync() 或 tt.onShow() 获取启动参数中的 query
extraData	object	否	需要传递给目标小游戏的数据。可通过 tt.getLaunchOptionsSync() 或 tt.onShow() 返回的 referrerInfo 字段获取对应数据

const systemInfo = tt.getSystemInfoSync();
const version = systemInfo.SDKVersion;
if (this.compareVersion(version, '1.33.0') < 0) {
    this.hasMoreGamesButton = false;
    return;
}
// iOS 不支持，建议先检测再使用
if (systemInfo.platform === "ios") {
    this.hasMoreGamesButton = false;
    return;
}
// const url = "more/btn_more_game";
let moreGameOptions = require('Global').config.moreGame.json;
let array = require('Global').Tools.objectToArray(moreGameOptions), list = [];
array.forEach((value) => {
    if (value.show) {
        list.push({
            appId: value.appId,
            query: "name=" + value.name + "&weight=" + value.weight,
            extraData: {}
        })
    }
})
list.sort((a, b) => {
    return a.weight - b.weight;
})
if (list.length == 0) {
    this.hasMoreGamesButton = false;
    return;
}
this.moreGamesButton = tt.createMoreGamesButton({
    type: "image",
    image: "res/raw-assets/resources/btn_more_game.png",//图片路径
    style: {
        left: 20,
        top: 40,
        width: 45,
        height: 45,
        lineHeight: 40,
        backgroundColor: "#ff000000",//最后两位表示透明度
        textColor: "#ffffff",
        textAlign: "center",
        fontSize: 16,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: "#ff000000"//最后两位表示透明度
    },
    appLaunchOptions: list,
    onNavigateToMiniGame(res) {
        console.log("跳转其他小游戏", res);
    }
});
this.moreGamesButton.onTap(() => {
    console.log("点击更多游戏");
});
// 监听弹窗关闭
tt.onMoreGamesModalClose(function(res) {
    console.log("modal closed", res);
});
// 监听小游戏跳转
tt.onNavigateToMiniProgram(function(res) {
    console.log(res.errCode);
    console.log(res.errMsg);
});

以上即可在屏幕上新建一个按钮点击可以直接打开

自定义按钮然后打开更多游戏

下面是挂在自定义按钮组件上面的实体比如一个Node 包括一个按钮


import Browser from "../Utils/Browser";

cc.Class({
    extends: cc.Component,

    properties: {
        moreGamesButton: cc.Node,
        hasMoreGamesButton: true,
        deltaPos: false,//点击整个操作 是否移动地图操作
    },
    start() {
        if(Browser.isMiniGame()){
            const systemInfo = tt.getSystemInfoSync();
            const version = systemInfo.SDKVersion;
            if (require('Global').Tools.compareVersion(version, '1.33.0') < 0) {
                this.hasMoreGamesButton = false;
                this.node.active = false;moreGameBtn.js
                return;
            }
            // iOS 不支持，建议先检测再使用
            if (systemInfo.platform === "ios") {
                this.hasMoreGamesButton = false;
                this.node.active = false;
                return;
            }
            // 监听弹窗关闭
            tt.onMoreGamesModalClose(function(res) {
                console.log("modal closed", res);
            });
            // 监听小游戏跳转
            tt.onNavigateToMiniProgram(function(res) {
                console.log(res.errCode);
                console.log(res.errMsg);
            });
        }else {
            // this.node.active = false;
        }
        let moreGameOptions = require('Global').config.moreGame.json,count = 0;
        let array = require('Global').Tools.objectToArray(moreGameOptions);
        array.forEach((value) => {
            if (value.show) {
                count++;
            }
        });
        if (count == 0) {
            this.hasMoreGamesButton = false;
            this.node.active = false;
            return;
        }
        this.initListener();
    },

    onClose() {
    },
    initListener() {
        this.node.on(cc.Node.EventType.TOUCH_MOVE, (event) => {
            let delta = event.touch.getDelta();
            this.node.x += delta.x;
            this.node.y += delta.y;
            let left = (Browser.width - this.node.width) * -0.5;
            let right = (Browser.width - this.node.width) * 0.5;
            let top = (Browser.height - this.node.height) * 0.5;
            let bottom = (Browser.height - this.node.height) * -0.5;
            this.node.x = this.node.x < left ? left : this.node.x;
            this.node.x = this.node.x > right ? right : this.node.x;
            this.node.y = this.node.y < bottom ? bottom : this.node.y;
            this.node.y = this.node.y > top ? top : this.node.y;
        });
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, (event) => {
            this.move = false;
        },this);
        this.node.on(cc.Node.EventType.TOUCH_END, (event)=>{
            this.move = false;
        }, this);

        //是否是移动地图 如果是移动地图就不弹框
        this.node.on(cc.Node.EventType.TOUCH_START, (event) => {
            this.deltaPos = event.getLocation();
        }, this);
        this.moreGamesButton.on(cc.Node.EventType.TOUCH_END, (event) => {
            //如果移动地图 就 不再弹框
            let pos = event.getLocation();
            if (Math.abs(pos.x - this.deltaPos.x) > 10 || Math.abs(pos.y - this.deltaPos.y) > 10) {
                console.log("smile----:", JSON.stringify("移动了"));
                this.move = true;
            }else {
                this.move = false;
            }
            if(this.move)return;
            this.showMoreGamesModal(event);
            return true;
        });
    },
    showMoreGamesModal(event) {
        require('Global').audioMgr.playEffect("buttonClick");
        tt.showMoreGamesModal({
            appLaunchOptions: [
                {
                    appId: "tt89e6ff5b16cc6954",
                    query: "name=养个神仙玩儿&platform=tt",
                    extraData: {}
                }
            ],
            success(res) {
                console.log("success", res.errMsg);
            },
            fail(res) {
                console.log("fail", res.errMsg);
            }
        });
    },
});

Browser.js

export default class Browser {
    static diff = 0;
    static now(){
        return cc.sys.now()+Browser.diff;
    }
    static get clientWidth(){
        return cc.view.getCanvasSize().width;
    }
    static get clientHeight(){
        return cc.view.getCanvasSize().height;
    }
    static get width(){
        return cc.view.getDesignResolutionSize().width;
    }
    static get height(){
        return Browser.width*(Browser.clientHeight/Browser.clientWidth);
    }

    static get browserType() {
        return "tt";
    }
    static isMiniGame(){
        return cc.sys.browserType === cc.sys.BROWSER_TYPE_WECHAT_GAME;
    }
    static isAndroid(){
        if(Browser.isMiniGame()&& Browser.browserType == "qq"){
            if(qq.getSystemInfoSync().platform === "android"){
                return  true;
            }
        }
        return false;
    }
}

这样这个自定义按钮可以自由的拖动，然后如果点击的时候可以打开更多游戏面板。

注意

无论是用那种办法都是要在game.json 里面配置：appid 不能少于 4个不能多于10个

{
  "deviceOrientation": "portrait",
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "ttNavigateToMiniGameAppIdList": [
    "xxxxx",
    "xxxxx",
    "xxxxx",
    "xxxxx"
  ]
}

这样一来，我们无法动态远程自定义控制打开添加的跳转程序列表（微信是可以的）比如我添加10个打开的时候我可以显示其中的 1-10个都行，这个可以根据我远程或者服务器的数据判断哪些是可以显示，哪些是不需要显示的。从这个角度来讲，头条控制的更严格。

总结

以上是两种都能实现更多游戏的方法，个人更喜欢第二种，虽然有些麻烦，但是功能更多更全，但是还是没有达到可以自己控制我需要跳转哪些小游戏，以及我可以动态的排序显示等操作。

--- 本文结束 The End ---

tt.createMoreGamesButton 方法

自定义按钮 然后打开更多游戏

注意

总结

自定义按钮然后打开更多游戏