npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

tencent-qqnews-user

v0.0.27

Published

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

Downloads

88

Readme

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

因新闻客户端存在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请求失败的都会执行这个方法