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.lxweimin.com/p/375ea75a9426 ）