HBuilder+MUI开发APP实战-司机签收系统（一）登录

如上是界面，UI自己弄去，

【HTML结构代码】-login.html

当我们点击登录的时候需要验证，要实现以下效果：

这个弹层使用的是layer插件，下面我们来上JS代码：

<script src="js/libs/require.js?v=1.0"></script>  
        <script src="js/require-config-index.js?v=1.0"></script>  
        <script src="js/app.js?v=1.0"></script>  
        <script>  
            requirejs(['common', 'config'], function(com, con) {  
                //检测升级  
                com.update();  

                //如果已经登陆，则直接进入首页  
                var user = com.account.getUser();  
                if(user)  
                {  
                    $('#carCode').val(user.vehCode);  
                    $('#mobile').val(user.driverMobile);  
                }  
                //双击退出  
                com.backExit();  

                $('button[type="submit"]').click(function() {  
                    var carCode = $('#carCode').val();  
                    var mobile = $('#mobile').val();  
                    var password = $('#password').val();  
                    if(carCode == "") {  
                        com.msg('请输入车牌号')  
                        return false;  
                    }  
                    if(mobile == "") {  
                        com.msg('请输入手机号')  
                        return false;  
                    }  
                    if(password == "") {  
                        com.msg('请输入密码')  
                        return false;  
                    }  
                    com.ajax('get', con.urlCONFIG.get_login, {  
                        'carCode': carCode,  
                        'mobile': mobile,  
                        'password': password  
                    }, function(jsonStr) {  
                        if(jsonStr) {  
                            com.dataCom.set('datauser',JSON.stringify(jsonStr));  
                            com.dataCom.set('datalogin','1');  
                            com.open('index.html');  
                        } else {  
                            com.msg('登录信息错误', 0);  
                        }  
                    }, null, this);  

                    return false;  
                })  
            });  
        </script>

细心的群众可能发现，为何没有对mui.js引用，是的，为了代码更加简洁，编码更加方便，本人将jquery和mui都压缩到了requirejs里。因为requirejs引用js都是异步的，很多童鞋在比如在使用$的时候，jquery还没加载进来，就报错了，所以本人这么做有2个好处：1，减少了文件请求数；2，全局注册了$和mui。

JS中我们多次看到com和con，com和con就是本人封装好的common.js和config.js。
common.js：主要是公共函数封装，比如系统升级，弹层，数据的存取，字符、数据处理等。
config.js：主要是封装一些静态变量。

这一节就讲到这，下节我们会详细讲解封装的关键js：common和config还有app.js，这3个脚本基本在任何APP里都可以共用，使我们开发的关键。