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

柔光的暖阳◎ 2022-05-16 13:34 321阅读 0赞

原文地址 [https://github.com/fa-ge/NativeShare/blob/master/README.md][https_github.com_fa-ge_NativeShare_blob_master_README.md]

下载地址：[https://github.com/fa-ge/NativeShare][https_github.com_fa-ge_NativeShare]

### 起因 ###

最近有一个活动页需要在移动端浏览器分享网页到微信，QQ。虽然每一个浏览器都有分享到微信的能力，但不是每个都提供接口供网页来调用。及时有提供，浏览器暴露出的api也各不相同，而我写[NativeShare][https_github.com_fa-ge_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][]

[![demo][demo 1]][demo 1]

### 使用 ###

支持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文案会同步到<title>标签中
    	// 这样可以让一些不支持分享的浏览器也能修改部分文案，默认都不会同步
      	syncDescToTag: false,
      	syncIconToTag: false,
      	syncTitleToTag: false,
    })
    
    // 你也可以在setConfig方法中设置配置参数
    nativeShare.setConfig({
        wechatConfig: {
            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\]) 调用浏览器原生的分享组件
 *  setConfig() 设置配置参数和new NativeShare()中设置的一样
 *  getConfig() 获得配置参数

{
        icon: '',
        link: '',
        title: '',
        desc: '',
        from: '',
          
        // 以下两个个回调目前只有在微信和百度APP中很好的支持
        success: noop,
        fail: noop,
          
        // 只有微信支持
        trigger: noop,
    }

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

*  default 默认，调用起底部的分享组件，当其他命令不支持的时候也会调用该命令
 *  wechatTimeline 分享到朋友圈
 *  wechatFriend 分享给微信好友
 *  qqFriend 分享给QQ好友
 *  qZone 分享到QQ空间
 *  weibo 分享到微博

### 实际例子 ###

在支持的浏览器中点击分享时浏览器会自动调用对应的分享接口，比如点击qq好友会自动启动qq并跳到选择好友分享的页面。但微信中分享只能靠点击右上角触发，外界无法调用接口。

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="description" content="NativeShare 是一个整合了各大移动端浏览器调用原生分享的插件！！！">
        <title>NativeShare demo</title>
        <style>
            html,
            body {
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
            }
    
            button {
                padding: 15px;
            }
        </style>
        <script>
            var _hmt = _hmt || [];
            (function () {
                var hm = document.createElement("script");
                hm.src = "https://hm.baidu.com/hm.js?d69321757dcfbfbe09dbddd4dca87b28";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
    </head>
    
    <body>
        <div>
            <button onclick="call()">通用分享</button>
            <button onclick="call('wechatFriend')">微信好友</button>
            <button onclick="call('wechatTimeline')">朋友圈</button>
            <button onclick="call('qqFriend')">QQ</button>
            <button onclick="call('qZone')">QQ空间</button>
            <button onclick="call('weibo')">微博</button>
            <button onclick="setTitle('fa-ge NativeShare')">设置标题</button>
        </div>
        <script type="text/javascript" src="../NativeShare.js"></script>
        <script>
            var nativeShare = new NativeShare()
            var shareData = {
                title: 'NativeShare',
                desc: 'NativeShare是一个整合了各大移动端浏览器调用原生分享的插件',
                // 如果是微信该link的域名必须要在微信后台配置的安全域名之内的。
                link: 'https://github.com/fa-ge/NativeShare',
                icon: 'https://pic3.zhimg.com/v2-080267af84aa0e97c66d5f12e311c3d6_xl.jpg',
                // 不要过于依赖以下两个回调，很多浏览器是不支持的
                success: function() {
                    alert('success')
                },
                fail: function() {
                    alert('fail')
                }
            }
            nativeShare.setShareData(shareData)
    
            function call(command) {
                try {
                    nativeShare.call(command)
                } catch (err) {
                    // 如果不支持，你可以在这里做降级处理
                    alert(err.message)
                }
            }
    
            function setTitle(title) {
                nativeShare.setShareData({
                    title: title,
                })
            }
        </script>
    </body>
    
    </html>

最后配上判断浏览器的方法，可以配合判断一下是否微信浏览器做出不同操作：

[https_github.com_fa-ge_NativeShare_blob_master_README.md]: https://github.com/fa-ge/NativeShare/blob/master/README.md
[https_github.com_fa-ge_NativeShare]: https://github.com/fa-ge/NativeShare
[demo]: https://fa-ge.github.io/NativeShare/demo/index.html
[demo 1]: /images/20220516/dd6528eab6ca4313b1aca5a8eb2fe09a.png