我爱模板网 > 建站教程 > APP开发,混合APP >  MUI 分享功能(微信、QQ 、朋友圈)正文

MUI 分享功能(微信、QQ 、朋友圈)

分享一篇详细的关于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>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:HBuilder mui开发教程微信、QQ、新浪分享 下一篇:mui scroll区域滚动判断滚动到底部和顶部
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢