移动端以及 PC浏览器页面分享到朋友圈等的功能实现
我们经常可以在一些 app
上看到分享到朋友圈、微信好友、qq好友等功能,例如 饿了么、美团等 app
,下单之后就会弹出给好友发红包的 modal
窗,这在 app
上很常见,app
的权限可以很大,甚至连启动手机上其他关联软件的权限都可以有,分享到什么朋友圈简直是小菜一碟,而相比之下浏览器的权限就被限制地很小,连读取粘贴板内容的功能有的浏览器都没有。
但是我们有时候依旧可以在浏览器的某些页面上,例如某条新闻页面上看到将新闻分享到朋友圈、微信好友、qq好友、qq空间、微博等的按钮,JS
原生肯定是没办法实现这种操作的,这其实是调用了浏览器自带的特定接口。
上面说了,基于安全等一系列原因,浏览器的权限被限制地很小,分享到朋友圈等目标的接口也只有一小部分浏览器自行实现了。
需要给浏览器接口传递参数,并且在 Android
和 iphone
系统上传递的参数是不一样的:
{
sinaWeibo: ['kSinaWeibo', 'SinaWeibo', 11, '新浪微博'],
weixin: ['kWeixin', 'WechatFriends', 1, '微信好友'],
weixinFriend: ['kWeixinFriend', 'WechatTimeline', '8', '微信朋友圈'],
QQ: ['kQQ', 'QQ', '4', 'QQ好友'],
QZone: ['kQZone', 'QZone', '3', 'QQ空间']
}
QQ浏览器中,需要多调用两个接口:
http://3gimg.qq.com/html5/js/qb.js
http://jsapi.qq.com/get?api=app.setShareInfo,app.share
初始化方法两个浏览器基本上一致,最关键的则是调用分享接口的几行代码
如果是 QQ浏览器,则:
// 1. 高版本 QQ浏览器调用的接口
browser.app.share(shareConfig)
// 2. 低版本 QQ浏览器调用的接口
window.qb.share(shareConfig)
其中,需要根据 QQ浏览器的版本高低调用不同的接口来实现,这里可以看到,实际上是调用了 browser
或者 window.qb
这两个全局对象,这两个对象就是 QQ浏览器自己封装的全局对象,用于方便调用一些浏览器的特有功能,分享接口就是封装在了这个特有的接口之内。
至于 UC浏览器
,则是另外的接口:
// 1.第一种接口
ucweb.startRequest('shell.page_share', [title, img, url, to_app, '', '', '']) // 2. 第二种接口
web_share(title, img, url, to_app, '', '@' + from, '')
ucweb
和 web_share
就是 UC浏览器
自行封装的浏览器接口,根据浏览器版本的不同,两个封装接口应该只会同时出现一个,需要判断到底哪一个接口存在,自行判断一下即可,例如 typeof ucweb === 'undefined'
注:最新版的
UC浏览器
,这两个接口似乎都没用了
各浏览器接口不一致不统一,实现的浏览器也很少,而且还很复杂,想要在浏览器中实现分享功能没点时间和耐心很难完成,究其原因,我估计应该是浏览器都自带了分享的按钮,想培养用户使用自带功能的习惯,提供对外的接口可能还有安全之类的因素,所以干脆就不提供了。
例如百度浏览器的右上角就有一个系统级的按钮,点击后底部弹窗中就有分享的按钮:
如果真的想要实现移动端网页内的分享功能, Github 上有个项目做得很不错,可以尝试用一下。
另外,PC
端虽然无法调起 微信 和 QQ
这些 APP
,但也可以进行分享到微博、豆瓣、WebQQ等的操作,同样有个可以开箱即用的项目 share.js
最后,如果你只是想把当前页面分享出去,不用管什么网站数据之类的东西,也不想管分享功能到底怎么使用,最好复制粘贴就 ok
,那么可以看看这个 网站,就是下面这个效果,大家应该都见过:
最新文章
- Altium Designer 文档信息设置以及模板制作
- CUTE FTP 控制连接已关闭
- ASP.NET中EVAL用法大全
- JSOI球形空间产生器 (高斯消元)
- Flex通过Blazeds利用Remoteservice与后台java消息推送
- OpenGL中投影矩阵的推导
- Android 如何添加一种锁屏方式
- AngularJs的Select演示
- java笔记7之录入
- Unity3d 打包时报错 CommandInvokationFailure: Unable to convert classes into dex format. See the Console for details.
- NetFPGA-1G-CML点亮 LED
- Linux 桌面玩家指南:03. 针对 Gnome 3 的 Linux 桌面进行美化
- python爬虫scrapy项目详解(关注、持续更新)
- hibernate框架学习之数据查询(QBC)
- HTML&;javaSkcript&;CSS&;jQuery&;ajax(七)
- 在Ubuntu16.04下面安装asterisk网络电话交换机服务器
- 洛谷P3375KMP字符串匹配
- 【Java】Springboot-Quartz-分布式任务调度
- 2016NOI冬令营day2
- mongodb启动与运用