nativeShare 移动端浏览器调用原生分享插件

1,436 阅读2分钟

原文地址 github.com/fa-ge/nativ…

起因

最近有一个活动页需要在移动端浏览器分享网页到微信,QQ。虽然每一个浏览器都有分享到微信的能力,但不是每个都提供接口供网页来调用。及时有提供,浏览器暴露出的api也各不相同,而我写nativeShare的目的只是为前端开发者提供一致的api来调用浏览器的原生分享组件。

兼容性

  • QQ浏览器
  • UC浏览器
  • android百度浏览器
  • 微信自带浏览器
  • QQ自带浏览器(即将支持)

存在的问题

  • UC浏览器安卓端不能设置icon
  • 百度浏览器安卓端不能指定分享
  • ios UC浏览器分享到微博有问题

示例

demo<img src="https://pic3.zhimg.com/v2-bb2a61a0dc958d7a95b131348cf10b5a_b.png" data-rawwidth="300" data-rawheight="300" class="content_image" width="300">

使用

支持ES6模块,AMD,CMD引入
如果你的项目没有模块化。你也可以直接用script标签引入NativeShare.js。可以参考demo

import nativeShare from 'nativeshare'

// 如果你需要在微信浏览器中分享,那么你需要在最开始setShareData之前调用,不需要在微信中分享不需要调用setWechatConfig
// 特别提示一下微信分享有一个坑,不要分享安全域名以外的链接(具体见jssdk文档),否则会导致你配置的文案无效
nativeShare.setWechatConfig({
      appId: '',
      timestamp: '',
      nonceStr: '',
      signature: '',
  })

// 设置分享文案
nativeShare.setShareData({
    icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
    link: 'fa-ge/nativeShare',
    title: 'nativeShare',
    desc: 'nativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
    from: '@fa-ge',
})

// 唤起浏览器原生分享组件(如果在微信中不会唤起,此时callShare方法只会设置文案。类似setShareData)
try {
    nativeShare.callShare()
} catch(err) {
  // 如果不支持,你可以在这里做降级处理
}

API

nativeShare一共只有三个实例方法

  • getShareData() 获得分享的文案
  • setShareData() 设置分享的文案
  • callShare(command = ‘default’, [options]) 调用浏览器原生的分享组件

还有就是针对微信的实例方法 setWechatConfig。

setShareData设置文案的格式为

{
    icon: '',
    link: '',
    title: '',
    desc: '',
    from: '',
    // 以下几个回调目前只有在微信中支持
    success: noop,
    fail: noop,
    cancel: noop,
    trigger: noop,
}

调用callShare方法时第一个参数是指定用什么命令调用分享组件。目前支持6个命令。分别是

  • default 默认,调用起底部的分享组件,当其他命令不支持的时候也会调用该命令
  • timeline 分享到朋友圈
  • appMessage 分享给微信好友
  • qq 分享给QQ好友
  • qZone 分享到QQ空间
  • weiBo 分享到微博

交流

如果你是浏览器开发者或者你知道其他浏览器调用分享的方式,请务必一定要告诉我。