移动端以及 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,那么可以看看这个 网站,就是下面这个效果,大家应该都见过:
这里写图片描述

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • AppFabric_RAZApp

    AppFabric_RAZAppAppFabric的开发相对还是很简单的,最常见的方法无非是声明一个缓存接口,然后由各种缓存实现.具体的使用除了msdn:http://msdn.microsoft.com/zh-cn/library/hh334305这是实例包的下载地址:http://www.microsoft.com/en-us/download/confirmation.aspx?id=19603这篇博客介绍得不错.使用微软

    2022年10月17日
    5
  • 图形的绘制_二维图形绘制

    图形的绘制_二维图形绘制作者:furenjun本文内容:一.认识System.Drawing类二了解GDI三.掌握常用的绘图方法3.1绘制一些简单的图形3.2绘制一个多色的矩形3.3绘制一个渐变的矩形3.4绘制一个多色渐变的矩形四.应用本文学到的方法打造属于自已的第一批图形4.1电子屏效果4.2霓虹灯效果4.3进度条显示效果 前言   …

    2025年9月24日
    6
  • Android传感器开发与智能设备案例实战_Android移动应用开发

    Android传感器开发与智能设备案例实战_Android移动应用开发学习内容Ø传感器的基本概念ØAndroid中常见的传感器Ø如何在Android中开发传感器应用能力目标Ø了解传感器的基本概念Ø掌握Android中常见的传感器Ø掌握Android环境下如何使用SensorSimulator进行传感器开发Ø熟练掌握加速度传感器的开发步骤Ø熟练掌握方向传感器的开发步骤本章简介Android是一个面向应用程序开发的丰富平台,它除了拥有许多具有吸引力的用户

    2022年9月27日
    3
  • java编程软件下载_Ee Java(Java编程软件) V1.1.0 官方版

    java编程软件下载_Ee Java(Java编程软件) V1.1.0 官方版EeJava是一款专业实用的Java中文编程软件,基于java技术开发,继承其强大、稳定、安全、高效、跨平台等多方面的优点,目前是内测版本,后期会开源!【使用说明】将下载的jdkJRE替换软件目录中的JDKJRE配置环境变量1.安装完成后,右击我的电脑,点击属性,选择高级系统设置2.选择高级选项卡,点击环境变量在系统变量中设置3项属性,JAVA_HOME、PA…

    2022年7月7日
    20
  • nextline函数_nextLine()和next()的区别和使用方法

    nextline函数_nextLine()和next()的区别和使用方法最近在笔试,刷剑指Offer时,都是只需要把方法实现了就行。但是!!!笔试时候会发现,大部分会要求你把main函数也code出来,真是醉了,第一次笔试时候搞的晕乎乎的…..废话不多说,那么在写输入输出中,肯定要用到Scanner类了,其中不少都需要读取一个整数或者一个整型数组。当读入整数时(以int为例),直接就nextInt()就好,可是当读入一个整型数组时(数字之间用空格隔开),就涉及到用…

    2022年6月8日
    33
  • 利用IAR Timeline工具测试delay函数执行时间

    利用IAR Timeline工具测试delay函数执行时间”要把大象放冰箱,总共分几步”,呵呵,写到本篇博客的时候突然想起小品宋丹丹说的那句经典台词了(俺们东北人儿对本山大叔的作品真是滚瓜烂熟了,搞的舍友还时不时跟我学上一学),哈哈,所以就索性给题目也加上了“几步”的说法,把复杂的事情简单化,也起到吸引人眼球的作用(当然本篇也是有实料的,进来的不会让你失望的,呵呵)。咳咳,至于到底是几步,是不是传说中的“三步”来,哈哈,那还得下面分解。。。  

    2022年5月21日
    43

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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