TGLogin.js

有这么一个场景存在，一个传播类的H5页面，无涉及任何后台功能，但要求在朋友圈传播时，分享文案显示成用户的微信昵称，分享图片显示成用户的微信头像。前端重构的同学将H5页面制作完成，就差获取用户的微信昵称和头像了，而微信昵称和头像恰恰涉及到微信登录功能，这个时候就可以使用此组件来实现

移动端登录DEMO演示

DEMO1 《龙之谷》

源码地址：

view-source:dn.qq.com/act/a20170310TGLoginDemo/

功能描述：

1. 用微信扫描二维码进行微信登录（手动确认登录，有授权登录页显示游戏名称）；
2. 用手Q扫描二维码进行手Q登录；
3. 用浏览器（非微信、手Q）扫描二维码会拉起微信APP打开页面

DEMO2 《王者荣耀》

源码地址：

view-source:pvp.qq.com/act/a20170310TGLoginDemo/

功能描述：

1. 用微信扫描二维码进行微信登录（手动确认登录，有授权登录页显示游戏名称）；
2. 用手Q扫描二维码进行手Q登录；
3. 用浏览器（非微信、手Q）扫描二维码会拉起手Q APP打开页面

DEMO3 《火影忍者》

源码地址：

view-source:hyrz.qq.com/act/a20170310TGLoginDemo/

功能描述：

1. 用微信扫描二维码会拉起手Q APP打开页面；
2. 用手Q扫描二维码进行手Q登录；
3. 用浏览器（非微信、手Q）扫描二维码进行手Q登录

DEMO4 《剑侠情缘》

源码地址：

view-source:jxqy.qq.com/act/a20170310TGLoginDemo/

功能描述：

1. 用微信扫描二维码进行微信登录（手动确认登录，有授权登录页显示游戏名称）；
2. 用手Q扫描二维码会拉起微信APP打开页面；
3. 用浏览器（非微信、手Q）扫描二维码会拉起微信APP打开页面

PC端登录DEMO演示

PC端登录DEMO演示

源码地址：

view-source:luobo3.qq.com/act/a20170310TGLoginDemo/

功能描述：

1. 点击页面右上角“用户登录”按钮进行“微信登录”或“QQ登录”；
2. 登录成功后，页面右上角会显示您的头像和昵称；
3. 点击页面右上角“注销”按钮退出登录，可重复步骤1切换登录

快速上手

[warning] 注意

请勿复制以下代码，直接用上面demo源码改appid，然后放到对应游戏域名下面就能测试

TGLogin.init({
    device: 'pc', //'m'代表移动端登录;'pc'代表PC端登录;默认是移动端登录
    wxAppId: '' //游戏在微信平台的appId，让重构审核联系dereksu获取}, function (TGLoginManager) {
    //打印API列表
    console.log(TGLoginManager.apiList);

    //登录弹窗显示或隐藏
    var dialog = function (type) {
        if (type === 'hide') {
            $('#pop,#mask').hide();
        } else {
            $('#pop,#mask').show();
        }
    };

    //显示登录弹窗
    $('#login_btn').click(function () {
        dialog('show');
    });

    //隐藏登录弹窗
    $('#close_pop').click(function () {
        dialog('hide');
    });

    //检查是否已登录
    TGLoginManager.pcCheckLogin(function (uinfo) {
        console.log(uinfo);
        //已登录uinfo为用户信息对象;未登录uinfo为false
        if (uinfo) {
            //设置信息
            $('#nickname').text(uinfo.nickname || '我');
            $('#headimg').attr('src', uinfo.headimgurl);
        }
    });

    //微信扫描登录
    $("#wx_login").click(function () {
        dialog('hide');
        TGLoginManager.pcWXLogin();
    });

    //QQ登录
    $("#qq_login").click(function () {
        dialog('hide');
        TGLoginManager.pcQQLogin();
    });

    //注销
    $('#logout_btn').click(function () {
        TGLoginManager.logout();
    });});

说明文档

表格1

表格2

表格3（微信用户信息）

表格4（QQ用户信息）