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

2019年8月25日 141次阅读 来源: fage

原文地点 https://github.com/fa-ge/NativeShare/blob/master/README.md

原由

近来有一个运动页须要在挪动端浏览器分享网页到微信，QQ。虽然每一个浏览器都有分享到微信的才能，但不是每一个都供应接供词网页来挪用。实时有供应，浏览器暴露出的api也各不相同，而我写NativeShare的目标只是为前端开发者供应一致的api来挪用浏览器的原生分享组件。大小uglify + gzip = 4k。

兼容性(毫无疑问是兼容浏览器最多的插件了)

  • 挪动端险些一切浏览器都支撑分享到QQ和QQ空间

  • QQ浏览器

  • UC浏览器

  • 微信自带浏览器(只能设置案牍，分享须要用户手动点击右上角)

  • ios QQ自带浏览器(只能设置案牍，分享须要用户手动点击右上角)

  • QQ空间APP(只能设置案牍，分享须要用户手动点击右上角)

  • android百度浏览器

  • 支撑分享到web微博

  • 行将支撑(安卓QQ自带浏览器）

存在的题目

  • 虽然险些一切的浏览器都支撑分享到QQ和QQ空间，然则webview中基础都邑不支撑。我也很难推断当前浏览器是不是支撑，浏览器是不是唤起QQ APP我也很难推断，一切除了上述支撑的浏览器，APP外其他状况挪用分享到QQ我也会抛出非常。

  • 安卓的QQ自带浏览器分享有题目

  • UC浏览器安卓端不能设置icon

  • 百度浏览器安卓端不能指定分享

示例

demo

《nativeShare 挪动端浏览器挪用原生分享插件》

运用

支撑ES6模块,AMD，CMD引入
假如你的项目没有模块化。你也能够直接用script标签引入NativeShare.js。能够参考demo

import NativeShare from 'nativeshare'

// 先建立一个实例
var nativeShare = new NativeShare()
// 假如你须要在微信浏览器中分享，那末你须要设置分外的微信设置
// 迥殊提醒一下微信分享有一个坑，不要分享平安域名之外的链接(详细见jssdk文档)，否则会致使你设置的案牍无效
// 建立实例应当带参数
var nativeShare = new NativeShare({
  appId: '',
  timestamp: '',
  nonceStr: '',
  signature: '',
})

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

// 唤起浏览器原生分享组件(假如在微信中不会唤起，此时call要领只会设置案牍。相似setShareData)
try {
    nativeShare.call()
    // 假如是分享到微信则须要 nativeShare.call('wechatFriend')
    // 相似的敕令下面有引见
} catch(err) {
  // 假如不支撑，你能够在这里做降级处置惩罚
}

API

NativeShare一共只要三个实例要领

  • getShareData() 取得分享的案牍

  • setShareData() 设置分享的案牍

  • call(command = ‘default’, [options]) 挪用浏览器原生的分享组件

{
    icon: '',
    link: '',
    title: '',
    desc: '',
    from: '',
    // 以下几个回调现在只要在微信中支撑和QQ中支撑
    success: noop,
    fail: noop,
    cancel: noop,
    trigger: noop,
}

挪用call要领时第一个参数是指定用什么敕令挪用分享组件。现在支撑6个敕令。分别是

  • default 默许，挪用起底部的分享组件，当其他敕令不支撑的时刻也会挪用该敕令

  • wechatTimeline 分享到朋友圈

  • wechatFriend 分享给微信挚友

  • qqFriend 分享给QQ挚友

  • qZone 分享到QQ空间

  • weibo 分享到微博

交换

假如你是浏览器开发者或许你晓得其他浏览器挪用分享的体式格局，请务必一定要告诉我。

    原文作者：fage
    原文地址: https://segmentfault.com/a/1190000009738604
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞