cordova+famous实战篇（2）——登录页面

weishao

原文来源：代码山

首先我们编写登录页面。在写代码之前，大家可以看看Cordova+Famous的常用属性(看我看我~)，了解这些基本属性的作用，达到事半功倍的效果。

页面分析
1.一个手机页面大致分为头、中、尾三部分。在这个页面中，由于没有尾部，我们可以把整体分为头、中两部分。
2.在famous中，我们可以把可点击区域和非可点击区域划分出来。从页面中可以看出，除了logo，其余的都是可点击区域。

准备工作
在src文件夹下面新建login.js.

编写代码
1.引入Node和微DOM，并且让它继承Node的方法

var Node = require('famous/core/Node');
var DOMElement = require('famous/dom-renderables/DOMElement');

function login(){

    //给页面创建节点，并且定义id为login
    new DOMElement(this,{
        id:'login'
    })

    Node.call(this);


}

login.prototype = Object.create(Node.prototype);

module.exports = login;

2.编写头部代码

   

1. this.head = this.addChild();//新建页面子元素
   
2.     this.head.setSizeMode('absolute','absolute')//声明定位方式
   
3.                      .setAbsoluteSize(40,40)//声明元素大小
   
4. 
   
5.     //创建节点
   
6.     this.head.el = new DOMElement(this.head,{
   
7.         classes:['login_head']//节点class名称
   
8.     });

复制代码

weishao

3.加入返回图标和编写CSS代码（css和img都在www文件目录下）

html{
    height: 100%;
}

#login{
    background: url('../img/login_bg.png') center no-repeat;
    background-size: cover;
}

.login_head{
   background: url('../img/back.png') center no-repeat;
   background-size: 50%;
}

到这里，头部就编写完成，让我们先来看看效果。打开DOS窗口，和上一篇一样，输入以下命令，就可以看到效果啦。

d：
D:\test\MyApp
gulp && cordova run browser

weishao

4.加入logo

    this.content = this.addChild();
    this.content.setDifferentialSize(0,-40)//由于头部占了40px,这里高度需要减少40px
                            .setPosition(0,40)//定位距离顶部40px

    this.content.el = new DOMElement(this.content,{
        classes:['login_content'],
        content:'<img src="img/user_pic.png"/>'//加入logo图片
    })

5.加入登录账号输入框

    this.phoneTxt = this.content.addChild();//加入账号输入框
    this.phoneTxt.setSizeMode('relative','absolute')
            .setAbsoluteSize(null,40)
            .setProportionalSize(0.9)//宽度百分比90%
            .setAlign(0.05)//距离左边5%
            .setPosition(0,160)//距离父元素顶部160px

    this.phoneTxt.el = new DOMElement(this.phoneTxt,{
        classes:['phoneTxt'],
        content:
        '<img src = "img/user.png"/>'+//加入图标
        '<input type="text" placeholder="手机号码"/>'//加入输入框标签
    })

6.同样的原理，加入登录密码输入框和登录按钮

    //登录密码输入框
    this.phonepas = this.content.addChild();
    this.phonepas.setSizeMode('relative','absolute')
            .setAbsoluteSize(null,40)   
            .setProportionalSize(0.9)
            .setAlign(0.05)
            .setPosition(0,220)

    this.phonepas.el = new DOMElement(this.phonepas,{
        classes:['phonepas'],
        content:
        '<img src ="img/lock.png"/>'+
        '<input type = "text" placeholder="密码"/>'+
        '<img src = "img/nosee.png"'
    });

    //登录按钮
    this.submit = this.content.addChild();
    this.submit.setSizeMode('relative','absolute')
            .setAbsoluteSize(null,50)
            .setProportionalSize(0.9)
            .setAlign(0.05)
            .setPosition(0,350)

    this.submit.el = new DOMElement(this.submit,{
        classes:['login_submit'],
        content:'登录'
    })  

weishao

7.输入框和登录按钮CSS

.phoneTxt{
    background: #fcc8d9;
    border-radius: 20px;
    border-radius: 30px;
}
.phoneTxt img{
    width:30px;
    height: 30px;
    position: absolute;
    top:6px;
    left: 15px;
    margin:0;
}
.phoneTxt input{
    width: 100%;
    background: #fcc8d9;
    height: 40px;
    border: 0px;
    border-radius: 30px;
    text-indent: 4em;
    outline: none;
    color:#fff;
    font-size: 14px;
}
.phoneTxt input::-webkit-input-placeholder {
    color: #fff;
}


.phonepas{
    background: #fcc8d9;
    border-radius: 20px;
}

.phonepas img{
    width: 30px;
    position: absolute;
    margin: 0;
    top: 6px;
    left: 15px;

}

.phonepas input{
    width: 100%;
    height: 40px;
    background: 0;
    border: 0;
    outline: none;
    text-indent: 4em;
    font-size: 14px;
    color:#fff;
}
.phonepas input::-webkit-input-placeholder {
    color: #fff;
}
.login_submit{
    background: #ff9fb7;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color:#fff;
    border-radius: 30px;
    outline: none;
}

到这里，雏形就差不多了，我们再来看看效果！

weishao

8.接下来，就是两个链接（找回密码和注册）。都是运用同样的属性，没有什么特别的技巧，这里就直接上代码：

    //忘记密码
    this.forgetPas = this.content.addChild();
    this.forgetPas.setSizeMode('absolute','absolute')
                                    .setAbsoluteSize(100,44)
                                    .setAlign(0.9,0)
                                    .setMountPoint(1,0)
                                    .setPosition(0,280)

    this.forgetPas.el = new DOMElement(this.forgetPas,{
        classes:['forgetPas'],
        content:'忘记密码?'
    })

    //立即注册
    this.reg = this.content.addChild();
    this.reg.setSizeMode('absolute','absolute')
            .setAbsoluteSize(200,40)
            .setPosition(0,420)
            .setAlign(0.5,0)
            .setMountPoint(0.5,0)
    this.reg.el = new DOMElement(this.reg,{
        classes:['reg'],
        content:'还没有账号？<em>立即注册</em>'
    })

9.下面是这两个链接的CSS

.forgetPas{
    font-size: 16px;
    color: #606060;
    text-align: right;
}
.reg {
    font-size: 15px;
    color: #606060;
    text-align: center;
}

.reg em{
    font-style: normal;
    color: #82bbfd;
}

再来看看运行效果，大功告成！

也许看到这里，小伙伴们会觉得代码比较繁琐，写起来会比较费劲。但是其实他们的结构大多数都是一样的，写多了也就快了。并且这些都可以作为组件，以后重复利用，越到后面就越轻松哦。