移动端以及 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://www.cnblogs.com/lxwphp/p/9667961.html

时间: 2024-08-04 10:17:44

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

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

虽然微信提供了jssdk,不代表可以点击按钮进行分享到朋友圈,是需要微信自带的浏览器右上角进行分享.手机浏览器需要浏览器支持分享到朋友圈的分享机制. 微信jssdk地址: https://mp.weixin.qq.com/wiki?action=doc&id=mp1421141115&t=0.6985271624097684#0 npm安装微信的jssdk安装包: main.js中引入jssdk 需要分享的页面引入wx: 需要进行wx.config配置 wx.config的配置内容需要后台

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

转载(声明:仅供学习使用) /** * 此插件主要作用是在UC和QQ两个主流浏览器 * 上面触发微信分享到朋友圈或发送给朋友的功能 * 代码编写过程中 参考: * http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js * 此外,JefferyWang的项目对我也有一定启示: * https://github.com/JefferyWang/nativeShare.js * * @revisor [email prot

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

用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaimg.cn/wap/module/share/201504071745/js/addShare.min.js 从里面抽离出了分享调用的方法,方便调用.(注意:这个分享功能只在UC手机浏览器有效) if (/AppleWebKit.*Mobile/i.test(navigator.userAgent)

微信公众平台 分享到朋友圈 js代码

前言:1目前必须是被微信认证过的公众平台才能使用此接口 1.绑定域名 2.引用文件 http://res.wx.qq.com/open/js/jweixin-1.0.0.js 3配置前台js配置 var url = location.href.split('#')[0]; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印. appId: '

微信开发-发送给朋友,分享到朋友圈开发

微信分享功能开发 用了一天时间,把微信发送给朋友和分享到朋友圈功能开发出来,在这里给大家分享一下,避免大家走弯路. 一.服务器端程序 package com.wiimedia.controller; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.text.ParseException; import

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

之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注入权限验证配置以及签名算法实现的Java版本 前两天在做微信分享的时候发现按照以前的思路每次都不能正确获取"分享到朋友圈"按钮点击状态及自定义分享内容接口,而是必须通过一个按钮先点击帮点事件,然后才能获取"分享到朋友圈"按钮点击状态及自定义分享内容接口. 回顾一下以前扫

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

最近研究怎么实现微信小程序分享至朋友圈,对就是朋友圈. 微信小程序目前没有直接提供方法来将小程序分享至朋友圈,不过可以采用曲线救国的方式来达到目的. 方法分两步: 1.通过浏览器将希望分享的东西风向至朋友圈: 微信小程序没有任何入口可以进入到微信的浏览器中,那么就更加不可能让用户进入到自身操作系统中的浏览器进行分享. 那么怎么通过其他的途径来达到次目的呢? 答案是:客服消息 微信小程序本身提供客服消息是用来更好的为客户服务的,但是请看以下截图: 小程序提供了入口,允许用户给客服发送消息,同时,也

微信 分享到朋友圈 代码

<script> var imgUrl = "图片地址"; var lineLink = window.location.href; var descContent = '描述'; var shareTitle = '标题'; var appid = ''; function shareFriend() { WeixinJSBridge.invoke('sendAppMessage',{ "appid": appid, "img_url&quo

利用WeixinJSBridge,控制分享到朋友圈和转发给好友的行为

在微信里,其实可以改变"分享到朋友圈"和"转发给好友"的默认行为.这些js接口,截止到今天(安卓版微信6.0)还是不公开的,微信的官方文档里完全没有提到,但是其实借助WeixinJSBridge是可以做到的 分享行为 可以控制以下几种行为 缩略图 默认是微信自动截取当前页面中第一张大图,也就是<img>标签,而且width要超过一定的值.display:none和background-image是不算的,只能是<img>标签 但是通过传递参数