MUI一些心得

//---------------关闭等待框,一般用于发ajax获取到数据后,但还一直显示正在加载的时候使用,放在最末尾-----------------

 plus.nativeUI.closeWaiting();

//---------------------------------------微信分享例子,文字复制粘贴---------------------------------------------

<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</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>
            <input id="ceshi" type="text" value="测试"/>
            <img id="img1" class="images" src="images/head_portrait.png"/>
            <img id="img2" class="images" src="images/car.png"/>
            <img id="img3" class="images" src="images/head_portrait.png"/>
            <img id="img4" class="images" src="images/car.png"/>
            <img id="img5" class="images" src="images/head_portrait.png"/>
            <img id="img6" class="images" src="images/car.png"/>
            <button type="button" onclick="shareHref()"> 分享链接</button>
            <button type="button" onclick="fuzhi()"> 复制</button>
            <button type="button" onclick="zhantie()"> 粘贴</button>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
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.thumbs=img1.src;
msg.pictures=[];
for(var i=0;i<document.getElementsByClassName('images').length;i++){
msg.pictures.push(eval('img'+(i+1)+'.src'))
}
            }else{
                if(pic&&pic.realUrl){
                    msg.pictures=[pic.realUrl];
                }
            }
            // 发送分享
            if (sb.s.authenticated ) {
//              alert("---已授权---");
if(msg.pictures.length<2){
var ids = [{
                    title:'微信好友',
                    s:shares['weixin'],
                    x:'WXSceneSession'
                }, {
                    title:'微信朋友圈',
                    s:shares['weixin'],
                    x:'WXSceneTimeline'
                }],
                bts = [{
                    title: "微信好友"
                }, {
                    title: "微信朋友圈"
                }];
            plus.nativeUI.actionSheet({
                    cancel: "取消",
                    buttons: bts
                },
                function(e) {
                msg.extra.scene=ids[e.index-1].x;
                shareMessage(msg,sb.s);
                }
            );
}else{
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));
            if(msg.pictures.length>1){
            plus.share.sendWithSystem(msg, function(){
// alert('分享成功');
}, function(e){
// alert('分享失败:'+JSON.stringify(e));
});
            }else{
            s.send( msg, function(){
                alert("分享到\""+s.description+"\"成功! " ); 
            }, function(e){
//              alert( "分享到\""+s.description+"\"失败: "+JSON.stringify(e) );
            alert( "分享到\""+s.description+"\"失败");
            } );
            }
        }
/**
         * 分享按钮点击事件
         */
        function fuzhi() {
        var txt = sharehrefTitle.value;
setClipbordText(txt);
mui.alert('文字以复制');
        }
        function zhantie() {
        var txt2 = getClipbordText();
ceshi.value = txt2;
        }
        function shareHref() {
        var txt = '666888';
setClipbordText(txt);
        shares['weixin'].authenticated=true; 
            var ids = [{
                    title:'微信好友',
                    s:shares['weixin'],
                    x:'WXSceneSession'
                }, {
                    id: "qq"   /*QQ好友*/
                }, {
                    id: "tencentweibo"   /*腾讯微博*/
                },{
                    id: "sinaweibo"  /*新浪微博*/
                }],
                bts = [{
                    title: "分享到微信"
                },  {
                    title: "分享到QQ"
                }, {
                    title: "分享到腾讯微博"
                }, {
                    title: "分享到新浪微博"
                }];
            plus.nativeUI.actionSheet({
                    cancel: "取消",
                    buttons: bts
                },
                function(e) {
                (e.index>0)&&shareAction(ids[e.index-1],true);
                }
            );
        }
        //-------------------------------------------------------------------------------
        /**
 * @description 获取剪贴板内容 (粘贴)
 */
function getClipbordText() {
    if(!window.plus) return;
    if(mui.os.android) {
        var Context = plus.android.importClass("android.content.Context");
        var main = plus.android.runtimeMainActivity();
        var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
        return plus.android.invoke(clip, "getText");
    } else {
        var UIPasteboard = plus.ios.importClass("UIPasteboard");
        var generalPasteboard = UIPasteboard.generalPasteboard();
        // 设置/获取文本内容:
        //generalPasteboard.setValueforPasteboardType("testValue", "public.utf8-plain-text");
        //var _val = generalPasteboard.valueForPasteboardType("public.utf8-plain-text");
        //TODO 应用在后台的时候获取剪切版数据被系统限制了,只有在app内才能访问接口
        var _val=generalPasteboard.plusCallMethod({valueForPasteboardType:"public.utf8-plain-text"});
        console.log("ios复制返回的数据是:",_val); 
        return _val || '';
    }
}


/**
 * @description 设置剪贴板内容(复制)  
 */
function setClipbordText(txt) {
    if(!window.plus) return;
    if(mui.os.android) {
    var Context = plus.android.importClass("android.content.Context");
    var main = plus.android.runtimeMainActivity();
    var clip = main.getSystemService(Context.CLIPBOARD_SERVICE);
    plus.android.invoke(clip,"setText",txt);
    } else {
        var UIPasteboard  = plus.ios.importClass("UIPasteboard");
var generalPasteboard = UIPasteboard.generalPasteboard();
generalPasteboard.setValueforPasteboardType(txt,"public.utf8-plain-text");
    }
}
</script>
</body>

</html>

//------------------此微信分享获取不到网络图片,必须先下载才能获取本地图片分享------------------

//------------------此例子来自于https://blog.csdn.net/swingyaoye/article/details/50403752------------------

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
    </head>
    <body>
        <div class="mui-content">
            <img id="img1"/>
            <img id="img2"/>
            <img id="img3"/>
        </div>
    </body>
    <script src="/static/css/default/img/default.jpg" data-original="../js/mui.js" type="text/javascript" charset="utf-8"></script>   
    <script type="text/javascript" charset="utf-8">
        mui.init(); //mui初始化
        mui.plusReady(function() {
            setImg("img1", "http://ask.dcloud.net.cn/uploads/avatar/000/00/00/16_avatar_max.jpg");
            setImg("img2", "http://client.bbzuche.com/resources/product/2014012094648828751145/20150611/logo.jpg");
            setImg("img3", "http://www.bbzuche.com/images/tan.jpg");
        });
        /*<img>设置图片
         *1.从本地获取,如果本地存在,则直接设置图片
         *2.如果本地不存在则联网下载,缓存到本地,再设置图片
         * */
        function setImg(imgId, loadUrl) {
                if (imgId == null || loadUrl == null) return;
                //图片下载成功 默认保存在本地相对路径的"_downloads"文件夹里面, 如"_downloads/logo.jpg"
                var filename = loadUrl.substring(loadUrl.lastIndexOf("/") + 1, loadUrl.length);
                var relativePath = "_downloads/" + filename;
                //检查图片是否已存在
                plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
                    console.log("图片存在,直接设置=" + relativePath);
                    //如果文件存在,则直接设置本地图片
                    setImgFromLocal(imgId, relativePath);
                }, function(e) {
                    console.log("图片不存在,联网下载=" + relativePath);
                    //如果文件不存在,联网下载图片
                    setImgFromNet (imgId,loadUrl,relativePath);
                });
            }
        /*给图片标签<img>设置本地图片
         * imgId 图片标签<img>的id
         * relativePath 本地相对路径 例如:"_downloads/logo.jpg"
         */
        function setImgFromLocal(imgId, relativePath) {
//本地相对路径("_downloads/logo.jpg")转成SD卡绝对路径("/storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/downloads/logo.jpg");
                var sd_path = plus.io.convertLocalFileSystemURL(relativePath);
                //给<img>设置图片
                $id(imgId).setAttribute("src", sd_path);
            }
        /*联网下载图片,并设置给<img>*/
        function setImgFromNet (imgId,loadUrl,relativePath) {
            //先设置下载中的默认图片
            $id(imgId).setAttribute("src", "../images/loading.png");
            //创建下载任务
            var dtask = plus.downloader.createDownload(loadUrl, {}, function(d, status) {
                if (status == 200) {
                    //下载成功
                    console.log("下载成功=" + relativePath);
                    setImgFromLocal(imgId, d.filename);
                } else {
                    //下载失败,需删除本地临时文件,否则下次进来时会检查到图片已存在
                    console.log("下载失败=" + status+"=="+relativePath);
                    //dtask.abort();//文档描述:取消下载,删除临时文件;(但经测试临时文件没有删除,故使用delFile()方法删除);
                    if (relativePath!=null)
                        delFile(relativePath);
                }
            });
            //启动下载任务
            dtask.start();
        }
        /*删除指定文件*/
        function delFile(relativePath) {
            plus.io.resolveLocalFileSystemURL(relativePath, function(entry) {
                entry.remove(function(entry) {
                    console.log("文件删除成功==" + relativePath);
                }, function(e) {
                    console.log("文件删除失败=" + relativePath);
                });
            });
        }
        /*根据id查找元素*/
        function $id(id) {
            return document.getElementById(id);
        }
    </script>
</html>

//-----------------------------微信快捷登陆----------------------------------

<html>


<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/index.css" rel="stylesheet" />
<style type="text/css">
            .head {
                margin-top: 10px;
            }
            .head img{
                width: 120px;
                height: 120px;
                margin-left: calc(50% - 60px);
            }
            .top {
                margin-top: 40px;
            }
            .sinaweibo {
                position: relative;
                width: 60px;
                height: 60px;
                margin-left: calc(50% - 30px);
                background: url(images/icon-sina.png);  
            }
            .weixin {
                width: 60px;       
                height: 60px; 
                margin-left: calc(50% - 30px);
                background: url(images/icon-weixin.png);   
            }
            .qq {
                width: 60px;
                height: 60px;
                margin-left: calc(50% - 30px);
                background: url(images/icon-qq.png);  
            }
        </style>
</head>


<body>
<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">第三方登录</h1>
        </header>
        <div class="mui-content">
            <div class="head">
                <img src="../images/[email protected]" id="headImage"/>
            </div>
            <div class="top" id="testLogin">
                <span class="mui-icon weixin" id="weixin"></span> 
                <a><span class="mui-icon qq" id="qq"></span> 
                <span class="mui-icon sinaweibo" id="sinaweibo"></span>
            </div>
        </div>
<script src="js/mui.min.js"></script>
<script src="js/mui.zoom.js"> </script>
<script src="js/mui.previewimage.js"></script>
        <script src="js/tools.js" ></script> 
<script src="js/http.js"></script>
<script>
        // 获取用户头像标签
        var headImage = document.getElementById('headImage');


        mui.init({
            swipeBack:true //启用右滑关闭功能
        });


        mui.plusReady(function() {  
            plus.oauth.getServices(function(services) {
                auths = services;
            }, function(e) {
                alert("获取登录服务列表失败:" + e.message + " - " + e.code);
            });
        })


        document.getElementById('weixin').addEventListener('tap',function() {
            console.log("微信");
            authLogin('weixin');
        })
        document.getElementById('qq').addEventListener('tap',function() {
            console.log("QQ");
            authLogin('qq');
        })
        document.getElementById('sinaweibo').addEventListener('tap',function() {
            console.log("微博");
            authLogin('sinaweibo');
        })


        // 登录操作
        function authLogin(type) {
            var s;
            for (var i = 0; i < auths.length; i++) {
                if (auths[i].id == type) {
                    s = auths[i];
                    break;
                }
            }
            if (!s.authResult) {
                s.login(function(e) {
                    mui.toast("登录认证成功!");
                    authUserInfo(type);
                }, function(e) {
                    mui.toast("登录认证失败!");
                });
            } else {
                mui.toast("已经登录认证!");
            }
        }
        //注销
        function authLogout() {
            for (var i in auths) {
                var s = auths[i];
                if (s.authResult) {
                    s.logout(function(e) {
                        console.log("注销登录认证成功!");
                    }, function(e) {
                        console.log("注销登录认证失败!");
                    });
                }
            }
        }
        // 微信登录认证信息
        function authUserInfo(type) {
            var s;
            for (var i = 0; i < auths.length; i++) {
                if (auths[i].id == type) {
                    s = auths[i];
                    break;
                }
            }
            if (!s.authResult) {
                mui.toast("未授权登录!");
            } else {
                s.getUserInfo(function(e) {
                    var jsonObj = s.userInfo;
                    console.log("获取用户信息成功:" + jsonObj);
                    //发送ajax到后台 
                    mui.ajax(httpAll+'member/loginByOpenId',{
                    data:{
openId:jsonObj.openid
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/x-www-form-urlencoded; charset=utf-8'},               
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
if(data.errorCode == -1){
//没有openid,第一次微信登陆,创建 openid
                    mui.ajax(httpAll+'member/wxRegister',{
                    data:{
sex:s.userInfo.sex,
                            nickname:s.userInfo.nickname,
                            country:s.userInfo.country || '',
                            province:s.userInfo.province || '',
                            city:s.userInfo.city || '',
                            headimgurl:s.userInfo.headimgurl || '',
                            unionid:s.userInfo.unionid,
                            openid:s.userInfo.openid
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
headers:{'Content-Type':'application/x-www-form-urlencoded; charset=utf-8'},               
success:function(data2){
plus.navigator.setCookie(httpAll, 'token='+encodeURI(data2.data.token));
//服务器返回响应,根据响应结果,分析是否登录成功;
location.href="pages/home.html";
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
}else{
plus.navigator.setCookie(httpAll, 'token='+encodeURI(data.data.token));
location.href="pages/home.html?"+"token="+encodeURI(data.data.token);
document.cookie="name="+encodeURI(data.data.token);
}
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
                    showData(type,jsonObj);
                }, function(e) {
                    alert("获取用户信息失败:" + e.message + " - " + e.code);
                });
            }
        }
        // 显示用户头像信息
        function showData(type,data) {
            switch (type){
                case 'weixin':
                    headImage.src = data.headimgurl;
                    break;
                case 'qq':
                    headImage.src = data.figureurl_qq_2;
                    break;
                case 'sinaweibo':
                    headImage.src = data.avatar_large;
                    break;
                default:
                    break;
            }
        }
    </script>
</body>


</html>

猜你喜欢

转载自blog.csdn.net/qq_35181466/article/details/80103262