Nevertheless Published Mine

    tencent-qqnews-user

    0.0.27 • Public • Published

    用于在腾讯新闻客户端中进行登录、获取用户信息和提交请求等操作

    因新闻客户端存在iOS与Android的系统差异,导致调用客户端提供的jsapi非常不方便,这里就进行了下封装,直接调用即可。

    使用方式:

    首先下载该模块

    npm install tencent-qqnews-user --save-dev

    然后在代码中引用即可:

    import User from 'tencent-qqnews-user';

    或者直接使用script标签引入:

    https://unpkg.com/tencent-qqnews-user

    接下来是几个方法的使用方式。

    1. 登录 User.login

    登录的方法是login(string logintype, function callback),这里接收两个参数。

    第1个参数登录的方式有:

    • qq :只有QQ登录按钮;
    • weixin : 只有微信登录按钮;
    • qqorweixin; QQ和微信按钮都有,用户可以任意选择

    第2个参数是登录后的回调, true表示登录成功; false表示登录失败,比如中断登录等。

    样例:

    User.login('qqorweixin', result=>{
        if(result){
            alert('登录成功');
        }else{
            console.log( '取消登录' );
        }
    });

    注意:

    在iOS的新闻客户端中,不论用户是否已经登录,都可以使用User.login再次呼起登录;在Android的新闻客户端中,若呼起的登录方式与当前的登录态相同,则直接回调为false,不会弹出登录窗口,比如当前为QQ登录,那么再次使用qq或者qqorweixin呼起登录时,都会直接回调为false。 同时,在这两个系统的新闻客户端内,若再次呼起登录的方式,与当前的登录状态不一样,则后登录的账户会作为副账户存在,不会顶掉当前主账户的信息。

    2. 退出登录 User.logout

    退出登录的方法是: User.logout(),没有参数

    User.logout(); // 退出登录

    在iOS里则会直接退出账户,而在Android的客户端里,则会弹窗让用户确认是否退出。

    3. 切换账号 User.changeLogin

    在上面我们已经说过User.login会存在两个问题:

    • Android下若呼起的登录方式与当前的登录态相同,则无法重新登录;
    • iOS和Android下,若呼起的登录方式与当前的登录态不同是,则后登录的账号作为副账户存在

    为了解决这两个问题,客户端还提供了切换账号的功能,其实就是: 退出当前账号(logout)+重新登录(login)。若我们使用上面两个方式的组合来让用户重新登录,iOS下没问题,但在Android下,退出账号时会首先弹窗确认,而这个弹窗确认是不会阻止后面的login进程的,login就会进入到自己的判断流程,导致login失败。

    这里我们使用User.changeLogin(string logintype, function callback)来切换账号,切换账号的方法是客户端提供的,虽然流程还是 退出当前账号(logout)+重新登录(login),但能正常切换。

    传递的参数与login相同:

    第1个参数登录的方式有:

    • qq :只有QQ登录按钮 ;
    • weixin : 只有微信登录按钮;
    • qqorweixin; QQ和微信按钮都有,用户可以任意选择

    第2个参数是登录后的回调, true表示登录成功; false表示登录失败,比如中断登录等。

    User.changeLogin('qq', result=>{
        if( result ){
            alert( '切换账号成功' );
        }else{
            console.log( '中断切换' );
        }
    });

    4. 获取用户信息 User.getUserInfo

    如果想要展示用户的昵称、头像等信息,可以用User.getUserInfo接口来获取,回调的字段里包含了当前用户的登录方式、昵称、头像和openid(QQ方式登录时为其qq号):

    /*
    result = {
        logintype: 'qq', // 'weixin',当前的登录方式;若为空,则表示未登录;以下字段均在登录后才存在
        nickname: '', // 昵称
        avatar: '', // 头像
        openid: '' // 微信账号的openid或者QQ账号的qq号,均以openid字段返回
    };
    */
    User.getUserInfo(result=>{
        alert( JSON.stringify(result) );
    })

    5. 请求接口 User.post

    客户端里也有提供请求接口的方法,不用额外引入ajax等模块:

    这里内部调用的是客户端提供的方法,虽说名字是post,但在实际使用中发现,get请求和post请求都会接收到。这个方法通过客户端发起调用接口时,会自动带上客户端的信息和用户的信息(如果他已登录的话)。因此后端在接收到前端通过这种方式发送过来的请求时,可以拿到相应的设备信息和用户信息,前端无需显式的带上当前设备和当前用户的信息。

    User.post({
        url: url, // 请求地址,必传,必须明确协议
        data: {a:1, b:2}, // 参数,可以为空
        success: function(result){ // 请求成功时
     
        }, 
        error: function(error, url){ // 请求失败时
     
        },
        complete: function(error, url, result){ // 成功或失败都会执行的方法
     
        }
    })

    同时,在0.0.5版本里,User.post方法返回的是Promise对象,可以使用thencatch来接收数据:

    User.post({
        url: url, // 请求地址,必传,必须明确协议
        data: {a:1, b:2}, // 参数,可以为空
    }).then(result=>console.log(result)) // success
    .catch(err=>console.error(err)) // fail

    传递参数有以下几个方法,都是可以的:

    1. url与传递的参数写在一个object里
    User.post({
        url,
        data
    })
    1. url作为第一个参数,传递的参数作为第二个传参
    User.post(url, {
        data: {a:1},
        success: function(result){
            console.log(result);
        }
    })
    User.post(url, {
        data: {a:1}
    }).then(result=>console.log(result))
    1. 只有url时
    User.post(url, {
        success: function(result){
            console.log(result);
        }
    })
    User.post(url)
        .then(result=>console.log(result))

    这里有几个要注意的点:

    1. 请求的url必须明确是http://还是https://协议,不能自动适应页面协议;不过您可以用location.prototal来获取当前页面的协议,拼接到URL上,然后再通过post进行请求;
    2. complete方法是无论请求成功还是失败都会执行,第1个参数在请求success时为null,在请求error时有数据

    同时,这里还是提供两个额外的方法,记得在使用post之前定义:

    User.postSuccess(error, url, result): 所有通过post请求成功的都会执行这个方法,那么可以通过这个方法来进行接口数据上报的操作;

    User.postError(error, url): 所有通过post请求失败的都会执行这个方法

    Install

    npm i tencent-qqnews-user

    DownloadsWeekly Downloads

    8

    Version

    0.0.27

    License

    ISC

    Unpacked Size

    142 kB

    Total Files

    6

    Last publish

    Collaborators

    • xiaowenzi