网站服务部小组文档

分享那些事

写页面基本都要用到分享，除了要求自定义分享信息，wap页面也出现了要求分享回调等需求。

1、自定义公用分享信息

<script type="text/javascript">
var shareInfo = {
    title:"分享标题",//分享标题
    desc:"分享正文",//分享正文
    url:window.location.href,//分享URL
    imgurl:"http://res.too.netease.com/qt/14/1014_gwdl/m/img/bg_b9276b3.jpg",//分享图片
    webImg:"http://res.ldxy.netease.com/gw/14v1/m/img/logo_f6dc64a.png",//微信分享提示框icon图片
    publicName:"ldxy163"//微信分享公众号名
}
</script>

分享信息独立出来放到html页面方便经常修改和多个分享调用，其中上面的webImg和publicName是微信分享用到

2、PC页面分享插件

HTML

<!-- 分享 -->
<div class="header-share" id="NIE-share"></div>

nie.use(["nie.util.shareV5"], function () { 
    //分享
    var share = nie.util.share({
        fat: '#NIE-share',
        type: 1,
        defShow: [23 ,22 ,5 ,2 ,1 ,3],
        title: shareInfo.title,
        img:shareInfo.imgurl
    });
});

详情请看官方组件说明：http://webpack.nie.netease.com/#pack=pc_inline/basic/share.html

3、移动端页面分享组件（微信、易信、微博、QQ空间）

HTML 如需要添加顶部分享按钮，需在页面上添加以下节点，否则则不需要添加任何节点；
```

<div id="NIE-topshare"></div>
```
JS

nie.use(["nie.util.mobiShare"],function(){
    $(function(){

        MobileShare.setting({//设置分享文案,同时设置微信、易信分享文案，如有调用 MobileShare.create，创建分享按钮（微信、易信、QQ、微博），也会同时设置各分享平台的分离文案
            title: shareInfo.title,//分享标题
            desc: shareInfo.desc,//分享正文
            url: shareInfo.url,//分享URL
            imgurl: shareInfo.imgurl,//分享图片
            callback:function(o){
                //o.type：-1是分享失败，0是取消分享，1是分享到朋友圈，2是发送给好友
            }//分享后的回调
         })
        var topshare = MobileShare.create({//创建分享条，包括（微信、易信、QQ、微博），若不需要在页面添加分享按钮，仅在微信易信中传播，则不需要执行此段代码
            contentDiv:$("#NIE-topshare"),//放置分享条的容器
            wxBgColor:"#001424",//微信分享提示框背景颜色（若skin为light,同时为分享按钮的颜色）
            publicName:shareInfo.publicName,//公众号名
            shareBtnText:"立即分享给好友",//微信分享按钮文字
            shareText:shareInfo.desc,//微信分享提示框第二行文字可自定义
            type:"top",//分享条的位置（top或bottom），默认为top,注意在微信中顶部分享条不显示
            skin:"dark",//设置皮肤，有两种，dark/light,默认为dark
            webImg: shareInfo.webImg,//微信分享提示框icon图片
            callback:function(){
                // FixShareTopbar.init();
            }//分享条生成之后的回调
        });
    });
});

4、创建普通分享（非组件）

ps：网易微博已经关闭；腾讯朋友网没有移动版，会跳去qq空间，出现重复。所以网易微博和腾讯朋友网分享按钮不再需要在移动端页面添加了。

HTML

<div class="share">
    <b>分享至</b>
    <a href="javascript:;" id="yx_share">易信</a>
    <!-- <a href="javascript:;" id="wy_share">网易</a> -->
    <a href="javascript:;" id="sina_share">新浪微博</a>
    <a href="javascript:;" id="qzone_share">QQ空间</a>
    <!-- <a href="javascript:;" id="qq_share">腾讯朋友</a> -->
</div>

$("#yx_share").click(function() {
    var _uri = "http://open.yixin.im/share?appkey=yx3ae08a776bf04178a583cb745fb6aa0c&type=webpage&url=" + encodeURIComponent(shareInfo.url) + '&title=' + encodeURIComponent(shareInfo.title) + '&desc=' + encodeURIComponent(shareInfo.desc) + '&pic=' + encodeURIComponent(shareInfo.imgurl);
    window.location.href = _uri;
});
$("#sina_share").click(function() {
    var _uri = "http://service.weibo.com/share/share.php?c=nie&content=gb2312&source=nie&title=" + encodeURIComponent(shareInfo.desc) + "&url=" + encodeURIComponent(shareInfo.url) + "&pic=" + encodeURIComponent(shareInfo.imgurl);
    window.location.href = _uri;
});
$("#qzone_share").click(function() {
    var _uri = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=网易游戏&url=" + encodeURIComponent(shareInfo.url) + "&title=" + encodeURIComponent(shareTitle) + "&desc=" + encodeURIComponent(shareInfo.desc) + "&pics=" + encodeURIComponent(shareInfo.imgurl);
    window.location.href = _uri;
});

通过链接直接发出分享请求，可以用在一些比较灵活的场景，比如需要加入分享统计、分享伪回调（触发点击就当作已分享）

5、自定义易信分享信息

这里说的易信分享，是类似微信里面，点击易信客户端右上角按钮时触发的分享，而不是页面里面自定义点击分享。

HTML

<meta name='yixin-share-image' content=''>
<meta name='yixin-share-desc' content=''>

function setYxShare() {
    var meta = document.getElementsByTagName('meta');
    for(var i=0;i<meta.length;i++){
        if(meta[i].getAttribute('name') == "yixin-share-desc"){
            meta[i].setAttribute('content',shareInfo.desc);
        }
        if(meta[i].getAttribute('name') == "yixin-share-image"){
            meta[i].setAttribute('content',shareInfo.imgurl);
        }
    }
}
setYxShare();

给页面添加易信自定义meta，url貌似不能自定义

栗子：梦幻西游同名手游移动端 http://my.163.com/m/