# livelink-sdk 使用指南
## <span id = "quote">引入方式</span>
- 脚本方式引入
```html
<script
type="text/javascript"
src="//livelink.qq.com/js/milo/livelink-sdk.js"
></script>
地址待修改
```
- ES5 module 引入方式
将 js 文件下载到本地项目中，作为模块引入即可，例如：
livelink-sdk.js
```js
//这个文件是sdk源码文件
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if (typeof define === 'function' && define.amd)
define('llink', [], factory);
else if (typeof exports === 'object') exports['llink'] = factory();
else root['llink'] = factory();
})(this, function() {
//...
});
```
index.js
```js
//这个文件是本地项目调用sdk的文件
import llink from './livelink-sdk.js';
```
- CommonJS 引入方式
将 js 文件下载到本地项目中，作为模块引入即可，例如：
livelink-sdk.js
```js
//这个文件是sdk源码文件
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if (typeof define === 'function' && define.amd)
define('llink', [], factory);
else if (typeof exports === 'object') exports['llink'] = factory();
else root['llink'] = factory();
})(this, function() {
//...
});
```
index.js
```js
//这个文件是本地项目调用sdk的文件
const llink = require('./livelink-sdk.js');
```
- AMD 引入方式
将 js 文件下载到本地项目中，作为模块引入即可，例如：
livelink-sdk.js
```js
//这个文件是sdk源码文件
(function webpackUniversalModuleDefinition(root, factory) {
if (typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if (typeof define === 'function' && define.amd)
define('llink', [], factory);
else if (typeof exports === 'object') exports['llink'] = factory();
else root['llink'] = factory();
})(this, function() {
//...
});
```
index.js
```js
//这个文件是本地项目调用sdk的文件
require(['llink'], function(llink) {
//...
});
```
## 快速接入指南
1.模板方式接入
1) 按照[引入指南](#quote)中的脚本引入方式引入之后，会得到 一个包含[所有接口](#interfaces)的 llink 对象暴露在 windows 下;
2) 插入一下html片段(注意：'data'会作为入参传入模板引擎函数，不能修改该字段)
```html
<body>
<div id="llink-account-pannel"></div>
<script type="text/html" id="llink-account-pannel-template">
<@ if (data && data.currAccount) { @>
<span class='account-name'>
欢迎您，<@= data.currAccount.nickName @>
</span>
<@ if (data.currRole) { @>
<span class='account-name'>
<@= data.currRole.roleName @>
</span>
<span class="change-account btn" onclick="handleChangeAccount()"
>[切换账号]</span>
<span class="change-role btn" onclick="handleChangeRole()">[切换角色]</span>
<@ } else { @>
<span class="bind-role btn" onclick="handleBindRole()">
[绑定角色]
</span>
<span class="change-account btn" onclick="handleChangeAccount()"
>[切换账号]</span>
<@ } @>
<@ } else { @>
<span class="bind-account btn" onclick="onShowLogin()"
>
[绑定账号]
</span>
<@ } @>
</script>
</body>
```
3) 编写各个按钮的绑定逻辑
```js
//处理绑定角色
function handleBindRole() {
//显示角色选择框或者历史角色列表框
llink.handleBindRole();
}
//处理切换账号
function handleChangeAccount() {
//显示历史账号列表框
llink.handleBindAccount();
}
//处理切换角色
function handleChangeRole() {
//显示历史角色列表框
llink.handleBindRole();
}
//拉起wx或qq登录框的回调
function onShowLogin() {
// 显示wx/qq登录框，
// 授权之后获取到wx/qq登录态，例如：{"access_token":"D4AAFFADAADD6061ECB55B44A4BE79F3","appid":"101047385","openid":"430F7EF557C902B0DDF462EFC3F01C32"}
}
//获取到用户绑定信息后的回调,未绑定账号返回空对象: {}
function onInitialed(bindInfo) {
const str = document.getElementById('llink-account-pannel-template')
.innerHTML;
const id = 'account-pannel-template';
const template = llink.tmpl(id, str, bindInfo);
//根据返回的用户数据，动态更新页面显示
document.getElementById('llink-account-pannel').innerHTML = template;
}
//初始化sdk
llink.init({
livePlatId: 'douyu',
actId: '1',
gameId: 'cf',
v: '1.0',
t: '15232566425',
sig: res.jData.auth.sig,
code: res.jData.auth.code, //由uid，access_token ，appid，openid加密生成(未授权登录时则只有uid)
nonce: '1',
callbacks: {
onInitialed, //初始化后，根据绑定信息更新界面的回调：onInitialed
onShowLogin, //展示微信/QQ登录框的回调：onShowLogin
},
});
```
4) [完整demo链接](./demo.html)，包含获取加密后的sig和code
2.非模板方式引入
假设你使用了类似react，或者vuw这类数据驱动型的mvvx框架，只需要在onInitialed这个回调里，通过返回的角色绑定数据渲染
相应dom结构即可；
## <span id="interfaces">接口合集</span>
### 所有接口函数均通过llink对象调用
1. handleBindAccount:用于处理账号的绑定逻辑，包括绑定账号和切换账号；
2. handleBindRole：用于处理角色的绑定逻辑，包括绑定角色和切换角色；
3. init：初始化sdk，传入的对象必须带有如下字段：
* livePlatId: 第三方直播平台id，例如：'huya'
* actId: 活动id
* gameId：游戏id
* v： sdk版本，默认传: '1.0'
* t: 时间戳
* sig：加密参数，计算方式为： md5(querystring+secret)
* code： 用户加密信息，计算方式： base64(aes(json_encode("userId","appid","openid","token"])))
* nonce： 随机8位 [0-9a-Z]
* callback: 包含两个回调，
onInitialed：初始化后，根据绑定信息更新界面的回调；onInitialed：展示微信/QQ登录框的回调。
网友评论