我们经常可以在一些 app上看到分享到朋友圈、微信好友、qq好友等功能,例如 饿了么、美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启动手机上其他关联软件的权限都可以有,分享到什么朋友圈简直是小菜一碟,而相比之下浏览器的权限就被限制地很小,连读取粘贴板内容的功能有的浏览器都没有。

但是我们有时候依旧可以在浏览器的某些页面上,例如某条新闻页面上看到将新闻分享到朋友圈、微信好友、qq好友、qq空间、微博等的按钮,JS原生肯定是没办法实现这种操作的,这其实是调用了浏览器自带的特定接口。


上面说了,基于安全等一系列原因,浏览器的权限被限制地很小,分享到朋友圈等目标的接口也只有一小部分浏览器自行实现了。


需要给浏览器接口传递参数,并且在 Androidiphone系统上传递的参数是不一样的:

{
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, '')

ucwebweb_share就是 UC浏览器自行封装的浏览器接口,根据浏览器版本的不同,两个封装接口应该只会同时出现一个,需要判断到底哪一个接口存在,自行判断一下即可,例如 typeof ucweb === 'undefined'

注:最新版的 UC浏览器,这两个接口似乎都没用了

各浏览器接口不一致不统一,实现的浏览器也很少,而且还很复杂,想要在浏览器中实现分享功能没点时间和耐心很难完成,究其原因,我估计应该是浏览器都自带了分享的按钮,想培养用户使用自带功能的习惯,提供对外的接口可能还有安全之类的因素,所以干脆就不提供了。

例如百度浏览器的右上角就有一个系统级的按钮,点击后底部弹窗中就有分享的按钮:

如果真的想要实现移动端网页内的分享功能, Github 上有个项目做得很不错,可以尝试用一下。

另外,PC端虽然无法调起 微信 和 QQ这些 APP,但也可以进行分享到微博、豆瓣、WebQQ等的操作,同样有个可以开箱即用的项目 share.js

最后,如果你只是想把当前页面分享出去,不用管什么网站数据之类的东西,也不想管分享功能到底怎么使用,最好复制粘贴就 ok,那么可以看看这个 网站,就是下面这个效果,大家应该都见过:

移动端以及 PC浏览器页面分享到朋友圈等的功能实现的更多相关文章

  1. vue项目中分享到朋友圈,调用微信接口

    虽然微信提供了jssdk,不代表可以点击按钮进行分享到朋友圈,是需要微信自带的浏览器右上角进行分享.手机浏览器需要浏览器支持分享到朋友圈的分享机制. 微信jssdk地址: https://mp.wei ...

  2. JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片,分享给朋友)

    钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...

  3. UC浏览器 分享到朋友圈和微信好友 分类: JavaScript 2015-04-28 14:45 615人阅读 评论(1) 收藏

    用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaim ...

  4. UC浏览器 分享到朋友圈和微信好友

    用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaim ...

  5. 微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈,拍照,扫一扫等功能)

    一.使用JSSDK需要一个公众号(需要认证!): (1).把自己项目的服务器地址输入. (2).把MP_verify_m7Qp93BAuIGDWRVO.txt  文件下载下来,放到该服务器域名指向的根 ...

  6. UC和QQ两个主流浏览器 * 点击触发微信分享到朋友圈或发送给朋友的功能(转载)

    转载(声明:仅供学习使用) /** * 此插件主要作用是在UC和QQ两个主流浏览器 * 上面触发微信分享到朋友圈或发送给朋友的功能 * 代码编写过程中 参考: * http://mjs.sinaimg ...

  7. 微信小程序分享至朋友圈的方法

    最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至 ...

  8. 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

    之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...

  9. 微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈

    分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = n ...

随机推荐

  1. Python开发利器Pycharm

    可以新建项目的时候,在下面的小扳手那里创建虚拟化环境.若想安装包,直接file->setting里面找到对应项目,然后添加新的包即可.   视频地址:http://edu.51cto.com/c ...

  2. Vue+jquery上拉加载

    <ul> <li class="new-list" v-for="item in proarr"> <a :href=" ...

  3. linux负载均衡(什么是负载均衡)

    linux负载均衡(什么是负载均衡) 一.总结 一句话总结: 建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽.增加吞吐量.加强网络数据处理能力.提高网络的灵活性和可用 ...

  4. 深入浅出 Java Concurrency (10): 锁机制 part 5 闭锁 (CountDownLatch)[转]

    此小节介绍几个与锁有关的有用工具. 闭锁(Latch) 闭锁(Latch):一种同步方法,可以延迟线程的进度直到线程到达某个终点状态.通俗的讲就是,一个闭锁相当于一扇大门,在大门打开之前所有线程都被阻 ...

  5. Delphi 设计模式:《HeadFirst设计模式》Delphi代码---工厂模式之抽象工厂[转]

     1  2 {<HeadFirst设计模式>工厂模式之抽象工厂 }  3 { 抽象工厂的产品                       }  4 { 编译工具:Delphi7.0     ...

  6. 使用内部Servlet转发JSP后页面的JS,CSS等资源引入问题的解决

    转载自:https://blog.csdn.net/weixin_44353336/article/details/90677792 问题原因 我们在进行web项目开发过程中,经常会在web页面引入一 ...

  7. CentOS 6.5 服务器相关配置

    vi /etc/sysconfig/network-scripts/ifcfg-eth0 #配置网卡 ONBOOT=YES #静态IPBOOTPROTO=static #启用地址协议 --static ...

  8. Scrapy下载器中间件实现随机请求头和代理ip

    一.设置随机请求头 class UAMiddleWare(object): UA_LIST = [ 'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; ...

  9. 高斯消元和高斯约旦消元 Gauss(-Jordan) Elimination

    高斯消元法,是线性代数中的一个算法,可用来求解线性方程组,并可以求出矩阵的秩,以及求出可逆方阵的逆矩阵. 在讲算法前先介绍些概念 矩阵的初等变换 矩阵的初等变换又分为矩阵的初等行变换和矩阵的初等列变换 ...

  10. spring源码学习之bean的加载(三)

    接着二中的继续写,那个都超过1000行了,哈,需要重新写一个,要不太长了,我都看不下去了 7.4 初始化bean doCreateBean函数中有这样一行代码:这行代码中initializeBean函 ...