一、前情提要
由于工作需要，最近开始接tiktok渠道，第一次听到tiktok最近才开始小游戏，下意识以为哪路营销机构号又开始炒作卖出海课程了，结果调研了一番，没想到真的是今年1月底才开始上线试点的功能，一时不知道如何吐槽，在国内都卷成红海的市场在海外居然才刚上线，过于令人不敢相信。
不过一想到之前非大陆小游戏平台都是由FB掌舵，一时也不是不能接受，FB对于小游戏的资源投入越来越少，TK这时候开始做小游戏虽感觉有些晚了，但仍然是一个不错的选择，看看字节那边怎么做海外市场的合规了。
由于我只是一个技术，此处不涉及到任何有关于开发者账号申请的环节，有意者可以自寻查阅官方文档，进一步研究，但我猜可能你需要一个HK的主体来做这件事，因为如果你想上架美区，TK有个专门的USDS审核。
二、前置条件
所需条件
- 一部安卓手机，最好有谷歌框架，安装最新版本的TK
- 开通了IAA的TK开发者平台账户（IAA需要额外开通）
- 最好是JP/US区的活跃TK账户
已知的坑
之前是要一个测试版本的包体，但是现在不再需要了，但我这边用IOS的最新包扫测试二维码调不出来游戏，所以最好用安卓来调试游戏，不知道是否是BUG。
同时有些TK号是没有灰度到这个功能的，如果是这种情况，你可以扫二维码进入游戏，但是你的侧边栏是不会有tiktok mini的字样的。如果没有的话，你可以尝试联系那边的运营，或者用其他设备注册一个新的JP/US账户。
三、开发者后台配置
好了，你应该是有一份平台后台的账户密码的，前往开发者后台登录你的账户：
https://developers.tiktok.com/
登录以后点击这里跳转到后台：
创建小游戏
在此处创建小游戏，填写一些相关信息，随即你可以获得小游戏的 APPID 和 ClientKey 。
添加调试权限
其次，添加你自己用户的调试权限，否则在TikTok你无法扫二维码测试你的游戏。
在最新版本的TikTok下进行添加，操作路径如下：
添加完成以后就可以开始打包调试了。
四、Cocos 端接入
Login 接入
登录必须是要接入的，不接入无法在真机进行游戏测试，具体接入办法也很简单。
首先，我们需要拿到一个授权的 code，在TK环境里面有一个全局的 TTMinis 的类，在里面调用 TTMinis.game.login ，里面需要传三个回调，一个 success，一个 fail，一个 complete，具体可以看文档里给的代码：
其次，拿到 code 以后把这个传到服务器后端，后端需要给 openapi 传一个 POST 请求，里面包含
client_secret 一系列的东西， 不要把这些数据存到前端包里，也不要通过客户端发 ，具体要求见图：
后端配置完毕以后，login 对接结束。原始文档见：
https://bytedance.sg.larkoffice.com/docx/CG6wdxffcouMY3xIqQTlDEyWgBe?302from=wiki
用户留存
在接入 login 以后还没有完善，还需要接两个用户留存的功能，一个是侧边栏，一个是桌面图标，这两个功能都需要美术出一个小UI引导一下用户，官方文档里面也提到了怎么去接，话术应该怎么套。
桌面图标
这里是基础的对接代码，过于简单不解释。
//添加到桌面
TTMinis.game.addShortcut({
//成功
success: () => {
console.log("success");
},
//失败
fail: (error) => {
//错误代码
const error_code = error.error_code;
//错误信息
const error_msg = error.error_msg;
console.log("fail", error);
},
//完成
complete: () => {
console.log("complete");
}
});
//判读用户是否可以领取添加到桌面奖励
TTMinis.game.getShortcutMissionReward({
success: ({ canReceiveReward }) => {
console.log("success", canReceiveReward);
},
fail: (error) => {
//错误代码
const error_code = error.error_code;
//错误信息
const error_msg = error.error_msg;
console.log("fail", error);
},
complete: () => {
console.log("complete");
}
});
侧边栏
第二个需要对接的就是侧边栏，操作路径是这样的：
这里有个坑要注意，TK 的侧边栏 API 是从 41.0.0 版本才开始支持的（按官方说法预计7月17日上线），所以调用之前最好先用 canIUse 做一下版本兼容判断，不然低版本直接调就崩了。当然，不做也行，因为低版本压根不会灰度到TK的小游戏功能，哈哈。
if (TTMinis.game.canIUse("startEntranceMission")) {
TTMinis.game.startEntranceMission({
success: () => {
console.log("success");
},
fail: () => {
console.log("fail");
},
complete: () => {
console.log("complete");
}
});
}
startEntranceMission 就是拉起侧边栏引导复访的，没什么好说的，三个回调传进去就行。调用形式如下：
TTMinis.game.startEntranceMission({
success: () => void;
fail: () => void;
complete: () => void;
});
getEntranceMissionReward 是用来判断用户是否可以领取侧边栏复访奖励的，success 回调里会给你一个 canReceiveReward 的 boolean，true 就是可以领：
TTMinis.game.getEntranceMissionReward({
success: ({ canReceiveReward }) => {
console.log("success", canReceiveReward);
},
fail: () => {
console.log("fail");
},
complete: () => {
console.log("complete");
}
});
IAA 激励广告接入
好了，基本的必要接入已经好了，剩下的IAA激励接入可以看文档自己实现，实现起来还是字节那套经典的API，没什么需要细讲的，下面是文档地址：
https://bytedance.larkoffice.com/wiki/JTEiw409LiLkUSk2SltcsAqonkg
激励广告的接入流程分三步：先创建广告实例，再注册回调，最后展示。
第一步 ，用 adUnitId 创建一个广告实例：
const rewardedVideoAd = TTMinis.game.createRewardedVideoAd({
adUnitId: 'xxx'
});
第二步 ，注册关闭和报错回调，关闭回调里的 res.isEnded 是判断用户有没有看完的关键，true 才发奖励：
const handleClose = (res) => {
rewardedVideoAd.offClose(handleClose);
if (res.isEnded) {
// 播放完成，发奖励
} else {
// 没看完，不发
}
};
rewardedVideoAd.onClose(handleClose);
const handleError = (err) => {
rewardedVideoAd.offError(handleError);
console.log(err, '激励视频广告拉取或播放错误');
};
rewardedVideoAd.onError(handleError);
第三步 ，调 show 展示广告。这里要注意两个坑：
一、是广告拉取或播放失败会自动退出，不会卡住；
二、是每个 rewardedVideoAd 实例 只能 show 一次 ，用完就释放了，下次要重新 createRewardedVideoAd ，别复用同一个实例。
五、打包配置
配置请求域名
所有游戏里需要请求的域名都要填进去：
打包设置
在 Cocos 上打包你的游戏，注意打包平台选 字节小游戏 即可，不要选其他的，appid 正常填写。
这里有个小问题，不知道为什么TK那边其实是接受直接上传H5（web-mobile）包的，但是你在使用TTMG测试的时候是必须要字节包才可以调试，否则会提示 game.js 未找到。对于此点，我暂且蒙在鼓里。
TK那边上线可以传H5包，也可以传原生包。如果在引擎选了字节包的话，打出来的包就是他们要的原生包。似乎原生包是运行在他们自己模拟的一套运行环境，而H5包是运行在 WebView 上的，或许会和iOS端有什么关系？此处暂不做更多讨论，望大佬解读一下。
六、调试
调试游戏需要用的是内部的 ttmg-cli 小工具。同时你的账户必须要有测试权限，测试权限的添加上面已经提到过了。
安装 ttmg-cli
- 安装 nodejs（不解释）：下载 | Node.js 中文网
- 安装命令行工具：
# 我喜欢 pnpm，快试试 pnpm（推荐）
npm install pnpm -g
pnpm add @ttmg/cli
# 直接使用 npm
npm install @ttmg/cli -g
ttmg -v
npm 包地址：https://www.npmjs.com/package/@ttmg/cli
- 安装好以后登录一次，需要开发者账户的邮箱和密码：
ttmg login
调试流程
进入打包输出目录，启动调试：
cd path/to/your-game-project/build/bytedance
ttmg dev
首次调试需要填一下 client-key，获取途径上文已经提到：
首次调试后，本地命令行会记录上次调试的 Client Key：
随即就会弹出一个浏览器，里面长这样：
下面那三个按钮按我的配置点开，然后如果要调试小游戏，直接用手机扫码即可。这三个选项分别是： 关闭白名单域名功能 、 开启广告功能 、 提示调试信息 。打开域名校验开关后，在开发者平台不注册域名也可正常发出请求；开启广告 Mock 以后可以正常测试广告功能。
打开展示开发信息面板是因为我觉得好看。这里可以看到有两种模式，一种是 远程调试 ，一种是 真机预览 。远程调试需要在同一个网络环境，也就是连上同一个WiFi。
开发文档里面说，"远程调试"是把渲染和操作都同步到电脑上了，实际上感觉只是把 Chrome 的调试器接进去了，然后还卡的要死，不过好处是可以直接在 Chrome 的 F12 开发者工具里面进行调试：
另一种是真机调试，是模拟真实环境，会把包体上传到字节CDN以后给客户端进行下载，真机运行。但是在我测试里，无论是远程调试还是真机调试，都是需要上传包体的，所以他们这个到底是为了啥，我暂且不理解。
侧边栏可以看到有一个代码预检的功能，其中可以看哪些API已经接入，哪些没有接入，不详细解释。
启动模式
这里聊一下启动模式，这个功能比较关键，因为有些神秘原因，比如说账户地区、账户灰测没测上等等，你有可能是侧边栏拉不出来那个 TikTok Minis 字样的，这时候你需要用这里来调试。
配置完了以后，直接在测试栏里面选择你刚才设置的模式，重新扫码即可。这样就能调试侧边栏功能是否接入成功了，和直接从APP的侧边栏进入是一样的效果。
到这里基本要开发做的事情基本结束了，剩下的就是要运营来调试了，具体情况看你们那边的运营怎么说。
七、FAQ
Q1：广告拉不出来，控制台提示 inactive
优先检查一下是不是广告位 IAA 没有激活：
Q2：在抖音开发者工具里运行报错 ERROR 3121
ERROR 3121, please go to <https://github.com/cocos-creator/engine/blob/master/EngineErrorMap.md#3121> to see details.
打图集的时候注意不能使用 webp 格式，他们对 webp 格式到现在都没有一个比较好的优化，但是他们支持 ASTC 格式，你可以选择把图集打成 ASTC 10x10 的格式：
或者打成PNG格式，然后在导出的时候挂一个插件压缩PNG图集，比如 https://store.cocos.com/app/detail/2419：
Q3：分包格式问题
如图设置即可，注意要选小游戏分包，同时不需要配置远程包。TK渠道支持 30MB 的总包大小，绝大部分情况下都足够了，除非是想做热更。
差不多就这么多了，剩下如果还有问题可以加我的邮箱进一步探讨：<用户名>@foxmail.com
又或者是在论坛回复，如果我有时间看到的话我尽可能会回复的。