笔者在接入一个趣头条的SDK,习惯了微信的那种方式。结果看了起来趣头条的有些蒙蔽。不过还好呢。下面手把手的教你如何对接趣头条
1 > 基础准备
要看下这些文档哦
首先我们要准备几个基础知识的网址：
分别是：趣头条的开放平台：https://newidea4-gamecenter-frontend.1sapp.com/open-cms-new/prod/index.html#/login （你需要这里申请自己的游戏）
趣头条的开发文档：https://newidea4-gamecenter-frontend.1sapp.com/sdk/docs/#/(需要在这里了解趣头条的SDK的相关api)
趣头条的gitlub开发文档–官方封装好的版本-js版本：https://github.com/qtt-game/game-sdk/tree/master/sdk/jssdk（这个是有三种版本 https://github.com/qtt-game/game-sdk）
后期的开发我们会使用官方封装好的webpacke打包好的SDK组件
重要！！SDK的引入 记得到打包成为H5游戏的时候，引入趣头条的sdk
script type=“text/javascript” src="//newidea4-gamecenter-frontend.1sapp.com/sdk/prod/h5.v1.0.0.js?spread=required" crossorigin=“anonymous”>
网址在这里：https://newidea4-gamecenter-frontend.1sapp.com/sdk/docs/#/setup
额外
1,：此外一定要在 index.html中引入sdk 
https://newidea4-gamecenter-frontend.1sapp.com/sdk/docs/#/sdk/setup
2：这个是我使用的打包好的H5模板文件 ，打开压缩放在assets文件夹同级目录下，这个里面也处理防了止全屏可能带来的bug（在main.js文件里）
这个是cocos中生成的模板压缩包build-templates.rar (3.7 KB)
2 > 申请自己的游戏
打开趣头条的开放平台：进入后你会看见这样的界面
在这个界面中你需要点击右上角的新增游戏。增加完毕了，通过审核的话，你就会发现多出来游戏的申请的详情
然后去打开这个网页去看相关名词https://newidea4-gamecenter-frontend.1sapp.com/sdk/docs/#/sdk/glossary；
然后你会在你的申请号的列表中点击 按钮【应用key】 取到我们需要的 APP ID 与 APP KEY
3 > 使用相关api
相关api的详情 https://newidea4-gamecenter-frontend.1sapp.com/sdk/docs/#/sdk/api/report 打开后看左边。
但是你会发现找不到玩家的信息请求api.好多都是上报数据的的！没关系我们看下面这个地址这个是为服务端准备的所以没有在上面的地址里面：看这个:https://newidea4-gamecenter-frontend.1sapp.com/sdk/docs/#/server/gamecenter?id=%e8%8e%b7%e5%8f%96%e7%94%a8%e6%88%b7%e4%bf%a1%e6%81%af(获取用户信息);当然我们自己前端也可以使用呢
4 > 在游戏中使用趣头条的SDK
1步 点击下面这个网址把官方封装好的SDK下载下来 https://github.com/qtt-game/game-sdk/tree/master/sdk/jssdk/dist
下载jssdk-1.0.0.js文件或者是jssdk-1.0.0.js.map（用过webpack的同学知道，这是webpack打出来的组件）我使用的jssdk-1.0.0.js，这样那你需要使用的api在这个文件里面搜索下，就能找到自己需要的api了，然后看着我上面的api详情就可以使用了
2步，把刚刚下来的SDK(不下载，直接复制文件内容，自己建立一个js文件一样使用)，放在游戏里面。
3步，引入SDK文件。 import QTTGame from './jssdk-1.0.0’
4步，使用里面的api我们使用的是第一步 获取玩家的相关信息 **getUserInfo()**的这个api
src.rar (18.1 KB)//实例脚本文件跟SDK文件 ！！警报！！这里面的index.js不是cocosCreater里面的模板脚本，把里面的内容复制一下，放在cocos里的模板脚本里面就可以了，里面的jssdk-1.0.0文件是可以直接使用的
//这个是开始方法–我本来是要写上面的，但是要是跳出来 你就先这样使用一下吧
start () {
if(window['qttGame']){//问：为什么我们引用的是 QTTGame 到了这里是qttGame ，回答:这个是趣头条暴漏给我们检查是不是趣头条环境使用的。而 QTTGame是官方封装好的组件 ，两个不冲突
console.log(`window['qttGame']:`,window['qttGame']);
this.getUserInfo();
console.log('打印出来相关的参数')
在这里声明一下，就是登入的时候，我们才使用官方提供的SDK,其他的SDK是使用window['qttGame'].api就好了
}else{
console.log('并没有当前的qttGameSDK')
}
}
getUserInfo(){//请求登入的信息
var theRequest = new Object();
var url = location.href;
if (url.indexOf("?") != -1) {
var str = url.split('?')[1];
str = str.split('#')[0];
var strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
let platform = theRequest['platform']
let ticket= theRequest['ticket'];
var appKey = //这里需要填入的是上面让你准备的 APP KEY---必须要写哦，不然取到的
var appID = theRequest['app_id'];
var obj = {
platform,ticket,appKey,appID
}
console.log('obj:',obj,'theRequest:',theRequest);
window['QTTGame'].getUserInfo(appKey, appID, ticket, platform).then(res => {
// 成功
console.log('res:',res);
}).catch(err => {
// 失败
console.log('err:',err);
})
}
5 > cocosCrater游戏打包
我们需要打包成为H5文件，然后上传到你的服务器。
6 > 如何趣头条的环境下测试呢？
打开之前的趣头条开放平台，登入。如果你添加游戏成功了。你会看见你添加的游戏。我这边上传不了图片，没办法给你们截图。
在游戏列表的右边你会发现三个按钮 【内容查看】 【应用key】 【去测试】。
第一步：点开【应用key】按钮
第二步： 找到 -----测试游戏地址：------这个地方，将自己的游戏服务器地址放进去。不用任何的参数。index.html 结尾就好
第三步：点击【去测试】按钮。打开控制台，你就能看见打印了