webApp项目总结

2017-1-16 hanbin JavaScript

A.项目背景：

最近花了将近1周的时间做了一个移动端的demo，因为是自己练习东西很少.

B.所用技术：

VueJs + requireJs+zeptoJs

C:总结：

1.适配问题
由于是移动端的项目，所以第一个遇到的问题当然是如何在所有的移动设备上面能正常显示页面，比如小屏幕5S，大屏幕6P。如果横向百分比，纵向固定，这样的话会发现一些大屏幕机子上面的快是矮胖矮胖的。这次我想适配上面用rem+百分比，这样做出来的页面在不同机型上面的字体大小是不一样的，高度也是按照比例的，更加贴近原生app的效果。具体的做法是取一个根字体大小，这里我就根据28px当做基础字体，在commonjs里面写一段获取屏幕宽度的代码var winWidth = document.body.clientWidth;
document.querySelector('html').style.fontSize = winWidth/750 * 28 + 'px';然后就能设置不同屏幕的根字体大小了。

2.移动端上传图片

如图所示：

找到了一个上传插件webuploader.下面用代码来说明怎么用（一定要注意这个插件依赖JQ，对版本有限制的）。

html：

<div id="uploader-demo">
    <div id="thelist" class="uploader-list clearfix"></div>  
    <div id="filePicker" class="beauty-file"></div>  
</div>

js：

$(function() {
    var $list = $("#thelist"),
        $btn = $("#ctlBtn"),
        isTrue = false;
    var uploader = WebUploader.create({
        auto:true,
        swf: getRoot() + '/js/webupload/Uploader.swf',
        server: getRoot() + '/register/uploadFile.shtml',
        pick: '#filePicker',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        },
        method: 'POST',
    });

    // 文件添加
    uploader.on('fileQueued', function(file) {
        if ($list.find('.file-item').length >= 5) {
            alert('最多上传五张图片！');
            return false;
        }
        var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<a href="###" class="cancel-img"></a>' + '</div>'),
            $img = $li.find('img');
            $cancelImg = $li.find('a');
        $list.append($li).append($('#filePicker'));
        uploader.makeThumb(file, function(error, src) {
            if (error) {
                $img.replaceWith('<span>不能预览</span>');
                return false;
            }
            $img.attr('src', src);
        });
        //图片删除
        $cancelImg.on( 'click', function() {
            uploader.removeFile( file );
            $(this).parent().remove();
       });
    });

    // 文件上传成功
    uploader.on( 'uploadSuccess', function( file ,response) {
       var $li = $( '#'+file.id );
       isTrue = response.success;
       if(response.success){
           $li.append('<p class="up-status">上传成功</p>');
       } else {
            alert(response.message);
           $li.append('<p class="up-status">上传失败</p>');
       }
    });

    // 文件上传失败
    uploader.on('uploadError', function(file) {
        var $li = $('#' + file.id),
            $error = $li.find('div.error');
        if (!$error.length) {
            $error = $('<div class="error"></div>').appendTo($li);
        }
        alert('上传失败！');
        return false;
    });

    // 点击下一步
    $btn.on('click', function() {
        if( $('#thelist').find('div').length===0 ) {
            alert('请上传合同！');
            return false;
        }
        if( isTrue ) {
            window.location.href = '/html/register/register2.html';
        } else {
            alert('请刷新后重新上传！');
        }
    });
});

3.注册登录。

如图所示：

这次用了vuejs做了注册，比用jq写的代码更加容易修改，以后维护的话也更加方便。

html:

<div id="registerInfo" class="register-info">
        <div class="phone">
            <input type="number" placeholder="手机号" class="no-border-bottom" v-model='userInfo.phone' />
        </div>
        <div class="user-name">
            <input type="text" placeholder="用户名" class="no-border-bottom" v-model='userInfo.userName'/>
        </div>
        <div class="pwd">
            <input type="password" placeholder="密码" class="no-border-bottom" v-model='userInfo.pwd'/>
        </div>
        <div class="confirm-pwd">
            <input type="password" placeholder="确认密码" v-model='userInfo.confirmPwd'/>
        </div>
        <!-- <div class="identify-code">
            <input type="text" placeholder="验证码" v-model='userInfo.identifyCode'/>
            <a href="###" id="identify" class="identify-btn" v-on:click='getIdentifyCode()'>
                <img :src='userInfo.imgSrc' />
            </a>
        </div> -->
        <div class="sms-code">
            <input type="text" placeholder="短信验证码" v-model='userInfo.smsCode'/>
            <a href="###" class="sms-btn" v-on:click="getSmsCode()">获取验证码</a>
        </div>
        <a href="###" class="next" v-on:click='next()'>下一步</a>
    </div>

js:

require.config({
    baseUrl : '/js',
    paths : {
        vue : 'lib/vue.min',
        zepto: 'lib/zepto.min',
        common : 'common/common',
        md5 : 'lib/md5'
     }
});
require(['vue', 'zepto', 'common', 'md5'] , function(Vue) {
    var vm = new Vue({
        el : '#registerInfo',
        data : {
            main : [
                {name:'phone', error:'normal', errorInfo: '手机号为空或者格式不正确！'},
                {name:'userName', error:'normal', errorInfo: '用户名为空！'},
                {name:'pwd', error:'normal', errorInfo: '密码为空或者密码格式不正确（字母数字都要有）！'},
                {name:'confirmPwd', error:'normal', errorInfo: '两次密码不一致！'},
                {name:'identifyCode', error:'normal', errorInfo: '验证码为空或者格式不正确！'},
                {name:'smsCode', error:'normal', errorInfo: '短信验证码为空或者格式不正确！'},
            ],
            userInfo: {
               phone:'',
               userName:'',
               pwd:'',
               confirmPwd:'',
               identifyCode:'',
               smsCode:'',
               imgSrc: ''
            }
        },
        methods :  {
            checkPhone : function() {
                var oThis = this;
                if( /^0?1[3|4|5|8][0-9]\d{8}$/.test(oThis.userInfo['phone']) ) {
                    $.ajax({
                        type: "post",
                        url:  ,
                        async: false,
                        scriptCharset: 'utf-8',
                        data: {
                            'mobile' : oThis.userInfo['phone']
                        },
                        dataType: 'json',
                        success: function (data) {
                            if(data.success) {
                                  oThis.main[0]['error'] = false;
                            } else {
                                  alert(data.message);
                            }
                        }
                    });
                } else {
                    oThis.main[0]['error'] = true;
                    alert(oThis.main[0]['errorInfo']);
                }
            },
            getSmsCode : function() {
                this.checkPhone();
                if( this.main[0]['error']===false ) {
                    var oThis = this,
                        btn = $(".sms-btn");
                    if( !btn.hasClass('disabled') ) {
                        $.ajax({
                            type: "post",
                            url:  ,
                            async: false,
                            scriptCharset: 'utf-8',
                            data: {
                                'mobile' : oThis.userInfo['phone']
                            },
                            dataType: 'json',
                            success: function (data) {
                                var flag = data.validate,
                                    curCount = 60,
                                    timer = null;
                                if( flag == true ) {
                                    oThis.main[5]['error'] = false;
                                    btn.addClass('disabled');
                                    btn.text(curCount + '秒后重新发');
                                    timer = setInterval(function() {
                                        if( curCount === 0 ) {
                                            clearInterval(timer);
                                            btn.removeClass('disabled').text('请重新发送验证码');
                                        } else {
                                            curCount--;
                                            btn.text(curCount + '秒后重新发');
                                        }
                                    } ,1000);
                                } else {
                                    oThis.main[5]['error'] = true;
                                }
                            }
                        });
                    }
                }
            },
            checkPwd : function() {
                var oThis = this;
                if( /^(?!\d+$)(?![A-Za-z]+$)([\w]{6,20})$/.test(oThis.userInfo['pwd']) ) {
                    oThis.main[2]['error'] = false;
                } else {
                    oThis.main[2]['error'] = true;
                    alert(oThis.main[2].errorInfo);
                }
            },
            checkConfirmPwd : function() {
                var oThis = this;
                if( oThis.userInfo['confirmPwd']===oThis.userInfo['pwd'] ) {
                    oThis.main[3]['error'] = false;
                } else {
                    oThis.main[3]['error'] = true;
                    alert(oThis.main[3].errorInfo);
                }
            },
            getIdentifyCode: function() {
                this.userInfo['imgSrc'] =  getRoot() + '/validateCode.shtml?type=1&r='+Math.random();
            },
            check : function(msg) {
                switch (msg) {
                    case "phone":
                          this.checkPhone();                                      
                          break;
                    case "userName":                                                                 
                          this.userInfo.userName !== "" ? this.main[1].error = false : (this.main[1].error = "normal",alert(this.main[1].errorInfo));

                          break;                                                                     
                    case "pwd":
                          this.checkPwd();                                                       
                          break;
                    case "confirmPwd":
                          this.checkConfirmPwd();    
                          break;
                    case "identifyCode":
                          this.checkIdentifyCode();     
                          break;
                    case "smsCode":
                          this.checkSmsCode();     
                          break;
                }     
            },
            next : function(){
                var oThis  = this;
                  this.check('phone');
                  if( this.main[0].error===false ) {
                      this.check('userName');
                      if( this.main[1].error===false ) {
                          this.check('pwd');
                          if( this.main[2].error===false ) {
                              this.check('confirmPwd');
                              if( this.main[3].error===false ) {
                                  $.ajax({
                                    type: "post",
                                    url:  '',
                                    async: false,
                                    scriptCharset: 'utf-8',
                                    data: {
                                        mobile : oThis.userInfo['phone'],
                                        userName : oThis.userInfo['userName'],
                                        password : hex_md5(oThis.userInfo['pwd']),
                                        confirm_password : hex_md5(oThis.userInfo['confirmPwd']),
                                        phone_code : oThis.userInfo['smsCode']
                                    },
                                    dataType: 'json',
                                    success: function (data) {
                                        if( data.success ) {
                                            window.location.href = 'register3.html';
                                        } else {
                                            alert(data.message);
                                        }
                                    }
                                });        
                              }    
                          }
                      }
                  }
            }
        },
        ready : function(){

        }
    });
});

总结：
这个demo用了vuejs，感觉数据驱动的话可以避免操作Dom的繁琐，由于是第一次用，为了完成，还是用了比较多的dom操作。

分享到： QQ空间新浪微博腾讯微博微信更多

« Axure8利用Axure Share创建团队项目，进行多人协作开发 | 阿里云短信服务phpSDK使用方法»

webApp项目总结

日历

存档

最新评论

链接

搜索