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>