在平时工作中做了不少基于新闻客户端的需求,在这些工作中,对其进行汇总提取,形成了这些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登录,那么再次使用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请求都会接收到。这个方法通过客户端发起调用接口时,会自动带上客户端的信息和用户的信息(如果他已登录的话)。因此后端在接收到前端通过这种方式发送过来的请求时,可以拿到相应的设备信息和用户信息,前端无需显式的带上当前设备和当前用户的信息。
这里有几个要注意的点:
请求的url必须明确是
http://
还是https://
协议,不能自动适应页面协议;不过您可以用location.prototal
来获取当前页面的协议,拼接到URL上,然后再通过post进行请求;complete方法是无论请求成功还是失败都会执行,第1个参数在请求success时为null,在请求error时有数据
同时,这里还是提供两个额外的方法,记得在post之前定义:
User.postSuccess(url, result)
: 所有通过post请求成功
的都会执行这个方法,那么可以通过这个方法来进行接口数据上报的操作;
User.postError(error, url)
: 所有通过post请求失败
的都会执行这个方法