码迷,mamicode.com
首页 > 其他好文 > 详细

简易分享功能(非第三方)

时间:2014-10-22 12:22:23      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   ar   使用   for   

在做一个新项目时,需要一个新浪和微信的分享功能,起初看到这个需求,感觉没有什么,直接使用第三方比较成熟的分享组件就可以的,比如:jiathis、百度分享组件,这些都可以很轻松并且方便的完成所需要的分享任务。一般情况下,在介绍这么多之后,总要有一个但是。这次也不例外,考虑到某种原因,公司不能使用第三方的分享组件,此时就有了我现在的做的事情。做一个比较基础的分享功能,并且只提供了四新浪微博、腾讯微博、腾讯空间、微信、人人的分享功能,实现特别简单,这里只做整理。

 
    说明:
  • 原生JS实现,可以任何框架完美结合使用
  • 页面分享样式可自定义展示
  • 自定义参数内容
  • 支持弹窗和新标签页两种形式
  • 可以很方便的进行新分享方式的扩展
 
    源码实现:
  
/**

 * 由于个开放平台参数不一致,这里提出比较有用的四个参数,并加以说明
 * 其他字段由于不是公共生效,使用的时候自行查阅资料
 * {
        url: ‘‘, //显示的分享链接
        title: ‘‘, //显示的分享说明
        description: ‘‘, //该参数不能公用的,只有空间和人人有效
        pic: ‘‘,    //需要显示的展示图片
    }
 */

(function() {
    /**
     * 分享构造函数
     * @param {String} type [‘pop‘, ‘tab‘]
     * @constructor
     */
    function Share(type) {
        this.type = type || "pop";
    }
    window.Share = Share;
    var optionsCache = {};
    Share.prototype = {
        sina: function(opts) {
            opts = opts || {};
            optionsCache = {
                url: opts.url || location.href,
                appkey: opts.appkey || ‘‘, /**您申请的应用appkey,显示分享来源(可选)*/
                title: opts.title || document.title,
                pic: opts.pic || ‘‘, /**分享图片的路径(可选)*/
                ralateUid: opts.uid || ‘‘, /**关联用户的UID,分享微博会@该用户(可选)*/
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + = + encodeURIComponent( optionsCache[k] || ‘‘ ) )
            }
            var url = http://service.weibo.com/share/share.php? + temp.join(&);
            this.open(url, this.type);
        },
        renren: function(opts) {
            opts = opts || {};
            optionsCache = {
                resourceUrl: opts.url || location.href,
                api_key: opts.appkey || ‘‘,
                title: opts.title || document.title,
                pic: opts.pic || ‘‘,
                description: opts.description,
                charset: opts.charset,
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + = + encodeURIComponent( optionsCache[k] || ‘‘ ) )
            }
            var url = http://widget.renren.com/dialog/share? + temp.join(&);
            this.open(url, this.type);
        },
        qzone: function(opts) {
            opts = opts || {};
            optionsCache = {
                url: opts.url || location.href,
                title: opts.title || document.title,
                pics: opts.pic || ‘‘,
                desc: opts.description,
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + = + encodeURIComponent( optionsCache[k] || ‘‘ ) )
            }
            var url = http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey? + temp.join(&);
            this.open(url, this.type);

        },
        tecent: function(opts) {
            opts = opts || {};
            optionsCache = {
                url: opts.url || location.href,
                appkey: opts.appkey,
                title: opts.title || document.title,
                pic: opts.pic || ‘‘,
                desc: opts.description,
                rnd:+new Date()
            }
            var temp = [];
            for( var k in optionsCache ){
                temp.push(k + = + encodeURIComponent( optionsCache[k] || ‘‘ ) )
            }
            var url = http://share.v.t.qq.com/index.php?c=share&a=index& + temp.join(&);
            this.open(url, this.type);
        },
        weixin: function(url, callback) {
            if(typeof url === "function") {
                callback = url;
                url = http://s.jiathis.com/qrcode.php?url=+decodeURIComponent(location.href);
            }else {
                url = http://s.jiathis.com/qrcode.php?url=+decodeURIComponent(url);
            }
            callback && callback(url);
        },
        /**

         * 打开新窗口或新标签

         * @param url 开启地址

         * @param type 开启类型

         */
        open: function(url, type) {
            var params = ‘‘;
            var windowWidth = window.innerWidth || document.body.clientWidth;
            var windowHeight = window.innerHeight || document.body.clientHeight;
            var width = Math.floor((windowWidth - 875)/2);
            var height = Math.floor((windowHeight - 645)/2);
            if(type == "pop") {
                params = width=875, height=645, top=+height+, left=+width+, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no;
            }
            window.open(url,‘‘, params);
        }
    }
})(); 

使用方法:

<ul class="share">
    <li><a href="#" data-type="sina">新浪微博</a></li>
    <li><a href="#" data-type="tecent">腾讯微博</a></li>
    <li><a href="" data-type="qzone">QQ空间</a></li>
    <li><a href="#" data-type="renren">人人</a></li>
    <li><a href="#" data-type="weixin">微信</a></li>
</ul>
<div id="qrcode-div"></div>

//分享
    var share = new Share();
    $(.share).find(a).on(click, function(e) {
        e.preventDefault();
        var opts = {
            url: http://www.so.com,
            title: 自定义的title,
            description: 自定义描述,
            pic: http://quc.qhimg.com/dm/100_100_100/t010fa3a46e8f98da93.jpg
        };
        var type = $(this).data(type);
        switch(type) {
            case sina:
                share.sina(opts);
                break;
            case renren:
                share.renren(opts);
                break;
            case qzone:
                share.qzone(opts);
                break;
            case tecent:
                share.tecent(opts)
                break;
            case weixin:
                share.weixin(function(url) {
                    $(#qrcode-div).html(<img src="+url+" height=150 width=150>);

                });
                break;
            default:
                alert(type);
        }
    }); 

例子展示:http://cnblogs.sinaapp.com/demo/share.html

简易分享功能(非第三方)

标签:des   style   blog   http   color   io   ar   使用   for   

原文地址:http://www.cnblogs.com/WeiGe/p/4042523.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!