MUI 分享功能(微信、QQ 、微博、朋友圈等)实现方法

配置文件:manifest.json(plus ->plugins 下边);

"share": {/*配置应用使用分享功能,参考:http://ask.dcloud.net.cn/article/27/
     "qq": {
        "appid": "",/*腾讯QQ开放平台申请应用的AppID值*/
        "description": "QQ分享"
       },
     "weixin": {
         "appid": "",/*微信开放平台申请应用的AppID值*/
         "appsecret": "",/*微信开放平台申请应用的AppSecret值*/
          "description": "微信分享"
          }
},                    

 

html 代码文件

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>首页</title>
        <script type="text/javascript" charset="utf-8">
      
        var shares=null;
        var Intent=null,File=null,Uri=null,main=null;
        // H5 plus事件处理
        function plusReady(){
            updateSerivces();
            if(plus.os.name=="Android"){
                main = plus.android.runtimeMainActivity();
                Intent = plus.android.importClass("android.content.Intent");
                File = plus.android.importClass("java.io.File");
                Uri = plus.android.importClass("android.net.Uri");
            }
        }
        if(window.plus){
            plusReady();
        }else{
            document.addEventListener("plusready",plusReady,false);
        }
        
        /**
         * 
         * 更新分享服务
         */
        function updateSerivces(){
            plus.share.getServices( function(s){
                shares={};
                for(var i in s){
                    var t=s[i];
                    shares[t.id]=t;
                }
            }, function(e){
                alert("获取分享服务列表失败:"+e.message );
            } );
        }
        
        
        
        /**
           * 分享操作
           * @param {JSON} sb 分享操作对象s.s为分享通道对象(plus.share.ShareService)
           * @param {Boolean} bh 是否分享链接
           */
        function shareAction(sb,bh) {
            if(!sb||!sb.s){
                alert("无效的分享服务!");
                return;
            }
            
            var msg={content:sharehrefDes.value,extra:{scene:sb.x}};
            if(bh){
                msg.href=sharehref.value;
                if(sharehrefTitle&&sharehrefTitle.value!=""){
                    msg.title=sharehrefTitle.value;
                }
                if(sharehrefDes&&sharehrefDes.value!=""){
                    msg.content=sharehrefDes.value;
                }
                msg.thumbs=["_www/logo.png"];
                msg.pictures=["_www/logo.png"];
            }else{
                if(pic&&pic.realUrl){
                    msg.pictures=[pic.realUrl];
                }
            }
            // 发送分享
            if ( sb.s.authenticated ) {
                alert("---已授权---");
                shareMessage(msg,sb.s);
            } else {
                alert("---未授权---");
                sb.s.authorize( function(){
                        shareMessage(msg,sb.s);
                    },function(e){
                        alert("认证授权失败:"+e.code+" - "+e.message );
                    
                });
            }
        }
        /**
           * 发送分享消息
           * @param {JSON} msg
           * @param {plus.share.ShareService} s
           */
        function shareMessage(msg,s){
            
            alert(JSON.stringify(msg));
            s.send( msg, function(){
                alert("分享到\""+s.description+"\"成功! " );
                
            }, function(e){
                alert( "分享到\""+s.description+"\"失败: "+JSON.stringify(e) );
            
            } );
        }
        // 分析链接
        function shareHref(){
            var shareBts=[];
            // 更新分享列表
            var ss=shares['weixin'];
            ss&&ss.nativeClient&&(shareBts.push({title:'微信朋友圈',s:ss,x:'WXSceneTimeline'}),
            shareBts.push({title:'微信好友',s:ss,x:'WXSceneSession'}));
            ss=shares['qq'];
            ss&&ss.nativeClient&&shareBts.push({title:'QQ',s:ss});
            // 弹出分享列表
            shareBts.length>0?plus.nativeUI.actionSheet({title:'分享链接',cancel:'取消',buttons:shareBts},function(e){
                (e.index>0)&&shareAction(shareBts[e.index-1],true);
            }):plus.nativeUI.alert('当前环境无法支持分享链接操作!');
        }
        
        </script>
    </head>

    <body>
            <!-- 主页面标题 -->    
            <p>链接地址:</p>
            <input id="sharehref"  type="url" value="http://www.baidu.com/" />
            <p>链接标题:</p>
            <input id="sharehrefTitle"  type="text" value="title" />
            <p>链接描述:</p>
            <input id="sharehrefDes"  type="text" value="test"/></br>
            
            <button type="button" onclick="shareHref()"> 分享链接</button>

    </body>
</html>

 

MUI 分享功能

    A+
发布日期:2017年05月10日 09:31:58  所属分类:MUI
最后更新时间:2018-09-12 21:44:39
评分: (5 票;平均数5.00 ;最高评分 5 ;用户总数5;总得分 25;百分比100.00)
付杰
wp discux 帝国 dedecms phpcms等快速建站
wp discux 帝国 dedecms phpcms等快速建站
  • ¥ 99.9元
  • 市场价:499.9元
wordpress站群服务 泛解析二级域名 二级目录站群
wordpress站群服务 泛解析二级域名 二级目录站群
  • ¥ 1999.9元
  • 市场价:4800元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建服务
PHP运行环境 wamp lamp lnmp 安装 配置 搭建服务
  • ¥ 9.9元
  • 市场价:49.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:52   其中:访客  37   博主  15

  1. 头像 用心去爱你 1

    我又来了,今天我用MUI做微信分享的时候,出现了如下情况:
    无法分享到微信,由于不支持的分享类型,无法分享到微信,返回(未审核应用)。

    无法分享到微信,返回(未审核应用)

    • 付杰 付杰

      @用心去爱你 给你一个解决思路:
      1、微信平台的appid审核是否通过?(注意:微信分享一定要去“微信开放平台”申请,如果你去“腾讯开放平台”申请是没有用的,它们虽然都是属于腾讯,但是appid并不能通用。)
      2、检查appid是否填错?
      3、检查shareSdk的sppky
      4、检查在微信平台填写包名和签名是否一致?

  2. 头像 用心去爱你 0

    sdk里面的配置分享的时候,分享到微信的appid和分享到QQ的appid是一样的吗?

  3. 头像 呃呃 0

    [Web浏览器] “Uncaught TypeError: Cannot read property ‘weixin’ of null” /FA-app – 副本/temp/share.html (277)
    [Web浏览器] “e:” /FA-app – 副本/temp/share.html (305)
    预览的时候报这个错 是什么原因呢,求解。

    • 付杰 付杰

      @呃呃 未捕获的类型错误:无法读取null的属性’weixin’

  4. 头像 奥特曼 1

    MUI框架苹果不能微信分享,真机测试苹果微信分享正常。安卓正常,就是苹果签名完分享朋友圈唤起不了!
    字可以分享,就是图片分享不了。

    • 付杰 付杰

      @奥特曼 1、MUI微信分享图片要先保存到本地再分享才能成功。
      2、MUI微信分享对图片文件的大小有限制。

  5. 头像 群情激愤 0

    分享到微信 qq功能怎么做angular?

  6. 头像 平底锅 0

    mui的分享朋友圈的总是闪一下就退出?这是为什么?

    • 付杰 付杰

      @平底锅 这个问题以前也有人问过,闪退是APP问题,不是mui问题,请查看你的代码是否兼容?

  7. 头像 天马行空 1

    ”dcloud 微信分享修改显示来源“怎么做?

  8. 头像 狗蛋 0

    mui 分享功能 配置 sdk 如何搞?

    • 付杰 付杰

      @狗蛋 MUI 有个json配置文件,其实不用配置也可以!

  9. 头像 频频 0

    mui app 微信分享 更换签名 如何操作?

    • 付杰 付杰

      @频频 是的!最好多去官方看,官网还是全面些!

  10. 头像 杨朱 1

    MUI分享微信,朋友朋友圈,微博怎么实现?同上?

  11. 头像 小王 0

    问下微博分享的是怎么做的,应该跟微信分享的集成不一样吧

  12. 头像 辉三少 0

    通过qq分享时,只能分享一个链接,缩略图没有分享成功的原因是什么?

    • 付杰 付杰

      @辉三少 用的集成的?图片链接可以使用吗?写死一个路径试试。

      • 头像 辉三少 1

        @付杰 已经查到原因了,分享的时候不能分享到我的电脑,会把链接显示出来,分享给好友不会出现这种问题,谢谢你!

  13. 头像 朋友情意长 0

    mui 怎么微信分享9张图?

    • 付杰 付杰

      @朋友情意长 mui相关的问题,请加QQ群:453011886,可以找专业的前端人员。

  14. 头像 稀里糊涂 1

    mui如何吊起qq?

    • 付杰 付杰

      @稀里糊涂 我没理解你的意思,不过:针对mui的相关问题都可以加QQ群:453011886,可以找群专业的前端人员。

  15. 头像 前端小莫 0

    mui分享不执行
    这个是什么?我在手机上alert测试到这里好像就出问题了
    不执行下去了

    • 头像 PHP+炸坦克的舒克 0

      @前端小莫 这是一个数组,直接调用就可以了。如下两张图片所示:
      mui分享
      mui分享

  16. 头像 星沉 1

    有人用过百度分享吗?百度分享用在手机端的时候,点击分享然后手机端各种不兼容,大神有没有什么解决的办法?我也看了下MUI分享,有点小复杂,我要赶项目进度,有其它的解决方案吗?急!急!急!

    • 付杰 付杰

      @星沉 建议你直接用:JiaThis分享,它跟百度分享一样,唯一不同的是 JiaThis分享它支持PC端和移动端,当然:自定义分享按钮……功能都是可以的!

  17. 头像 冰冰女神 0

    MUI 分享 闪一下 这是什么原因?有人遇到过吗?

    • 头像 依然范特尔西 1

      @冰冰女神 闪退?
      闪退是APP问题,不是mui问题,请查看你的代码是否兼容?

  18. 头像 ThinkPhp星河 0

    我就想问一下:mui thinkphp 上传 功能可以整合吗?毕竟我是thinkphp新手,想试一试,想来问问各位大神有没有整合过:mui thinkphp 上传?还有就是难度大不?

    • 头像 TP二次开发 1

      @ThinkPhp星河 当然可以整合,只要你摸透了TP就行,难度也不是很大;甚至对有些thinkphp大神来说都是零难度!

  19. 头像 其实什么都无所谓 0

    mui分享除了做这些,还可以做其它什么吗?我是新手,表示不懂,代码看得一脸蒙逼!

  20. 头像 海尔电脑城 0

    我只是简单了解一个编程!我只是一个过客而已,正如悄悄的来,又悄悄的走。

  21. 头像 思翊 1

    对于像我这种级别的新手来说:mui分享到微信 我已经实现了!非常的自豪!

  22. 头像 MUI初学者 0

    哦,我有按照你的文章写了分享了,是对的,我现在的意思是,我想修改分享插件的源代码,可以修改吗?

    • 付杰 付杰

      @MUI初学者 直接去修改啊,内容就那么多!不是难事!

  23. 头像 HBUILD新人 1

    现在mui用到的这个分享插件,怎么才能找到源码?

    • 头像 HBUILD+MUI+DCLOUD 1

      @HBUILD新人 HBUILD新建app:886.png

      • 头像 HBUILD新人 1

        @HBUILD+MUI+DCLOUD 新建了个hello h5+工程,有看到里面有分享的功能,那么源码也就在工程里了,是吧?

  24. 头像 dcloud浩2 1

    问个其它问题,有人用dcloud做过完整的app没?适合做新闻类的app吗,流畅度之类的;我是dcloud新手;

    • 头像 伊然范特儿西 1

      @dcloud浩2 流畅度取决你的缓存和服务器性能!MUI 本身流畅度可以!

  25. 头像 MUI自学者 0

    有没有做过mui不是插件分享,直接用微信官方的分享sdk?

    • 头像 伊然范特儿西 1

      @MUI自学者 调用 微信官方原生的分享sdk;那就用jssdk 属于微信开发方面;希望可以帮助到你!

  26. 头像 dcloud新手 0

    返回HBuider:如何改成返回自家的呢?559.jpg

    • 付杰 付杰

      @dcloud新手 返回HBuider,这个需要自己写另外的,这已经和MUI没什么关系了!

  27. 头像 今天我是第一 2

    我试了下,微信分享,是成功的,但现在分享后显示的app名与图标,是HBuilder的,如何让我的appid有效, 是否是要打包后才可以!