美文网首页
20161011 社交分享、OSS学习及作业总结(内含文件上传模

20161011 社交分享、OSS学习及作业总结(内含文件上传模

作者: birdflying | 来源:发表于2016-10-15 14:55 被阅读178次

20161011 社交分享、OSS学习及作业总结

社交分享开放平台##

微信开放平台
微博开放平台
腾讯开放平台

mob
聚合数据

作业##

  1. 商品详情页加入社交分享功能
  2. 使用阿里oss对象存储后台商品图片上传以及用户头像修改

作业总结##

社交分享

//此方法必须先给调用者的href赋值,否则会被QQ视为非法请求
  function qqFriend() {
        var p = {
            url: shareUrl, /*获取URL,可加上来自分享到QQ标识,方便统计*/
            desc: shareDes,
            title: shareTitle,
            summary: '', /*分享摘要(可选)*/
            pics: sharePicUrl, /*分享图片(可选)*/
            flash: '', /*视频地址(可选)*/
            site: shareUrl, /*分享来源(可选) 如:QQ分享*/
            style: '201',
            width: 32,
            height: 32
        };
        var s = [];
        for (var i in p) {
            s.push(i + '=' + encodeURIComponent(p[i] || ''));
        }
        var url = "http://connect.qq.com/widget/shareqq/index.html?" + s.join('&');
        return url;

    }

    function qqZone() {
        var _url = shareUrl;
        var _showcount = 0;
        var _desc = shareDes;
        var _summary = "";
        var _title = shareTitle;
        var _site = shareUrl;
        var _width = "600px";
        var _height = "800px";
        var _summary = "";
        var _pic = sharePicUrl;
        var _shareUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?';
        _shareUrl += 'url=' + encodeURIComponent(_url || document.location);   //参数url设置分享的内容链接|默认当前页location
        _shareUrl += '&showcount=' + _showcount || 0;      //参数showcount是否显示分享总数,显示:'1',不显示:'0',默认不显示
        _shareUrl += '&desc=' + encodeURIComponent(_desc || '分享的描述');    //参数desc设置分享的描述,可选参数
        _shareUrl += '&title=' + encodeURIComponent(_title || document.title);    //参数title设置分享标题,可选参数
        _shareUrl += '&pics=' + encodeURIComponent(_pic || '');   //参数pics设置分享图片的路径,多张图片以"|"隔开,可选参数
        window.open(_shareUrl, 'width=' + _width + ',height=' + _height + ',top=' + (screen.height - _height) / 2 + ',left=' + (screen.width - _width) / 2 + ',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
    }

    function tencentWeiBo(){
        var _url =shareUrl;
        var _showcount = 0;
        var _summary = "";
        var _title = shareDes;
        var _site = shareUrl;
        var _width = "600px";
        var _height = "800px";
        var _pic =sharePicUrl;
        var _shareUrl = 'http://share.v.t.qq.com/index.php?c=share&a=index';
        _shareUrl += '&title=' + encodeURIComponent(_title||document.title);    //分享的标题
        _shareUrl += '&url=' + encodeURIComponent(_url||location.href);    //分享的链接
        _shareUrl += '&appkey=5bd32d6f1dff4725ba40338b233ff155';    //在腾迅微博平台创建应用获取微博AppKey
        _shareUrl += '&pic=' + encodeURIComponent(_pic||'');    //分享的图片,如果是多张图片,则定义var _pic='图片url1|图片url2|图片url3....'
        window.open(_shareUrl,'width='+_width+',height='+_height+',left='+(screen.width-_width)/2+',top='+(screen.height-_height)/2+',toolbar=no,menubar=no,scrollbars=no,resizable=1,location=no,status=0');
    }

百度社会化分享,关键要给bdText及bdPic赋值

var bdjs = '<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"' + data[1].goodDes + '","bdMini":"2","bdMiniList":false,"bdPic":"' + sharePicUrl + '","bdStyle":"0","bdSize":"32"},"share":{}};';

bdjs += "with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];<\/script>";

阿里云OSS

//阿里云OSS配置
var co = require('co');
var OSS = require('ali-oss');
var client = new OSS({
    region: 'oss-cn-beijing',
    accessKeyId: 'D5h2xxxxxxxxxxxxx',
    accessKeySecret: 'U69xxxxxxxxxxxxxxxxxxxxxxx,
    bucket: 'xxxoss'
});

//存储到阿里云OSS
                        co(function*() {
                            var result = yield client.put(newName, des_file);
                            console.log(result);

                            //更新数据库中图片存储的本地路径
                            var updateData = {
                                $set: {
                                    goodPicLocalUrl: '/uploads/' + newName,
                                    goodPicOSSobject: newName
                                }
                            };

                            goodsModel.update({_id: insertId}, updateData, function (err, result) {
                                if (err) {
                                    console.log(err);
                                } else {
                                    res.json(['success', {
                                        id: insertId,
                                        msg: 'File uploaded successfully'
                                    }]);
                                    console.log("updated goodPicLocalUrl goodPicOSSobject!");
                                }
                            });

                        }).catch(function (err) {
                            res.json(['failed', {msg: err}]);
                            console.log(err);
                        });

获取OSS中的文件(不存储到本地)

                    var url = client.signatureUrl(result[x].goodPicOSSobject, {expires: 3600});

阿里云OSS提供了回源设置,商业网站应考虑好好利用此功能
文件上传功能参考了 Node.js(Express4.x)的Ajax处理2——文件上传(http://www.jianshu.com/p/375ea75a9426

相关文章

网友评论

      本文标题:20161011 社交分享、OSS学习及作业总结(内含文件上传模

      本文链接:https://www.haomeiwen.com/subject/gdznyttx.html