分享

share.jade

        script#shareButtonsTpl(type='text/template')
            .share-buttons
                a.share-weibo(href='javascript:void(0);')
                    i
                    span 微博
                a.share-wechat(href='javascript:void(0);')
                    i
                    span 微信
                a.share-wechat-timeline(href='javascript:void(0);')
                    i
                    span 微信朋友圈
                a.share-douban(href='javascript:void(0);', target='_default')
                    i
                    span 豆瓣

        script#shareQRcodeTpl(type='text/template')
            .share-qrcode-wrap
                .share-qrcode
                    .dialog-close X
                    | <img height='185' src='<%= qrcode %>'>
                    p 用微信扫描二维码，打开页面后点击右上角，选择“分享到朋友圈” 或 “发送给朋友”

        script#shareWechatTpl(type='text/template')
            .dialog-wrap.wechat-share-wrap
                .dialog
                    .dialog-cont
                        .dialog-inner
                            .dialog-close X
                            i.arrow-wechat
                            p 点击右上角，选择“分享到朋友圈” 或 “发送给朋友”

share.js

        // 分享按钮的控制
        shareButtonControl: function () {
            // 分享到微博
            var weiboURL = 'http://service.weibo.com/share/share.php?appkey=1483181040&relateUid=1727978503&url=' + encodeURIComponent(bodu.shareData.weibo.UTM) + '&title=' + encodeURIComponent(bodu.shareData.weibo.desc) + '&pic=' + bodu.shareData.weibo.image;

            // 重写 URL
            $('.share-weibo').attr('href', weiboURL).attr('target', '_default');


            $('body').on('click', '.share-weibo', function () {
                bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'weibo'});
            });

            // 分享到豆瓣
            var doubanURL = 'http://www.douban.com/share/service?bm=1&image=' + encodeURIComponent(bodu.shareData.douban.image) + '&href=' + encodeURIComponent(bodu.shareData.douban.UTM) + '&updated=&name=' + encodeURIComponent(bodu.shareData.douban.title) + '&text=' + encodeURIComponent(bodu.shareData.douban.desc);

            $('.share-douban').attr('href', doubanURL).attr('target', '_default');

            // 豆瓣分享点击 GA
            $('body').on('click', '.share-douban', function () {
                bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'douban'});
            });

            // 如果是 P4 ，则调用 P4 的分享接口
            // 目前 P4 的分享接口只支持 微信好友 微信朋友圈 新浪微博
            if (bodu.device.isP4) {
                // // 如果安装了微信
                if (bodu.isInstalled('com.tencent.mm')) {
                    // 分享给微信好友
                    $('body').on('click', '.share-wechat', function () {
                        bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_friend'});
                        window.campaignPlugin.shareTo(bodu.shareData.wechatFriend.title, bodu.shareData.wechatFriend.desc, bodu.shareData.wechatFriend.image, bodu.shareData.wechatFriend.UTM, 'WECHAT');
                    });

                    // 分享给微信朋友圈
                    $('body').on('click', '.share-wechat-timeline', function () {
                        bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_timeline'});
                        window.campaignPlugin.shareTo(bodu.shareData.wechatTimeline.title, bodu.shareData.wechatTimeline.desc, bodu.shareData.wechatTimeline.image, bodu.shareData.wechatTimeline.UTM, 'WECHAT_TIMELINE');
                    });
                } else {
                    // 没安装微信的话
                    // 隐藏掉「分享到朋友圈」的 icon
                    $('.share-wechat-timeline').hide();

                    // 分享到微信时还是弹出二维码
                    $('body').on('click', '.share-wechat', function () {
                        window.campaignPlugin.toast('未安装微信');

                        bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat'});

                        if (!bodu.shareDialogRendered) {
                            bodu.renderQRCodeShareTpl();
                            bodu.shareDialogRendered = true;
                        }
                    });

                }

                // 如果安装了新浪微博
                // 前面已经给微博增加了 URL，所以如果没安装微博的话，
                // 用户点击时会直接跳转到 html 页面
                if (bodu.isInstalled('com.sina.weibo')) {
                    // 分享到微博
                    $('body').on('click', '.share-weibo', function (e) {
                        // 之前已经给微博链接加上 url 了
                        // 这里需要先阻止链接跳转
                        e.preventDefault();

                        window.campaignPlugin.shareTo(bodu.shareData.weibo.title, bodu.shareData.weibo.desc, bodu.shareData.weibo.image, bodu.shareData.weibo.UTM, 'SINA_WEIBO');
                    });
                }
            // P4 外的所有情况
            // 因为网页中没法直接分享到朋友圈和微信好友
            // 所以这时候朋友圈的 icon 已经通过 css 隐藏
            // 点击微信 icon , 弹出提示框
            } else {
                // 点击分享到微信时
                $('body').on('click', '.share-wechat', function () {
                    // GA event track
                    bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat'});

                    // 如果是在微信中
                    // 弹出专门针对微信的提示框
                    if (bodu.device.isWechat) {
                        // 防止二次弹出
                        if (!bodu.shareDialogRendered) {
                            bodu.renderWechatShareTpl();
                            bodu.shareDialogRendered = true;
                        }
                    // 弹出二维码提示框
                    } else {
                        if (!bodu.shareDialogRendered) {
                            bodu.renderQRCodeShareTpl();
                            bodu.shareDialogRendered = true;
                        }
                    }

                });
            }

            // 初始化关闭弹窗的操作
            bodu.closeShareDialog();
        },

        // 微信分享接口
        wechatShareApiInit : function () {
            // 微信内发送给朋友
            function shareFriend() {
                WeixinJSBridge.invoke('sendAppMessage', {
                    'appid': 'wxed6dfca0ae67f7a3',
                    'img_url': bodu.shareData.wechatFriend.image,
                    'img_width': '640',
                    'img_height': '640',
                    'link': bodu.shareData.wechatFriend.UTM,
                    'desc': bodu.shareData.wechatFriend.desc,
                    'title': bodu.shareData.wechatFriend.title
                }, function (res) {
                    _report('send_msg', res.err_msg);
                });
            }

            // 微信内分享到朋友圈
            function shareTimeline() {
                WeixinJSBridge.invoke('shareTimeline', {
                    'appid': 'wxed6dfca0ae67f7a3',
                    'img_url': bodu.shareData.wechatTimeline.image,
                    'img_width': '640',
                    'img_height': '640',
                    'link': bodu.shareData.wechatTimeline.UTM,
                    'desc': bodu.shareData.wechatTimeline.desc,
                    'title': bodu.shareData.wechatTimeline.title
                }, function (res) {
                    _report('timeline', res.err_msg);
                });
            }

            // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
            document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
                // 分享到朋友圈
                WeixinJSBridge.on('menu:share:timeline', function (argv) {
                    bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_timeline'});
                    shareTimeline();
                });

                // 发送给好友
                WeixinJSBridge.on('menu:share:appmessage', function (argv) {
                    bodu.trackEvent({category: 'Qdaily', action: 'share', label: 'wechat_friend'});
                    shareFriend();
                });
            }, false);

        },

        // 关闭弹窗
        closeShareDialog: function () {
            $('body').on('click', '.dialog-close', function () {
                $('.dialog-wrap, .share-qrcode-wrap').remove();
                $('body').removeClass('show-dialog');
                bodu.shareDialogRendered = false;
            });
        },

share.scss

@charset 'utf-8';

/*
* @Author: Jiyun
* @Date:   2014-11-26 22:23:29
* @Last Modified by:   Jiyun
* @Last Modified time: 2014-12-01 21:06:11
*/

@import "compass";
@import "compass/reset";
@import "compass/css3";

@import "mixins/media-queries";
@import "mixins/retina";
@import "mixins/animate";

$font-base: "Lantinghei SC", "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;

$icons: sprite-map("campaign/Qdaily/1x/*.png", $spacing: 10px);
$icons-2x: sprite-map("campaign/Qdaily/2x/*.png", $spacing: 10px);

$green: #359f47;
$cyanine: #4CC9B6;
$yellow: #FFC145;
$red: #FE7472;

// retina
@mixin retina() {
    @media only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2/1),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio: 2) {
        @content;
    }
}

// landscape
@mixin landscape() {
    @media screen and (orientation: landscape),
    screen and (-moz-orientation: landscape),
    screen and (-o-orientation: landscape),
    screen and (-webkit-orientation: landscape) {
        @content;
    }
}

//////////////////

.share-buttons {
    position: relative;

    a,
    i {
        @include inline-block();

        text-decoration: none;
    }

    a {
        @include  border-radius(50%);
        // @include box-shadow(1px 1px 4px rgba(0,0,0, .2));

        padding: 5px;
        background: #fff;
        line-height: 1;
    }

    span {
        font-size: 0;
        text-indent: -999em;
        display: none;
    }

    .share-weibo {
        margin-right: 15px;

        i {
            @include use-sprite('weibo');
        }
    }

    .share-wechat {
        margin-right: 15px;

        i {
            @include use-sprite('wechat');
        }
    }

    .share-wechat-timeline {
        display: none;
        margin-right: 15px;

        i {
            @include use-sprite('timeline');
        }
    }


    .share-douban {
        i {
            @include use-sprite('douban');
        }
    }
}