# livelink-sdk 使用指南
## 引入方式
- 脚本方式引入
```html
type="text/javascript" src="//livelink.qq.com/js/milo/livelink-sdk.js" > 地址待修改 ``` - 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
```
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结构即可；
## 接口合集
### 所有接口函数均通过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登录框的回调。