mui框架实现分享功能

今天介绍两种分享功能：

1、基于plusshare.js插件

2、mui原生分享

1、基于plusshare.js插件的分享

1）需要先去下载plusshare.js插件

为了大家工作方便，我直接贴上插件的代码，大家直接新建js文件复制粘贴进去即可：

(function() {
    var plusReady = function(callback) {
        if(window.plus) {
            callback();
        } else {
            document.addEventListener('plusready', callback);
        }
    }
    var shareServices = {};
    var init = function() {
        plus.share.getServices(function(services) {
            for(var i = 0, len = services.length; i < len; i++) {
                shareServices[services[i].id] = services[i];
            }
        });
    };
    var isWechatInstalled = function() {
        return plus.runtime.isApplicationExist && plus.runtime.isApplicationExist({
            pname: 'com.tencent.mm',
            action: 'weixin://'
        });
    };
 
    function share(id, msg, callback) {
        var service = shareServices[id];
        if(!service) {
            callback && callback(false);
            return;
        }
        var _share = function() {
            service.send(msg, function() {
                plus.nativeUI.toast("分享到\"" + service.description + "\"成功！");
                callback && callback(true);
            }, function(e) {
                plus.nativeUI.toast("分享到\"" + service.description + "\"失败！");
                callback && callback(false);
            })
        };
        if(service.authenticated) {
            _share(service, msg, callback);
        } else {
            service.authorize(function() {
                _share(service, msg, callback);
            }, function(e) {
                console.log("认证授权失败");
                callback && callback(false);
            })
        }
    };
 
    function openSystem(msg, callback) {
        if(plus.share.sendWithSystem) {
            plus.share.sendWithSystem(msg, function() {
                //TODO 系统分享暂不支持回调
                //callback && callback(true);
            }, function() {
                //TODO 系统分享暂不支持回调
                //callback && callback(false);
            });
        } else {
            callback && callback(false);
        }
    }
    var open = function(msg, callback) {
        /**
         *如下情况直接打开系统分享
         * 1、未配置微信分享通道
         * 2、用户手机未安装威胁你
         * 3、360浏览器下
         */
 
        if(shareServices.weixin && isWechatInstalled() && !/360\sAphone/.test(navigator.userAgent)) {
            plus.nativeUI.actionSheet({
                title: '分享到',
                cancel: "取消",
                buttons: [{
                    title: "微信消息"
                }, {
                    title: "微信朋友圈"
                }, {
                    title: "更多分享"
                }]
            }, function(e) {
                var index = e.index;
                switch(index) {
                    case 1: //分享到微信好友
                        msg.extra = {
                            scene: 'WXSceneSession'
                        };
                        share('weixin', msg, callback);
                        break;
                    case 2: //分享到微信朋友圈
                        msg.title = msg.content;
                        msg.extra = {
                            scene: 'WXSceneTimeline'
                        };
                        share('weixin', msg, callback);
                        break;
                    case 3: //更多分享
                        var url = msg.href ? ('( ' + msg.href + ' )') : '';
                        msg.title = msg.title + url;
                        msg.content = msg.content + url;
                        openSystem(msg, callback);
                        break;
                }
            })
        } else {
            //系统分享
            var url = msg.href ? ('( ' + msg.href + ' )') : '';
            msg.title = msg.title + url;
            msg.content = msg.content + url;
            openSystem(msg, callback);
        }
    };
    plusReady(init);
    window.plusShare = open;
})();

2）分享模块代码如下(页面按钮只要出发这个分享事件即可)：

        //分享
            function shareApp() {                
                //分享内容，开发者可自定义
                var message = {
                    title: "", //应用名字
                    content: "app是一款小巧高能的移动办公app，其提供的便捷功能与丰富的工具应用可以为您提高工作效率，赶快下载 吧！",
                    href: "", //分享出去后，点击跳转地址
                    thumbs: [config.apiHost + "/static/image/logo.png"] //分享缩略图
                }
                //调起分享
                plusShare(message, function(res) {
                    //分享回调函数
                    if(res) {
                        plus.nativeUI.toast("分享成功");
                    } else {
                        plus.nativeUI.toast("分享失败");
                    }
                })
            }

 

2、mui原生的分享：

直接上代码，大家自己看吧：

         //分享操作 
        var shares = {};
        // 初始化服务列表
        mui.plusReady(function() {
            plus.share.getServices(function(s) {
                if (s && s.length > 0) {
                    for (var i = 0; i < s.length; i++) {
                        var t = s[i];
                        shares[t.id] = t;
                    }
                }
            }, function() {
                console.log("获取分享服务列表失败");
            });
        });
         //分享链接点击事件
        document.getElementById("share").addEventListener('tap', function() {
            var ids = [{
                    id: "weixin",
                    ex: "WXSceneSession"
                }, {
                    id: "weixin",
                    ex: "WXSceneTimeline"
                }, {
                    id: "sinaweibo"
                }, {
                    id: "tencentweibo"
                }, {
                    id: "qq"
                }],
                bts = [{
                    title: "发送给微信好友"
                }, {
                    title: "分享到微信朋友圈"
                }, {
                    title: "分享到新浪微博"
                }, {
                    title: "分享到腾讯微博"
                }, {
                    title: "分享到QQ"
                }];
            plus.nativeUI.actionSheet({
                cancel: "取消",
                buttons: bts
            }, function(e) {
                var i = e.index;
                if (i > 0) {
                    var s_id = ids[i - 1].id;
                    var share = shares[s_id];
                    if (share.authenticated) {
                        shareMessage(share, ids[i - 1].ex);
                    } else {
                        share.authorize(function() {
                            shareMessage(share, ids[i - 1].ex);
                        }, function(e) {
                            console.log("认证授权失败：" + e.code + " - " + e.message);
                        });
                    }
                }
            });
        });
        
        // 分享执行动作
        function shareMessage(share, ex) {
                var msg = {
                    extra: {
                        scene: ex
                    }
                };
                msg.href = "http://www.dcloud.io/hellomui/";
                msg.title = "最接近原生APP体验的高性能前端框架";
                msg.content = "我正在体验HelloMUI，果然很流畅，基本看不出和原生App的差距";
                if (~share.id.indexOf('weibo')) {
                    msg.content += "；体验地址：http://www.dcloud.io/hellomui/";
                }
                msg.thumbs = ["_www/images/logo.png"];
                share.send(msg, function() {
                    console.log("分享到\"" + share.description + "\"成功！ ");
                }, function(e) {
                    console.log("分享到\"" + share.description + "\"失败: " + e.code + " - " + e.message);
                });
            }