实现了几个基于腾讯新闻客户端的h5前端基础组件

蚊子前端博客
发布于 2018-07-19 20:04
在平时工作中做了不少基于新闻客户端的需求，在这些工作中，对其进行汇总提取，形成了这些npm基础组件

在平时工作中做了不少基于新闻客户端的需求，在这些工作中，对其进行汇总提取，形成了这些npm基础组件。有什么不足的地方也希望大家能多多提意见。

  • tencent-downapp 在微信、QQ、浏览器等中打开或者下载指定APP

  • tencent-share 设置h5在微信、QQ、腾讯新闻客户端、腾讯视频的分享信息（标题、描述、图片和链接）；

  • tencent-update 可用户上报一些前端用户数据；

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

tencent-downapp

COPYBASH
npm install tencent-downapp --save-dev

该模块主要用于在外部呼起app时使用，配置好参数后，执行run()方法即可执行打开或者下载操作：

COPYJAVASCRIPT
import AppDownload from 'tencent-downapp';
 
var downapp = new AppDownload({
    openUrl: 'qqnews://article_9527?nm=RSS2018061501588400',
    packageName: 'com.tencent.news',
    downloadUrl: 'http://dldir1.qq.com/dlomg/inews/channel/TencentNews_3932.apk',
    wxhash: '1cbd02bbed81c8a5b990044e9f844eda', // 微信中下载完成时是需要进行hash校验的，并且每次发版，hash值都会变动
    appleStoreId: '399363156',
    appName: '腾讯新闻--百万现金红包派发中...',
    downLogo: 'http://mat1.gtimg.com/news/news/logo.png'
});

// 获取APP的安装状态
downapp.checkAppIsInstalled(function(status){
    if( status ){
        alert( '已安装' );
    }else{
        alert( '未安装' );
    }
});
 
document.querySelector('.btn').addEventListener('click', function(){
    downapp.run(true); // 无视wifi
})

更详细介绍，请查看： https://www.npmjs.com/package/tencent-downapp；

tencent-share

该模块集成了微信、QQ、腾讯新闻客户端、腾讯视频客户端的分享API，可以设置分享的标题、描述、图片和链接。

npm地址： https://www.npmjs.com/package/tencent-share；

COPYBASH
npm install tencent-share --save-dev

使用方式：

COPYJAVASCRIPT
import Share from 'tencent-share';

// 分享信息
var shareData = {
    title: '读腾讯新闻，助力公益事业，让你的时间更有意义',
    desc: '上腾讯新闻，捐阅读时长做公益，一起为爱聚力',
    img: 'http://mat1.gtimg.com/news/qqnews/qqspring/img/logo.png',
    link: window.location.href
};

Share.setShareInfo(shareData);
Share.setShareInWx(shareData, 'friends');

setShareInfo为总方法，调用该方法后，开发者无需关心当前处于什么环境，模块会自动根据UA设置微信、QQ、腾讯新闻客户端、腾讯视频客户端的分享信息。

如果想在不同的环境里设置的信息，下面的这几个方法可以调用：

  • setShareInWx(shareData, type) : 设置页面在微信中的分享信息，type字段稍后讲解；

  • setShareInQQ(shareData) : 设置页面在QQ中的分享信息；

  • setShareInNews(shareData) : 设置页面在新闻客户端中的分享信息；

  • setShareInVideo(shareData) : 设置页面在腾讯视频中的分享信息；

在设置页面在微信中的分享信息的方法里，有个type字段，这个type字段能设置在微信中分别分享给好友、朋友圈、QQ和QQ空间的信息。

setShareInWx(shareData, 'friends')表示分享给好友时的分享信息，type字段有：

  • friends : 分享给好友

  • timeline : 分享到朋友圈

  • qq : 分享给QQ好友

  • qzone : 分享到QQ空间

如果没有分别设置分享信息的需求，直接调用Share.setShareInfo(shareData);即可。

在*新闻客户端*内设置分享信息后，还可以调用show()方法来主动呼起分享面板：

COPYJAVASCRIPT
Share.show(); // 该方法只在新闻客户度内有效

同时，还可以在 *Android版的新闻客户端* 内，禁止该页面的分享功能：

COPYJAVASCRIPT
Share.forbidShareInNews();

tencent-updata

该模块是前端上报数据时使用，封装了几个方法，上传数据时调用即可。

npm地址： https://www.npmjs.com/package/tencent-updata

COPYBASH
npm install tencent-updata --save-dev

简单的使用样例：

COPYJAVASCRIPT
import wzPing from 'tencent-updata';

var wzp = new wzPing({
    user: 123456,
    pwd: 123456
});

wzp.ready([
    function(callback){
        setTimeout(function(){
            callback({
                now: Date.now()
            })
        }, 400);
    }
]);

wzp.send({act: 'PV'})

上面的代码基本上展示出所有的功能了。

注意： 在当前模块中，是创建一个img图片，通过请求img图片的链接，来上报PV请求等。请在使用时修改为您自己的上报地址，修改方法在文章的最后有说明。

1. 初始化

可以把经常要上报的字段或者数据不需要变动的字段，在初始化时就传入进去。这样在后续上报行为中，都会带上这些字段。

代码内部是用data来存储这些数据的，因此初始化完成后，可以用对象直接访问该属性，并对data属性进行修改：

COPYJAVASCRIPT
console.log( wzp.data );

2. ready

在数据上报前，有些字段是需要异步获取的，在上报时需要等待该字段获取到数据后，才能上传，因此，这里设置了一个ready方法，在send()方法前先调用下ready()方法，这样在ready里获取到数据后，自动执行后面的send方法。

调用方式，ready方法接收一个数组，数组的每一项都是一个函数，这个函数都需要传入一个回调方法callback，回调方法里传入异步执行完毕获取到的值，这个值需要用json格式的方式：

COPYJAVASCRIPT
wzp.ready([
    fn(callback);
])

使用样例：

COPYJAVASCRIPT
wzp.ready([
    function(callback){
        setTimeout(function(){
            callback({
                now: Date.now()
            })
        }, 400);
    }
]);

wzp.ready([
    function(callback){
        setTimeout(function(){
            callback({
                random: (Math.random()+'').substr(-6);
            })
        }, 600);
    }
]);

wzp.send({act: 'PV'})

上面的代码中，字段now和random都是异步获取到的，代码里的send会等待这两个字段都获取到后才会执行。

3. send

调用send()方法后就会发送数据上报请求，同时send还能接受一个json格式的参数，用户当前发送时的额外数据，不同的send上报请求之间互不影响。

COPYJAVASCRIPT
wzp.send({act: 'PV'});
wzp.send({page: 'main'}); // 当前请求中不存在act字段

4. sendData

最终的数据上报请求是通过这个方法发送的，我们也可以修改这个sendData方法，来修改数据上报的方式。

不过记得在send()发送请求之前进行修改：

COPYJAVASCRIPT
/**
 * @param data {key1: value1, key2: value2, key3: value3} 上报的字段与对应的数据
 */
wzp.sendData = function(data){
    let s = '',
        item;
        
    for(let key in data){
        item = data[key];
        if( typeof item==='object' ){
            // 若上传的数据为array或者json格式的，则转换为字符串
            item = JSON.stringify(item);
        }

        s += '&' + key + '=' + encodeURIComponent( data[key] );
    }

    let img = new Image(1, 1);
    img.src = 'xxxx.com/updata?v=1'+s+'&_t='+Math.random();
}

tencent-qqnews-user

因新闻客户端存在iOS与Android的系统差异，导致调用客户端提供的jsapi非常不方便，这里就进行了下封装，直接调用即可。用于在腾讯新闻客户端中进行登录、获取用户信息和提交请求等操作。

npm地址： https://www.npmjs.com/package/tencent-qqnews-user

COPYBASH
npm install tencent-qqnews-user

然后在代码中引用即可：

COPYJAVASCRIPT
import User from 'tencent-qqnews-user';

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

1. 登录

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

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

  • qq ：只有QQ登录按钮 ；

  • weixin ： 只有微信登录按钮；

  • qqorweixin； QQ和微信按钮都有，用户可以任意选择

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

样例：

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

注意：

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

2. 退出登录

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

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

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

3. 切换账号

在上面我们已经说过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表示登录失败，比如中断登录等。

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

4. 获取用户信息

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

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

5. 请求接口

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

COPYJAVASCRIPT
User.post({
    url: url, // 请求地址，必传，必须明确协议
    data: {a:1, b:2}, // 参数，可以为空
    success: function(result){ // 请求成功时

    }, 
    error: function(error, url){ // 请求失败时

    },
    complete: function(error, url, result){ // 成功或失败都会执行的方法

    }
})

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

这里有几个要注意的点：

  1. 请求的url必须明确是http://还是https://协议，不能自动适应页面协议；不过您可以用location.prototal来获取当前页面的协议，拼接到URL上，然后再通过post进行请求；

  2. complete方法是无论请求成功还是失败都会执行，第1个参数在请求success时为null，在请求error时有数据

同时，这里还是提供两个额外的方法，记得在post之前定义：

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

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

标签：
阅读(935)

公众号：

qrcode

微信公众号：前端小茶馆

相关文章

代码演示神器——jsfiddle (2014/02/25)
javascript获取URL链接和js链接中的参数 (2015/01/30)
使用node更新google hosts (2015/03/27)
node-socket实现web的即时聊天系统 (2015/04/06)
jshint在gulp中的使用 (2015/10/15)
原生js实现简单的链式操作 (2017/06/19)

公众号：

qrcode

微信公众号：前端小茶馆