LOL前端开发手册

# Login

# 功能

  1. 端游只有 QQ 登录，手游支持 QQ&WX 登录
  2. 不需要记录数据情况下的绑定大区功能，更推荐使用 AMS 模块的绑定大区

# 必读

  1. 页面中不要再重复引入 milo！！！
  2. need 以及 milo 中其他函数的使用，务必放在 init 之后，默认会加载["biz.login", "biz.roleselector", "biz.dialog"]，分别用loginObj.LoginManager, loginObj.RoleSelector, loginObj.Dialog表示。不要重复引入！！！
  3. DOM 必须按照指定结构，必须引入，不需要的时候可以隐藏
  4. logout 的回调禁止刷新页面

# 使用

# DOM 结构

# 老 milo

<div id="unlogin" class="login unlogin" style="display: block">
  <!--登录前状态 Start-->
  <div class="login__pc">
    <a id="btn_qqlogin" href="javascript:" title="QQ登录">【QQ登录】</a>
    <a id="btn_wxlogin" href="javascript:" title="微信登录">【微信登录】</a>
  </div>
  <div class="login__m">
    <a id="ptLoginBtn" style="cursor: pointer">【QQ登录】</a>
    <a id="wxloginBtn" style="cursor: pointer">【微信登录】</a>
  </div>
  <!--登录前状态 End-->
</div>
<!--登录后状态 Start-->
<div id="logined" class="login logined center" style="display: none">
  <div class="login__pc">欢迎您，<span id="login_qq_span"></span></div>
  <div class="login__m">欢迎您， <span id="userinfo"></span></div>
  <span class="area_bind">
    <a id="noBind">【绑定大区】</a>
    <a id="area_info" style="display: none"></a>
    <a style="display: none" id="isBind">【更改绑定】</a>
  </span>
  <div class="login__pc">
    <a id="btn_logout" href="javascript:void(0);" title="注销">注销</a>
  </div>
  <div class="login__m">
    <a id="ptLogoutBtn" href="javascript:void(0);" style="cursor: pointer"
      >注销</a
    >
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 新 milo

<div id="logined">
  欢迎您，<span id="milo_userinfo"></span><img id="milo_headimg" />
  <span id="logoutBtn">注销</span>
</div>
<div id="unlogin">
  <span id="qqLoginBtn">QQ登录</span>
  <span id="wxLoginBtn">微信登录</span>
  <span id="qqwxLoginBtn">QQ微信联合登录</span>
</div>
1
2
3
4
5
6
7
8
9

# 钩子函数

函数名 用法
init 初始化，加载完 milo 之后执行
logined 登录后执行
logout 注销后执行
bound 绑定大区后执行
unbind 取消绑定后执行
unlogin 页面登录态失效后的回调（新 milo）｜

# 典型案栗

const { Login } = LOL;
const loginObj = new Login({
  pc: {
    // 我想pc登录后不刷新
    needReloadPage: false,
  },
  mobile: {
    // 我不允许QQ的一键登录
    sData: {
      pt_no_onekey: 1,
    },
  },
  init() {
    // 这里才开始有milo/login/roleselector/dialog，不需要再次定义TGDialogS和closeDialog啦，直接用
    // 可以执行一些页面初始化
    initDOM();
    // 可以这个时候再给页面功能按钮绑定事件处理
    startFunction();
  },
  logined() {
    // 这里已经通过了milo的checkRealLogin校验，可以拿到用户信息
    console.log(loginObj.userInfo);
  },
  logout() {
    // 注销后需要对页面的状态和变量做初始化哦
    initDOM();
    initLocalStore();
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 函数

_ TIPS _ 新 milo 版本支持所有老版本中的函数，函数调用方式一致，区别是新版本的参数与新 milo 的保持一致。

  1. 初始化参数在 new Login 时传入
  2. login/loginByWX 可以传入自己指定的参数，也可以不传

# 校验登录态

【checkLogin】

  1. 老：更推荐使用loginObj.LoginManager.checkLogin哦，当前函数之后不再维护。
  2. 新：不带有参数，调用方式相同
参数 类型 含义
noCache boolean 是否调用后端接口，默认 true
返回 类型 含义
登录状态 Promise 在 then 中执行已登录的回调，catch 中执行未登录回调
// 校验QQ登录态
const loginObj = new Login();
loginObj
  .checkLogin()
  .then((userInfo) => {
    console.log("已QQ登录");
    console.log(userInfo);
  })
  .catch((e) => {
    console.log(e);
  });
1
2
3
4
5
6
7
8
9
10
11

# QQ 登录

【login】

会先检测当前登录状态，如果当前未登录才会执行登录操作

const loginObj = new Login();
loginObj.login();
1
2

# 获取用户信息

【getUserInfo】

参数 类型 含义
uin/nickname/缺省 string 用户信息
返回 类型 含义
用户信息 string/object uin 获取 qq 号/ nickname 获取昵称/ 缺省 用户信息对象
// 获取用户uin（QQ号）
const loginObj = new Login();
loginObj.getUserInfo("uin");
1
2
3

# 注销 QQ 登录

【logout】

PC 端会存在配置项，移动端无。

const loginObj = new Login();
loginObj.logout();
1
2

# 大区选择

【getAreaInfo】

获取大区信息，拉起弹窗显示，当未绑定大区和更换大区时使用

当选择大区后，会将大区信息存储在 localStorage 中，具体键值对如下

键 值
${uin}_lolAreaInfo 大区名
${uin}_lolAreaId 大区 ID
${uin}_lolAccountInfo 角色信息
const loginObj = new Login();
loginObj.getAreaInfo();
// 选择大区后
console.log(localStorage.getItem("827924130_lolAreaInfo"));
// 艾欧尼亚  电信
console.log(localStorage.getItem("827924130_lolAreaId"));
// 1
console.log(localStorage.getItem("827924130_lolAccountInfo"));
// {"roleName":"小丧尸一号","level":"1","accountId":"2283404133443712"}
1
2
3
4
5
6
7
8
9

# 根据 ID 获取大区名称

【zoneToName】

参数 类型 含义
areaId number 大区 ID
返回 类型 含义
areaName string 大区名称
const loginObj = new Login();
loginObj.zoneToName(1);
// 艾欧尼亚 电信
1
2
3

# 初始化大区信息

【initArea】

登录后自动调用该函数，无参数和返回值

如果绑定大区功能区使用默认的 DOM 结构，则无需绑定事件，否则需要手动为绑定大区和更改大区的 DOM 绑定事件

const loginObj = new Login();
loginObj.initArea();
1
2

# 检测绑定大区状态

【checkBind】

参数 类型 含义
autoBind boolean 未绑定时是否自动拉起绑定弹窗，默认 true 拉起
返回 类型 含义
bindStatus Promise 大区的绑定情况

当用户已绑定大区时会返回用户大区 ID；以下情况会返回 reject 状态

  1. 未登录
  2. 未绑定大区
const loginObj = new Login();
// 未绑定时自动拉起大区绑定
loginObj
  .checkBind()
  .then((areaId)) => {
   console.log('已绑定大区');
   console.log(areaId);
 }）
  .catch(e => {
    // 如果未绑定后拉起大区绑定时执行了绑定，则不会走到catch，catch会捕获错误
   console.log(e);
   // do something
 });
 // 未绑定时不自动拉起大区绑定，返回reject，在catch中处理
loginObj
  .checkBind(false)
  .then((areaId)) => {
   console.log(areaId);
 }）
  .catch(e => {
    // 此处catch的一般是未绑定大区的情况
   console.log(e);
   // unBind
 })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

手游登录 DEMO DEMO (opens new window)

# 背景

LOL 登录功能是十分常见和重要的，为了避免大家到处复制粘贴，以及尽量减少代码的重复率，提高大家开发的体验，将 Login 封装到了 SDK 当中，并且可以单独下载使用。

# 特点

  1. 组件化的调用方式，封装了大量细节，极易上手，代码量少
  2. 自动根据环境加载 milo，自动检测当前页面的登录状态，足够智能
  3. 提供了足量但不过量的配置参数和各个状态钩子，能够分别在初始化/登录后/绑定后/注销后等状态下插入自定义操作，保证了灵活性
  4. 默认的 DOM 设定满足了大多场景下的需要，避免对 DOM 的频繁操

# 更新日志

2020.10.15

  1. 修复移动端登录传参失效问题
  2. 注销回调的 demo 修改
  3. 加入 AMS 绑定大区自适应

2021.04.16

  1. 加入手游的微信登录
Last Updated: 3/27/2022, 11:07:30 PM

Ajax →