Asroads'Blog 君子不器
字节跳动头条小游戏更多游戏跳转
发布于: 2020-02-04 更新于: 2024-03-02 分类于: 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 字段获取对应数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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 包括一个 按钮

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"deviceOrientation": "portrait",
"networkTimeout": {
"request": 5000,
"connectSocket": 5000,
"uploadFile": 5000,
"downloadFile": 5000
},
"ttNavigateToMiniGameAppIdList": [
"xxxxx",
"xxxxx",
"xxxxx",
"xxxxx"
]
}

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

总结

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

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