h5 + App-- share is how to achieve?

Development documents: https://www.html5plus.org/doc/zh_cn/share.html

The first prerequisite to achieve sharing: apply the configuration parameters to an open platform: https://ask.dcloud.net.cn/article/36   [See complete]

 

Main methods:

Share get the list of services:plus.share.getServices(successCB, errorCB);

授权认证操作：obj.authorize(successCallback, errorCallback, options);

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

The main concept:

(1) Service ID:

　　id: (String type)

 　　Typed: "sinaweibo" - represents the Sina microblogging;

　　　　　　"Tencentweibo" - represents the Tencent microblogging;

　　　　　　"Weixin" - indicates that the micro channel;

　　　　　　"Qq" - represents the Tencent QQ.

 

(2) micro-channel sharing scenario, only slightly effective channel sharing platform:

　　SCENE:  ( String  type)

　　Possible values: "WXSceneSession" Share on the letter, "my friends"; [defaults]

　　　　　　"WXSceneTimeline" Share "circle of friends" in the micro-channel;

　　　　　　 "WXSceneFavorite" Share on the letter "My Favorites" in.

（3）

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


　　ShareMessage object is used to represent message content sharing, a JSON object in JS, for transmitting the operation to the information sharing system.

of the type:  ( String  type) to share the type of message

Micro-channel sharing platform, possible values:

"Web" - shared page type, title (required), content (mandatory), thumbs (required), href (web url, required) property value is valid;

"Text" - share text type, content (mandatory) attribute value is valid;

"Image" - Share pictures type, pictures (mandatory) attribute value is valid;

"Music" - music sharing type, title (required), content (mandatory), thumbs (required), media (music url, required) property value is valid;

"Video" - video sharing type, title (required), content (mandatory), thumbs (required), media (video url, required) property value is valid;

"MiniProgram" - Sharing applet type (only supports sharing to friends), title (required), content (mandatory), thumbs (the picture is less than 128K, an aspect ratio of 5: 4, required), miniProgram (applet parameters required) attribute value is valid;

When not set type, if the href value of the effective default value is "web", the default value is valid if the pictures "image", otherwise the default is "text".
Sina microblogging sharing platform, possible values:

"Web" - shared page type, content, href (web url, required), then add a link to share content;

"Text" - share text type, content (mandatory) attribute effective, the link address can be inserted directly in the content;

"Image" - share the image type, content (optional), thumbs (optional), pictures (required) property is valid;

"Video" - video sharing type, content (optional), thumbs (optional), media (local video files, required) property is valid;

When not set type, if there is thumbs default is "image", if there is href default value is "web", otherwise it defaults to "text".
QQ sharing platform, possible values:

"Text" - share text type, href (iOS optional, Android required), title (required, up to 30 characters), content (optional, up to 40 characters), pictures or thumbs (optional, priority pictures, iOS does not support) property is valid;

"Image" - Share pictures type, pictures or thumbs (required, priority pictures) property is valid;

"Music" - music sharing type, title (required, up to 30 characters), content (optional, up to 40 characters), href (required), media (music url, required), pictures or thumbs (Alternatively, the priority pictures) attribute value is valid;

When not set type, the default value of "text".

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

Content:  ( String  type) to share the message of the text

 

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>