利用NativeShare.js实现移动端分享功能

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

下载地址:https://github.com/fa-ge/NativeShare

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

兼容性(毫无疑问是兼容浏览器最多的插件了)
移动端几乎所有浏览器都支持分享到QQ和QQ空间
QQ浏览器
UC浏览器
微信自带浏览器
QQ自带浏览器
QQ空间APP
百度浏览器
百度APP自带浏览器
ios 搜狗浏览器
支持分享到web微博
即将支持(android 搜狗浏览器,微博APP)
存在的问题

安卓的QQ自带浏览器不支持.com以外的域名后缀。可能会支持.cn,.com.cn,但明确不支持.me,.io这个具体可以自己测试。
安卓的QQ自带浏览器分享url必须跟页面url同一个域名,否则所有设置不生效。
安卓的QQ自带浏览器无法直接分享
虽然几乎所有的浏览器都支持分享到QQ和QQ空间,但是webview中基本都会不支持。我也很难判断当前浏览器是否支持,浏览器是否唤起QQ APP我也很难判断,所有除了上述支持的浏览器,APP外其他情况调用分享到QQ我也会抛出异常。
UC浏览器安卓端不能设置icon
百度浏览器,百度APP不能直接分享
QQ空间APP,微信自带浏览器只能设置文案,分享需要用户手动点击右上角
示例
demo

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

import NativeShare from 'nativeshare'

// 先创建一个实例
var nativeShare = new NativeShare()
// 如果你需要在微信浏览器中分享,那么你需要设置额外的微信配置
// 特别提示一下微信分享有一个坑,不要分享安全域名以外的链接(具体见jssdk文档),否则会导致你配置的文案无效
// 创建实例应该带参数
var nativeShare = new NativeShare({
    wechatConfig: {
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: '',
    },
      // 让你修改的分享的文案同步到标签里,比如title文案会同步到标签中<br>     // 这样可以让一些不支持分享的浏览器也能修改部分文案,默认都不会同步<br>       syncDescToTag: false,<br>       syncIconToTag: false,<br>       syncTitleToTag: false,<br> })</p> <p>// 你也可以在setConfig方法中设置配置参数<br> nativeShare.setConfig({<br>     wechatConfig: {<br>         appId: '',<br>         timestamp: '',<br>         nonceStr: '',<br>         signature: '',<br>     }<br> })</p> <p><br> // 设置分享文案<br> nativeShare.setShareData({<br>     icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',<br>     link: 'https://github.com/fa-ge/NativeShare',<br>     title: 'NativeShare',<br>     desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',<br>     from: '@fa-ge',<br> })</p> <p>// 唤起浏览器原生分享组件(如果在微信中不会唤起,此时call方法只会设置文案。类似setShareData)<br> try {<br>     nativeShare.call()<br>     // 如果是分享到微信则需要 nativeShare.call('wechatFriend')<br>     // 类似的命令下面有介绍<br> } catch(err) {<br>   // 如果不支持,你可以在这里做降级处理<br> }<br> API<br> NativeShare一共只有五个实例方法</p> <p>getShareData() 获得分享的文案<br> setShareData() 设置分享的文案<br> call(command = 'default', [options]) 调用浏览器原生的分享组件<br> setConfig() 设置配置参数和new NativeShare()中设置的一样<br> getConfig() 获得配置参数<br> {<br>     icon: '',<br>     link: '',<br>     title: '',<br>     desc: '',<br>     from: '',<br>       <br>     // 以下两个个回调目前只有在微信和百度APP中很好的支持<br>     success: noop,<br>     fail: noop,<br>       <br>     // 只有微信支持<br>     trigger: noop,<br> }<br> 调用call方法时第一个参数是指定用什么命令调用分享组件。目前支持6个命令。分别是</p> <p>default 默认,调用起底部的分享组件,当其他命令不支持的时候也会调用该命令<br> wechatTimeline 分享到朋友圈<br> wechatFriend 分享给微信好友<br> qqFriend 分享给QQ好友<br> qZone 分享到QQ空间<br> weibo 分享到微博<br> 实际例子<br> 在支持的浏览器中点击分享时浏览器会自动调用对应的分享接口,比如点击qq好友会自动启动qq并跳到选择好友分享的页面。但微信中分享只能靠点击右上角触发,外界无法调用接口。</p> <p><!DOCTYPE html><br> <html><br>  <br> <head><br>     <meta charset="utf-8"><br>     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><br>     <meta name="description" content="NativeShare 是一个整合了各大移动端浏览器调用原生分享的插件!!!"><br>     <title>NativeShare demo
   
   

 

   


       
       
       
       
       
       
       
   

   
   

 

你可能感兴趣的:(JS)