移动端以及 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，那么可以看看这个网站，就是下面这个效果，大家应该都见过：

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

SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤
SpringMVC实现微信链接分享到朋友圈显示图片功能微信JS-SDK调用步骤一.登录微信平台 login url:https://mp.weixin.qq.com/ name: your name ...
vue页面分享微信朋友圈
个人博客地址微信官方文档注:1.web的分享只能通过微信右上角自带的三个点分享,只有app才能实现自定义按钮的分享. 步骤: 1.安装 :npm i -S weixin-js-sdk 2.新建js ...
js+插件实现代码复制及动态生成二维码扫描、分享到朋友圈QQ空间功能
1.代码复制功能需要插件支持ZeroClipbroad,引入js:jquery.zclip.min.js;ZeroClipboard.js;ZeroClipboard.swf 2.jsp功能代码: & ...
H5页面分享到朋友圈，自定义标题描述封面图前端+php代码
<script type="text/javascript"> console.log('huati') wx.config({ ...
plsql developer无监听程序_微信小程序支持分享到朋友圈啦！技术解读跟我来
千呼万唤始出来!微信小程序页面分享到朋友圈的功能,终于在安卓系统灰度测试了!目前只在安卓系统!只在安卓系统!只在安卓系统!iOS系统还没有办法体验. 首先,我们看一下官方文档的描述,解读一下小程序分享 ...
微信小程序如何直接分享到朋友圈？
近日微信终于公开了小程序分享到朋友圈,下面就分享一下技术上如何将小程序分享到朋友圈吧. 官方技术文档如下: 分享到朋友圈(Beta) 从基础库 2.11.3 开始支持此功能为beta版,暂仅在And ...
重磅：小程序将可分享到朋友圈啦！
昨天(6日)深夜,几张小程序截图在行业中流传,截图显示,小程序已可正式分享到朋友圈. 这表明,微信最大的流量池将向小程序敞开,毫无疑问,小程序也将迎来更大一轮爆发. 如下四张截图,正是部分行业群内流传 ...
android微信分享走小程序流程,教你怎么把微信小程序分享到朋友圈
教你怎么把微信小程序分享到朋友圈 2020年07月13日 | 萬仟网移动技术 | 我要评论 7月8日收到邀请,可将小程序页面分享到朋友圈.适用于内容型页面的分享,不适用于有较多交互的页面分享.该功能为 ...
android分享朋友圈功能,微信小程序实现分享至朋友圈的功能来啦
微信小程序「分享至朋友圈」能力,终于来了!(之前,我相信大部分微信小程序的开发者都是用"分享卡片"的形式,手动调用wx.createCanvasContext生成一张图片,让用户生 ...
小程序分享朋友圈_重磅：小程序将可分享到朋友圈
昨天( 6 日)深夜,几张小程序截图在行业中流传,截图显示,小程序已可正式分享到朋友圈. 这表明,微信最大的流量池将向小程序敞开,毫无疑问,小程序也将迎来更大一轮爆发. 如下四张截图,正是部分行业群内 ...

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

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

最新文章

热门文章