zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    centos 查看版本(转)
    防火墙内设置FileZilla Server注意事项
    mycat读写分离与主从切换
    用mycat做读写分离:基于 MySQL主从复制
    mysql处理海量数据时的一些优化查询速度方法
    CentOS下LVS DR模式负载均衡配置详解
    Linux清除arp缓存
    扫描局域网内所有主机和MAC地址的Shell脚本
    Windows+Python 3.6环境下安装PyQt4
    Python 爬虫-豆瓣读书
  • 原文地址:https://www.cnblogs.com/lingXie/p/11466293.html
Copyright © 2011-2022 走看看