朋友圈、浏览器分享实现

/**
 * mshare.js
 * 此插件主要作用是在UC和QQ两个主流浏览器
 * 上面触发微信分享到朋友圈或发送给朋友的功能
 * 代码编写过程中 参考:
 * http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js
 * 此外，JefferyWang的项目对我也有一定启示：
 * https://github.com/JefferyWang/nativeShare.js
 *
 * @revisor  angusfu1126@qq.com
 * @date     2015-07-22
 */

!(function(global) {
    \'use strict\';

    var UA, uc, qq, wx, tc, qqVs, ucVs, os,qqBridgeDone;

    UA = navigator.appVersion;

    // 是否是 UC 浏览器
    uc = UA.split(\'UCBrowser/\').length > 1  ? 1 : 0;

    // 判断 qq 浏览器
    // 然而qq浏览器分高低版本   2代表高版本  1代表低版本
    qq = UA.split(\'MQQBrowser/\').length > 1 ? 2 : 0;

    // 是否是微信
    wx = ((UA.match(/MicroMessenger/i)) && (UA.match(/MicroMessenger/i).toString().toLowerCase() == \'micromessenger\'));

    // 浏览器版本
    qqVs = qq ? parseFloat(UA.split(\'MQQBrowser/\')[1]) : 0;
    ucVs = uc ?  parseFloat(UA.split(\'UCBrowser/\')[1]) : 0;
    
    //获取操作系统信息  iPhone(1)  Android(2)
    os = (function () {
        var ua = navigator.userAgent;

        if (/iphone|ipod/i.test(ua)) {
            return 1;
        } else if(/android/i.test(ua)){
            return 2;
        } else {
            return 0;
        }
    }());

    // qq浏览器下面 是否加载好了相应的api文件
    qqBridgeDone = false;

    // 进一步细化版本和平台判断
    // 参考: https://github.com/JefferyWang/nativeShare.js
    // http://mjs.sinaimg.cn/wap/module/share/201501261608/js/addShare.js
    if ((qq && qqVs < 5.4 && os == 1) || (qq && qqVs < 5.3 && os == 1)) {
        qq = 0;
    } else {
        if (qq && qqVs < 5.4 && os == 2) {
            qq = 1;
        } else {
            if (uc && ( (ucVs < 10.2 && os == 1) || (ucVs < 9.7 && os == 2) )) {
                uc = 0;
            }
        }
    }

    /**
     * qq浏览器下面 根据不同版本 加载对应的bridge
     * @method loadqqApi
     * @param  {Function} cb 回调函数
     */
    function loadqqApi(cb) {
        if (!qq) { // qq == 0 
            return cb && cb();
        }

        var qqApiScript = document.createElement(\'script\');
        //需要等加载过qq的接口文档之后，再去初始化分享组件
        qqApiScript.onload = function () {cb && cb();};
        qqApiScript.onerror = function () {};
        // qq == 1 低版本
        // qq == 2 高版本
        qqApiScript.src = (qq == 1 ) ? \'http://3gimg.qq.com/html5/js/qb.js\' : \'http://jsapi.qq.com/get?api=app.share\';

        document.body.appendChild(qqApiScript);
    }


    /**
     * UC浏览器分享
     * @method ucShare
     */
    function ucShare(config) {
        // [\'title\', \'content\', \'url\', \'platform\', \'disablePlatform\', \'source\', \'htmlID\']
        // 关于platform
        // ios: kWeixin || kWeixinFriend;
        // android: WechatFriends || WechatTimeline
        // uc 分享会直接使用截图
        
        var platform = \'\', shareInfo;

        // 指定了分享类型
        if (config.type) {
            if (os == 2) {
                platform = config.type == 1 ? \'WechatTimeline\' : \'WechatFriends\';
            } else if (os == 1) {
                platform = config.type == 1 ? \'kWeixinFriend\' : \'kWeixin\';
            }
        }

        shareInfo = [ config.title, config.desc, config.url, platform, \'\', \'\', \'\' ];

        // android 
        if (window.ucweb) {
            ucweb.startRequest && ucweb.startRequest(\'shell.page_share\', shareInfo);
        }
        // ios
        else if (window.ucbrowser) {
            ucbrowser.web_share && ucbrowser.web_share.apply(null, shareInfo);
        }

    };
    

    /**
     * qq浏览器分享函数
     * @method qqShare
     */
    function qqShare(config) {
        var type = config.type;

        //微信好友1, 微信朋友圈8
        type = type ? ((type == 1) ? 8 : 1) : \'\'; 

        var share = function () {
            var shareInfo = {
                \'url\': config.url,
                \'title\': config.title,
                \'description\': config.desc,
                \'img_url\': config.img,
                \'img_title\': config.title,
                \'to_app\': type,
                \'cus_txt\': \'\'
            };

            if (window.browser) {
                browser.app && browser.app.share(shareInfo);
            } else if (window.qb) {
                qb.share && qb.share(shareInfo);
            }
        };

        if (qqBridgeDone) {
            share();
        } else {
            loadqqApi(share);
        }
    };

    /**
     * 对外暴露的接口函数
     * @method mShare
     * @param  {Object} config 配置对象  参数见示例
     *     var config = {
     *          title : \'Lorem ipsum dolor sit.\'
     *        , url   : \'http://m.ly.com\'
     *        , desc  : \'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat inventore minima voluptates.\'
     *        , img   : \'http://img1.40017.cn/cn/s/c/2015/loading.gif\'
     *        , type  : type // 1 ==> 朋友圈  2 ==> 朋友  0 ==> 直接弹出原生
     *     }
     */
    function mShare(config) {
        this.check = function (succssFn, wxFn, failFn) {
            if (uc) {
                succssFn();
            } else if (qq && !wx) {
                succssFn();
            } else if (wx) {
                wxFn();
            } else {
                failFn();
            }
        }
        this.config = config;
        this.init = function (type) {
            if (typeof type != \'undefined\') this.config.type = type;
            try {
                if (uc) {
                    ucShare(this.config);
                } else if (qq && !wx) {
                    qqShare(this.config);
                }
            } catch (e) {}
        }
    }
    
    // 预加载 qq bridge
    loadqqApi(function () {
        qqBridgeDone = true;
    });

    // 方法暴露给全局变量
    global.mShare = mShare;

})(this);
//=====================这是分割线=====================================
<div class="sharePage">
    <div class="sharePage_background"></div>
    <div class="sharePage_bottom">
        <div class="share_mode">
            <div class="share_mode_header">分享至</div>
            <div class="share_mode_content">
                <ul class="clearfix">
                    <li class="WeChat mshare" mshare="2">
                        <span></span>
                        <i>微信</i>
                    </li>
                    <li class="moments mshare" mshare="1">
                        <span></span>
                        <i>朋友圈</i>
                    </li>
                </ul>
            </div>
        </div>
        <div class="share_cancel">
            取消
        </div>
    </div>
    <div class="sharePage_arrow">
        <span></span>
        <p>点击微信右上角按钮进行分享</p>
    </div>
</div>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/mobile/js/lib/jquery-2.0.3.min.js"></script>
<script src="/mobile/js/lib/mshare.js"></script>
<script>
    var mshare = new mShare({
          title : \'{{shareTitle}}\',
          url   : \'{{shareUrl}}\',
          desc  : \'{{shareDesc}}\',
          img   : \'{{sharePic}}\'
    });
    
    mshare.check(
        function () {//支持原生分享
            browserShow ();
            $(\'.mshare\').click(function () {
                // 1 ==> 朋友圈  2 ==> 朋友  0 ==> 直接弹出原生
                mshare.init(+$(this).attr(\'mshare\'));
            });
        },
        function () {//微信中支持微信分享
            WeChatShow ();
            wx.config({
                debug: false,
                appId: "{{options[\'appid\']}}",
                timestamp: "{{options[\'timestamp\']}}",
                nonceStr: "{{options[\'nonceStr\']}}",
                signature: "{{options[\'signature\']}}",
                jsApiList: [
                    \'checkJsApi\',
                    \'onMenuShareTimeline\',
                    \'onMenuShareAppMessage\'
                  ]
            });
            wx.ready(function(){
                wx.checkJsApi({
                    jsApiList: [\'onMenuShareTimeline\', \'onMenuShareAppMessage\'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                    success: function(res) {
                        //alert("检测结果" + res.errMsg);
                        // 以键值对的形式返回，可用的api值true，不可用为false
                        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    }
                });

                wx.onMenuShareTimeline({
                    title: \'{{shareTitle}}\', // 分享标题
                    link: \'{{shareUrl}}\', // 分享链接
                    imgUrl: \'{{sharePic}}\', // 分享图标
                    success: function () {
                        //alert("分享到微信朋友圈成功");
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        //alert("取消分享");
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareAppMessage({
                    title: \'{{shareTitle}}\', // 分享标题
                    link: \'{{shareUrl}}\', // 分享链接
                    imgUrl: \'{{sharePic}}\', // 分享图标
                    desc: "{{shareDesc}}", // 分享描述
                    type: \'link\', // 分享类型,music、video或link，不填默认为link
                    dataUrl: \'\', // 如果type是music或video，则要提供数据链接，默认为空
                    success: function () {
                        //alert("分享到微信好友成功");
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () {
                        // 用户取消分享后执行的回调函数
                        //alert("取消分享")
                    }
                });
                // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            });

            wx.error(function(res){
                //alert(\'error\');
                // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            });
        },
        function () {//不支持分享
            shareHide();
        }
    );
    
    //在浏览器中打开
    function browserShow () {
        //点击分享按钮
        $(\'.share_button\').show();
        $(\'.share_button\').click(function () {
            $(\'.sharePage\').addClass(\'sharePage_active\');
            $(\'.sharePage_bottom\').animate({
                bottom:0
            },300);
        });
        //点击取消按钮
        $(\'.share_cancel\').click(function () {
            $(\'.sharePage_bottom\').animate({
                bottom:-$(\'.sharePage_bottom\').height()+\'px\'
            },300,function () {
                $(\'.sharePage\').removeClass(\'sharePage_active\');
            });
        });
        //点击黑色背景，整个分享页面消失
        $(\'.sharePage_background\').click(function () {
            $(\'.sharePage_bottom\').animate({
                bottom:-$(\'.sharePage_bottom\').height()+\'px\'
            },300,function () {
                $(\'.sharePage\').removeClass(\'sharePage_active\');
            });
        });
    }
    //在微信中打开
    function WeChatShow () {
        //点击分享按钮
        $(\'.share_button\').show();
        $(\'.share_button\').click(function () {
            $(\'.sharePage\').addClass(\'sharePage_active\');
            $(\'.sharePage_arrow\').addClass(\'sharePage_arrow_active\');
        });
        //点击黑色背景整个分享页面消失
        $(\'.sharePage_arrow\').click(function () {
            $(\'.sharePage\').removeClass(\'sharePage_active\');
            $(\'.sharePage_arrow\').removeClass(\'sharePage_arrow_active\');
        });
    }
    
    function shareHide() {
        $(\'.share_button\').hide();
    }
</script>

作者：beijing_beijing
链接：https://www.jianshu.com/p/3d6503c68474
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。