移动端以及 PC浏览器页面分享到朋友圈等的功能实现

移动端以及 PC浏览器页面分享到朋友圈等的功能实现

我们经常可以在一些 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,那么可以看看这个 网站,就是下面这个效果,大家应该都见过:
这里写图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/112884.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 世界性能服务器图片欣赏,AMD发布全球最强服务器显卡-AMD,全球最强,服务器显卡,FirePro,S9000,S7000,虚拟机 ——快科技(驱动之家旗下媒体)–科技改变未来…[通俗易懂]

    FireStream虽然死了,但是AMD并没有放弃在高性能计算领域的努力,只不过由FirePro继承了它的遗志。今天,AMD就发布了号称全球最强悍的服务器显卡“FireProS9000”、“FireProS7000”,面向数据中心里的高性能计算、虚拟桌面基础设施(VDI)、工作站图形等领域,都支持微软RemoteFX、VMwareESXInfoCenter、CitrixXenServer…

  • Python+opencv裁剪/截取图片的几种方式

    Python+opencv裁剪/截取图片的几种方式文章目录前言一、手动单张裁剪/截取二、根据图片的位置坐标进行裁剪/截取三、opencv获取边缘并根据boundingbox截取/裁剪目标四、用YOLO目标检测框裁剪并批量保存总结前言在计算机视觉任务中,如图像分类,图像数据集必不可少。自己采集的图片往往存在很多噪声或无用信息会影响模型训练。因此,需要对图片进行裁剪处理,以防止图片边缘无用信息对模型造成影响。本文介绍几种图片裁剪的方式,供大家参考。一、手动单张裁剪/截取selectROI:选择感兴趣区域,边界框框选x,y,w,hselectR

  • debug编写汇编程序_eclipse中的debug

    debug编写汇编程序_eclipse中的debug关于汇编程序debug的使用完整使用教程-干货满满debug的命令符具体使用流程###前言在网上搜索了10min,大多数关于汇编程序debug功能的使用的文章,发现大多数都是一样的,只是简单的介绍了debug的一些命令符之类的,均没有谈及你自己编写的汇编程序应该如何使用debug。这对新人学习汇编很不友好!debug的命令符debug命令符Explain-a逐行汇编…

    2022年10月15日
  • 序列化和反序列化的简单理解[通俗易懂]

    序列化和反序列化的简单理解[通俗易懂]一、序列化和反序列化的概念  把对象转换为字节序列的过程称为对象的序列化。  把字节序列恢复为对象的过程称为对象的反序列化。  对象的序列化主要有两种用途:  1)把对象的字节序列永久地保存到硬盘上,通常存放在一个文件中;  2)在网络上传送对象的字节序列。  在很多应用中,需要对某些对象进行序列化,让它们离开内存空间,入住物理硬盘,以便长期保存。比如最常见的是

  • 设置css属性clear的值为什么时可清除左右两边浮动_clear both

    设置css属性clear的值为什么时可清除左右两边浮动_clear bothDIV+CSSclearboth清除产生浮动我们知道有时使用了cssfloat浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。接下来我们来认识与学习cssclear知识与用法一、clear语法与结构clear:none|left|right|both2、clear参数值说明none: 允

  • laravel 踩坑 env,config

    laravel 踩坑 env,config

    2021年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号