h5+App——分享是怎么實現的?


開發文檔:https://www.html5plus.org/doc/zh_cn/share.html

實現分享的第一要義:【請參閱】

  向開放平台申請配置參數 :https://ask.dcloud.net.cn/article/36  

 

主要方法:

獲取分享服務列表:plus.share.getServices(successCB, errorCB);

授權認證操作:obj.authorize(successCallback, errorCallback, options);

發送分享:obj.send(ShareMessage, successCB, errorCB);

主要概念:

(1)服務標識:

  id:(String類型)

   有類型:"sinaweibo" - 表示新浪微博;

      "tencentweibo" - 表示騰訊微博;

      "weixin" - 表示微信;

      "qq" - 表示騰訊QQ。

 

(2)微信分享場景,僅微信分享平台有效:

  scene: (String 類型 )

  可取值: "WXSceneSession"分享到微信的“我的好友”;[默認值]

      "WXSceneTimeline"分享到微信的“朋友圈”中;

       "WXSceneFavorite"分享到微信的“我的收藏”中。

(3)

  obj.send(ShareMessage, successCB, errorCB);發送分享

  ShareMessage對象用於表示分享消息內容,在JS中為JSON對象,用於向系統發送分享信息操作。

type: (String 類型 )分享消息的類型

微信分享平台,可取值:

"web"-分享網頁類型,title(必填)、content(必填)、thumbs(必填)、href(網頁url,必填)屬性值有效;

"text"-分享文字類型,content(必填)屬性值有效;

"image"-分享圖片類型,pictures(必填)屬性值有效;

"music"-分享音樂類型,title(必填)、content(必填)、thumbs(必填)、media(音樂url,必填)屬性值有效;

"video"-分享視頻類型,title(必填)、content(必填)、thumbs(必填)、media(視頻url,必填)屬性值有效;

"miniProgram"-分享小程序類型(僅支持分享到好友),title(必填)、content(必填)、thumbs(圖片小於128K,寬高比為5:4,必填)、miniProgram(小程序參數,必填)屬性值有效;

沒有設置type時,如果href值有效則默認值為"web",如果pictures有效則默認值為"image",否則默認值為"text"。
新浪微博分享平台,可取值:

"web"-分享網頁類型,content、href(網頁url,必填),分享鏈接添加到內容之后;

"text"-分享文字類型,content(必填)屬性有效,可在內容中直接插入鏈接地址;

"image"-分享圖片類型,content(可選)、thumbs(可選)、pictures(必填)屬性有效;

"video"-分享視頻類型,content(可選)、thumbs(可選)、media(本地視頻文件,必填)屬性有效;

沒有設置type時,如果存在thumbs則默認值為"image",如果存在href則默認值為"web",否則默認為"text"。
QQ分享平台,可取值:

"text"-分享文字類型,href(iOS可選,Android必填)、title(必填,最長30個字符)、content(可選,最長40個字符)、pictures或thumbs(可選,優先pictures,iOS不支持)屬性有效;

"image"-分享圖片類型,pictures或thumbs(必填,優先pictures)屬性有效;

"music"-分享音樂類型,title(必填,最長30個字符)、content(可選,最長40個字符)、href(必填)、media(音樂url,必填)、pictures或thumbs(可選,優先pictures)屬性值有效;

沒有設置type時,默認值"text"。

----------------------------------------------------------

content: (String 類型 )分享消息的文字內容

 

pictures: (ArrayString ] 類型 )分享消息的圖片

分享消息中包含的圖片路徑,僅支持本地路徑。 若分享平台僅支持提交一張圖片,傳入多張圖片則僅提交第一張圖片。 如果未指定type類型,優先級順序為:pictures>content(即設置了pictures則認為分享圖片類型)。

 

thumbs: (ArrayStromg ] 類型 )分享消息的縮略圖

分享消息中包含的縮略圖路徑,支持本地路徑及網絡路徑。 若分享平台僅支持提交一張圖片,傳入多張圖片則僅提交第一張圖片。 如果分享平台的信息不支持縮略圖,若沒有設置消息的圖片(pictures)則使用縮略圖,否則忽略其屬性值。 注意:圖片有大小限制,推薦圖片小於20Kb。

 

media: (Strubg 類型 )分享的多媒體資源

分享的多媒體資源地址,當type值為"music"、"video"時有效。 注意: 微信分享平台支持音樂、視頻類型,僅支持網絡地址(以http://或https://開頭); QQ分享平台支持音樂類型,僅支持網絡路徑(以http://或https://開頭); 新浪微博分享平台支持視頻類型,僅支持本地文件路徑。

 

href: (String 類型 )分享獨立的鏈接

分享資源地址,僅支持網絡地址(以http://或https://開頭)。 如果未指定type類型,優先級順序為:href>pictures>content(即設置了href則認為分享網頁類型)。

 

具體deMo

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
    <style type="text/css">
        li{
            height: 30px;
            background: pink;
            margin-bottom: 20px;;
        }
    </style>
</head>
<body>
    <button onclick="TshareAction('weixin')">好友</button>
    <button onclick="TshareAction('weixin',true)">朋友圈</button>
    <button onclick="TshareAction('qq')">qq</button>
    <button onclick="TshareAction('sinaweibo')">微博</button>
</body>
</html>
<script type="text/javascript">
    var vConsole = new VConsole();
    var shares=null;
    var shareObj ={};
    var shareType = "";
    if(window.plus){
        plusReady();
    }else{
        document.addEventListener('plusready', plusReady, false);
    }
    
    function plusReady(){
        // 延時獲取服務列表,避免影響窗口動畫
        setTimeout(TgetService(), 300);
    }
    
    // 獲取分享服務列表
    function TgetService(){
        plus.share.getServices(function(s){
            shares = s;
            console.log(shares);
            var Obj ={}
            for(var i in s){
                Obj[s[i].id] = s[i];
            }
            shareObj = Obj;
            console.log('xxxx',shareObj);
        }, function(e){
            outSet('獲取分享服務列表失敗:'+e.message);
        });
    }
    
    // 判斷是否授權  根據id判斷authenticated
    function TshareAction(id, type){
            
        if(id=="weixin"){
            if(type) {
                shareType = "WXSceneTimeline"
            } else {
                shareType = "WXSceneSession"
            }
        }
        var target = shareObj;
        if(!target){
            console.log("分享組件未准備好,請稍后再試");
            return;
        }
        console.log('====',target['weixin']);
        console.log('是否認證',target[id].authenticated);
        if(target[id].authenticated){
            shareMessage(target[id]);
        }else{
            target[id].authorize(function(){
                alert("授權成功");
                shareMessage(target[id]);
            },function(){
                alert("授權失敗");
            });
        }
        
    }
    // 發送分享信息 
    function shareMessage(target,frients=false){
        console.log('發送信息目標',target)
        var config;
        switch(target.id){
            // 分享至微信好友配置
            case 'weixin':
                
                config ={
                    type:'web',
                    title:'wwwwwww',
                    content:"DCloud HBuilder-做最好的HTML5開發工具",
                    thumbs:['http://pic.90sjimg.com/design/01/30/13/50/596983bfbb2da.png'],
                    href:"http://www.dcloud.io/",
                    extra:{
                        scene:shareType,
                    }
                }
                break;    
            
            case 'qq':
                config ={
                    type:'text',
                    title:'wwwwwww',
                    content:"DCloud HBuilder-做最好的HTML5開發工具",
                    pictures:['http://pic.90sjimg.com/design/01/30/13/50/596983bfbb2da.png'],
                    href:"http://www.dcloud.io/",
                }
                break;
                
            case 'sinaweibo':
                config ={
                    type:'web',
                    content:"DCloud HBuilder-做最好的HTML5開發工具",
                    href:"http://www.dcloud.io/",
                }
                break;
        }
        
        target.send(config, function(){
            alert("分享成功!");
        },function(e){
            alert("分享失敗:"+e.message);
        });
    }

</script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM