【游戏开发随笔】微信小游戏上线字节平台超全攻略

xiangtingsl

除了长期占据主流位置的微信平台，字节跳动平台也是一个非常值得个人开发的小游戏上线的阵地。字节系的很多产品（如抖音、西瓜视频、今日头条）都带有巨大的流量，甚至能够比肩微信[1]。

本文假设你已有了一个用Cocos Creator制作的微信小游戏（使用其他跨平台引擎或微信原生开发工具开发的项目，本文亦可作为参考），现在想将该游戏发布到字节产品上。基于网上收集的资料和实践过程中的经验，本文详细整理了一个小游戏从微信平台发布到字节平台过程中需要了解的内容，以及需要调整的工作细节。
<hr/>平台要求差异  

关于字节跳动小游戏的申请、发布和审核的基本流程可以参考[2]。总体而言，字节平台与微信平台流程相似，其中开发者可能关心的主要差异有以下几点：

字节跳动各个环节的审核较微信更加严苛。在微信，个人开发者只需“自查报告”即可发布游戏，但在字节“软著”也是游戏上线的必要材料。微信对初版小游戏的最低要求是完整可运行即可。但字节跳动要求小游戏必须实现“录频“功能[3]。该功能可以调用字节的API快速实现，代码可参考[1]和[4]。字节小游戏对广告、引流等情况审核更加严格。例如，广告按钮的设置也有统一的规定[5]，不合要求会被打回。字节对界面、排版方面的要求也更加严格（例如文本过长，超出背景框也会成为拒绝通过的理由）。微信小游戏要求注册量达到1000后才能开通流量主。字节小游戏无门槛，可以直接插入广告栏盈利。

<hr/>工程代码迁移  

字节跳动文档提供了一键完成代码迁移的功能[6]。这个功能相当方便，但是也存在缺点，即之后每次更新游戏都需要重复执行导入工程、迁移代码的步骤。对于使用Cocos等游戏引擎的项目来说，在代码中针对不同平台设置不同的处理方式是更为方便的处理方式。
1. 修改发布平台。在每次构建发布时，将发布平台和appid从微信替换为从字节的相关内容即可。



2.所有使用微信API的代码，需要将wx替换为tt。如接入微信广告的wx.createBannerAd()改为tt.createBannerAd()后即可接入字节广告。
// 在一套代码中，开放能力需兼容多个平台（Cocos Creator案例）
if (cc.sys.platform==cc.sys.WECHAT_GAME) {
  // 微信平台，调用微信接口
  wx.createBannerAd({...)}
} else if (cc.sys.platform==cc.sys.BYTEDANCE_GAME) {
  // 字节平台，调用字节接口
  tt.createBannerAd({...)}
}

微信作为小程序时代的开创者，其制定的一系列规范已经成为了众多其他小程序产品的模板，因此绝大多数的用法和功能都是相同的，我们只需替换一下名称就可以了！

值得注意的是，有些接口虽然调用方式相同，但平台返回的数据结构会有差异，因此还是需要仔细调试并阅读文档的。例如，用户授权后取得的头像图片网址就存在格式区别：在微信开发者需要自行补充.png等后缀，而字节返回的是带有.image后缀的完整资源url；又如请求用户的openid时使用的请求格式不同（详细差别可以参考微信开发文档[7]和字节开发文档[8]）。
<hr/>腾讯云开发的适配  

本部分仅针对使用腾讯云开发的小游戏。直接使用腾讯云或Cocos云开发的小游戏，直接在字节跳动小游戏开发工具中运行时，可能报如下错误：
error:{"code":" INVALID_PARAMS","msg":"invalid appSign"}腾讯云开发是天生为微信小程序服务的，因此它应用在字节小程序中则需要一些额外的适配工作。

字节跳动目前尚未开通自己的云开发服务；即使将来字节开通了它的云服务，我们可能也希望继续使用已在腾讯云积累的用户和数据！

以下适配操作综合整理自[9]和[10]。
1.在字节跳动小游戏开发工具中，检查项目资源有无图示的这两个.json文件。若没有，则需要先安装npm（Node Package Manager，是NodeJS的包管理工具，通过它能够下载网络上的JavaScript软件包）。


在右下角的调试器面板进入终端栏，输入以下指令。
npm init如果能显示相应的版本号，就说明是安装成功的。否则若提示“npm不是内部命令”类似的错误，则需要先在你的电脑上安装node环境。安装node环境的步骤可以参考[11]：前往http://nodejs.cn/download/下载适合你系统的NodeJS版本。


环境安装完成后，重新进入开发工具再键入上面那条命令，就可以正常执行了。
2. 在终端依次输入以下两条命令，提示信息一直回车确认即可。这两条操作将分别在项目下生成package.json文件和package-lock.json文件。[12]
npm init
npm install3.npm已准备就绪，接下来利用它安装云开发相关的SDK和字节跳动适配器。
npm i @cloudbase/js-sdk -S
npm i @maoyan/cloudbase-adapter-tt_mp -S4. 配置腾讯云后台。
在后端的云开发-环境-安全配置-移动应用安全来源界面，点击添加应用。在随后的应用标识一栏填入你的字节跳动小程序AppId即可。




授权成功后，在新建的条目中选择获取凭证，然后点击复制，获得凭证(AppAcessKey)。在之后的代码中需要填写此凭证信息。





5.启用了Cocos云开发的项目，打包到字节跳动开发工具后，项目资源中应该会有src/assets/cloud/cloudConfig.js这个文件。您也可以通过检索”appSign”字段来找到该文件。
修改该文件的相应字段。
window.cc_cloud_commonConfig={
  platform:"tencent",
  tencent:{
    env:"env1-000123abc",//腾讯云环境ID
    appSign:"tt111123abc",// 填写你的字节跳动appID
    appSecret:{
      appAccessKeyId:"1",//一般填1即可
      appAccessKey:"222123abc"//第4步中获得的凭证
    }
  }
};
修改完成后，保存并刷新模拟器。现在腾讯云服务在字节跳动小游戏开发工具中也可以顺畅运行啦！提交发布，在抖音、头条软件上调试游玩吧！
<hr/>欢迎关注我的微信公众号“焕焕骑士”，分享我的游戏资讯，以及有用的开发经验！
参考

• ^ab抖音、头条一个都不放过，字节小游戏上线攻略！_奎特尔星球-CSDN博客https://blog.csdn.net/6346289/article/details/103209825
  
• ^抖音、头条一个都不放过，字节小游戏上线攻略（续）！再送源码福利_奎特尔星球-CSDN博客https://blog.csdn.net/6346289/article/details/103248990
  
• ^字节小程序 | 录屏与分享 (bytedance.com)https://microapp.bytedance.com/docs/zh-CN/mini-game/operation/function/record-share/
  
• ^creator项目上线字节跳动小程序_Eric_gg的博客-CSDN博客https://blog.csdn.net/weixin_41783625/article/details/94601188
  
• ^小游戏高频审核拒绝场景第二期—广告新规 (bytedance.com)https://forum.microapp.bytedance.com/mini-game/posts/603748ee1b30865d8b2c7386?is_new_connect=0&is_new_user=0
  
• ^字节小程序 | 附:微信小程序迁移(bytedance.com)https://microapp.bytedance.com/docs/zh-CN/mini-app/introduction/plug-in/mini-app-developer/annex-micro-channel-migration-applet/
  
• ^auth.code2Session | 微信开放文档 (qq.com)https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html
  
• ^字节小程序 | code2Session (bytedance.com)https://microapp.bytedance.com/docs/zh-CN/mini-game/develop/server/log-in/code-2-session
  
• ^字节跳动小程序如何使用云开发cloudbase | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000aa46dfec8a0eb188cb107d57813?highline=%E5%AD%97%E8%8A%82%20%E4%BA%91%E5%BC%80%E5%8F%91
  
• ^【笔记】字节跳动小程序如何接入腾讯云CloudBase? | 微信开放社区 (qq.com)https://developers.weixin.qq.com/community/develop/article/doc/000ac062acc5c047697cd3bdf51813?highline=%E5%AD%97%E8%8A%82%20%E4%BA%91%E5%BC%80%E5%8F%91
  
• ^微信小程序没有找到可以构建的NPM包，请确认需要参与构建的npm在miniprogramroot目录 - 简书(jianshu.com)https://www.jianshu.com/p/fc650d925094
  
• ^微信开发者工具使用npm安装第三方包_aiee的博客-CSDN博客https://blog.csdn.net/sinat_34209942/article/details/114263147