6 前端的知识（mui+javascript)

1 事件绑定

代码块激活字符: mmon


mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
  //获取id
  var id = this.getAttribute("id");
  //传值给详情页面，通知加载新数据
  mui.fire(detail,'getDetail',{id:id});
  //打开新闻详情
  mui.openWindow({
    id:'detail',
    url:'detail.html'
  });
}) 
                                mui(".btnOper").on("tap", ".passRequest", function(e){
                                    var friendId = this.getAttribute("friendId");
                                    operatorFriendRequest(user.id, friendId, 1);
                                });

2 设置事件监听并触发下载事件 https://www.html5plus.org/doc/zh_cn/downloader.html

设置事件监听

              var link_saveQRCode = document.getElementById("link_saveQRCode");
                link_saveQRCode.addEventListener("tap", function(){....}

触发下载事件 https://www.html5plus.org/doc/zh_cn/downloader.html

     Download plus.downloader.createDownload(url, options, completedCB);
// 创建下载任务 
function createDownload() {
    var dtask = plus.downloader.createDownload("http://www.abc.com/a.doc", {}, function(d, status){
        // 下载完成
        if(status == 200){ 
            console.log("Download success: " + d.filename);
        } else {
             console.log("Download failed: " + status); 
        }  
    });
    //dtask.addEventListener("statechanged", onStateChanged, false);
    dtask.start(); 
}

//绑定下载照片的菜单按钮
                var link_saveQRCode = document.getElementById("link_saveQRCode");
                link_saveQRCode.addEventListener("tap", function(){
                    plus.nativeUI.showWaiting("下载中...");
                    var user = app.getUserGlobalInfo();
                    var qrcode = user.qrcode;

//                    var dtast = plus.downloader.createDownload(
                    var dtask = plus.downloader.createDownload(
                        app.imgServerUrl + qrcode,
                        {},
                        function(downloadFile, status){
                            plus.nativeUI.closeWaiting();
                            if( status == 200){
                                var tempFile = downloadFile.filename;

                                //通过相册api保存照片到本地相册
                                 plus.gallery.save( tempFile, function () {
                                    app.showToast( "保存二维码到相册成功", "success");
                                } );
                            }else{
                                app.showToast("下载错误...", "error");
                                console.log("下载错误...");
                            }

                        }

                    );
                    dtask.start(); //启动下载任务
                });

3 上传

plus.nativeUI.showWaiting( "上传中..." );

                    var cropper = $image.data('cropper');
                    var result = $image.cropper("getCroppedCanvas");
                    if(result) {
                        var base64Url = result.toDataURL();

                        // 上传头像
                        var user = app.getUserGlobalInfo();
                        // 与后端联调
                        mui.ajax(app.serverUrl + "/u/uploadFaceBase64",{
                            data:{
                                userId:user.id,
                                faceData:base64Url
                            },
                            dataType:'json',//服务器返回json格式数据
                            type:'post',//HTTP请求类型
                            timeout:10000,//超时时间设置为10秒；
                            headers:{'Content-Type':'application/json'},                  
                            success:function(data){
                                //关闭等待框
                                plus.nativeUI.closeWaiting();


                                if(data.status == 200){
                                    var userInfo = data.data;
                                    app.setUserGlobalInfo(userInfo);

                                    //触发另外一个webview的自定义事件，可以使用mui.fire()
                                    var imooc_meWebview = plus.webview.getWebviewById("imooc-me.html");
                                    mui.fire(imooc_meWebview, "refresh");

                                    //触发另外一个webview的自定义事件，可以使用mui.fire()
                                    var imooc_meWebview = plus.webview.getWebviewById("myface.html");
                                    mui.fire(imooc_meWebview, "refresh");


                                    //页面跳转
                                    mui.openWindow("index.html", "index.html");
                                }else{
                                    app.showToast(data.msg, "error");
                                }

                            },
                            error:function(xhr,type,errorThrown){
                                app.showToast(type, "error");
                                //异常处理；
                                console.log(type);
                            }
                        });

4 设置窗口监听不停刷新

// 添加自定义事件，刷新头像
                window.addEventListener("refresh", function(){
                    refreshFace_qrCode();
                });

5 ajax的写法 https://dev.dcloud.net.cn/mui/ajax/

代码块激活字符: majaxmgetmjson

mui.ajax('http://server-name/login.php',{
    data:{
        username:'username',
        password:'password'
    },
    dataType:'json',//服务器返回json格式数据
    type:'post',//HTTP请求类型
    timeout:10000,//超时时间设置为10秒；
    headers:{'Content-Type':'application/json'},                  
    success:function(data){
        //服务器返回响应，根据响应结果，分析是否登录成功；
        ...
    },
    error:function(xhr,type,errorThrown){
        //异常处理；
        console.log(type);
    }
});
=============
mui.post('http://server-name/login.php',{
        username:'username',
        password:'password'
    },function(data){
        //服务器返回响应，根据响应结果，分析是否登录成功；
        ...
    },'json'
);
=============
mui.get('http://server-name/list.php',{category:'news'},function(data){
        //获得服务器响应
        ...
    },'json'
);

mui.ajax(app.serverUrl + "/u/queryFriendRequests?userId=" + user.id,{
                    data:{},
                    dataType:'json',//服务器返回json格式数据
                    type:'post',//HTTP请求类型
                    timeout:10000,//超时时间设置为10秒；
                    headers:{'Content-Type':'application/json'},                  
                    success:function(data){
                        //服务器返回响应
                        if(data.status == 200){
                            var friendRequestList = data.data;
                            var ul_friend_request_list = document.getElementById("ul_friend_request_list");
                            if(friendRequestList != null && friendRequestList.length > 0){
                                var requestHtml = "";
                                for(var i = 0; i < friendRequestList.length; i++){
                                    requestHtml += renderFriendRequests(friendRequestList[i]);
                                }
                                ul_friend_request_list.innerHTML = requestHtml;
                                //动态对忽略和通过按钮进行实践绑定
//                                btnOper
//                                passRequest
//                                ignoreRequest
                                mui(".btnOper").on("tap", ".ignoreRequest", function(e){
                                    var friendId = this.getAttribute("friendId");
                                    operatorFriendRequest(user.id, friendId, 0);
                                });
                                mui(".btnOper").on("tap", ".passRequest", function(e){
                                    var friendId = this.getAttribute("friendId");
                                    operatorFriendRequest(user.id, friendId, 1);
                                });
                            }
                        }else{
                            ul_friend_request_list.innerHTML = "";
                        }


                    },
                    error:function(xhr,type,errorThrown){
                        app.showToast(type, "error");
                        //异常处理；
                        console.log(type);
                    }
                });

6 二维码 https://www.html5plus.org/doc/zh_cn/barcode.html

扫码识别图片中的条码
void plus.barcode.scan(path, successCB, errorCB, filters, autoDecodeCharset);
===============
Barcode
扫码识别控件对象
interface plus.barcode.Barcode {
    // Methods
    function void cancel();
    function void close();
    function void setFlash(open);
    function void setStyle(styles);
    function void start(options);


    // Events
    function void onerror();
    function void onmarked();
}
===============
// 从图片中扫码识别 
function scanImg() {
    plus.barcode.scan( '_www/barcode.png', function(type,result) {
            console.log("Scan success:("+type+")"+result);
        }, function(e){
            console.log("Scan failed: "+JSON.stringify(e));
        } );
}
===============


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Barcode Example</title>
    <script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady() {
    var e = document.getElementById("scan");
    e.removeAttribute( "disabled" );
}
var scan = null;
function onmarked( type, result ) {
    var text = '未知: ';
    switch(type){
        case plus.barcode.QR:
        text = 'QR: ';
        break;
        case plus.barcode.EAN13:
        text = 'EAN13: ';
        break;
        case plus.barcode.EAN8:
        text = 'EAN8: ';
        break;
    }
    alert( text+result );
}
function startRecognize(){
    scan = new plus.barcode.Barcode('bcid');
    scan.onmarked = onmarked; 
}
function startScan(){
    scan.start();
}
    </script>
    <style type="text/css">
*{
    -webkit-user-select: none;
}
html,body{
    margin: 0px;
    padding: 0px;
    height: 100%;
}
#bcid {
    background:#0F0;
    height:480px;
    width:360px;
}
    </style>
    </head>
    <body >
        <input type='button' onclick='startRecognize()' value='创建扫码控件' />
        <input type='button' onclick='startScan()' value='开始扫码' />
        <div id= "bcid"></div>
        <input type='text' id='text'/>
    </body>
</html>
=====================
BarcodeStyles
Barcode扫码控件样式




interface plus.barcode.BarcodeStyles {
    attribute String background;
    attribute String frameColor;
    attribute String scanbarColor;

    attribute String top;
    attribute String left;
    attribute String width;
    attribute String height;
    attribute String position;
}

7 设置延迟启动，在500毫秒之后启动startScan方法


                setTimeout("startScan()", "500");

8 触发事件

var imooc_me = plus.webview.getWebviewById("imooc-me.html");
                mui.fire(imooc_me, "refresh");

9 css style 类表示以图文列表形式

mui-media

JSON.stringify(data.data
``
### 10 设置滚动条位置

//设置聊天记录进入页面的时候自动滚动到最后一条
areaMsgList.scrollTop = areaMsgList.scrollHeight + areaMsgList.offsetHeight;

### 11 渲染页面时字符串拼接

var msg_list = doc.getElementById("msg");
msg_list.insertAdjacentHTML("beforeend", msg_list);

ul_chatSnapshot.insertAdjacentElement('beforeend', chatItemHtml);

### 12 调用其他页面的JS

wsWebview.evalJS("CHAT.chat("+msg_text_val+")")
```

13 同一台设备中重复登录，两个用户的缓存区就会发生混淆

posted @ 2021-07-11 10:36 weidalin 阅读(157) 评论(0) 收藏举报

刷新页面返回顶部

weidalin