h5+App——分享是怎麼實現的？

時間 2019-11-09

標籤 h5+app app 分享怎麼實現简体版

原文原文鏈接

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

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

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

主要方法：html5

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

受權認證操做：obj.authorize(successCallback, errorCallback, options);web

發送分享：obj.send(ShareMessage, successCB, errorCB);小程序

主要概念：微信

（1）服務標識：網絡

　　id：（String類型）ide

　　有類型："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: (Array[ String ] 類型 )分享消息的圖片

分享消息中包含的圖片路徑，僅支持本地路徑。若分享平臺僅支持提交一張圖片，傳入多張圖片則僅提交第一張圖片。若是未指定type類型，優先級順序爲：pictures>content（即設置了pictures則認爲分享圖片類型）。

thumbs: (Array[ Stromg ] 類型 )分享消息的縮略圖

分享消息中包含的縮略圖路徑，支持本地路徑及網絡路徑。若分享平臺僅支持提交一張圖片，傳入多張圖片則僅提交第一張圖片。若是分享平臺的信息不支持縮略圖，若沒有設置消息的圖片（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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。