【App开发笔记】2.4 编写登录页面(1)
2017-08-23 本文已影响0人
7abbcd54a89d
样板页面
样板页面
2.4.1 首先写登录的头部页面
html/user/login_head.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>app开发笔记</title>
<link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
</head>
<body>
<header class="H-header" id="header" style="background-color: #fafafa">
<div class="H-header-title H-center-all H-font-size-14 H-text-show-row-1 H-position-absolute H-width-100-percent"
style="color: #4a4a4a">登录糖水
</div>
</header>
<script src="../../script/api.js" type="text/javascript"></script>
<script type="text/javascript">
apiready = function() {
$api.fixStatusBar($api.byId('header'));
api.openFrame({
name: 'login_body',
url: './login_body.html',
rect: {
x: 0,
y: $api.byId('header').offsetHeight,
w: api.winWidth,
h: api.frameHeight - $api.byId('header').offsetHeight
}
});
};
</script>
</body>
</html>
2.4.2 再来写body页面
html/user/login_body.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>app开发笔记</title>
<link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
<style type="text/css">
button {
background: #d8d8d8;
border: 1px solid #d8d8d8;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
.btn-after {
background: #4a90e2;
border-color: #4a90e2;
}
.btn-after:active {
background: #dbe9f9;
border-color: #dbe9f9;
}
::-webkit-input-placeholder {
color:#c7c7cd;
}
:-moz-placeholder {
color:#c7c7cd;
}
::-moz-placeholder {
color:#c7c7cd;
}
:-ms-input-placeholder {
color:#c7c7cd;
}
</style>
</head>
<body>
<div class="H-horizontal-center" style="padding: 80px 0;">
<div class="H-text-align-center">
<img src="../../image/weixin.png" class="H-border-radius-12 H-margin-vertical-top-10"
style="width:70px;height:70px;">
<div class="H-font-size-14">微信登录</div>
</div>
</div>
<div class="H-text-align-center H-padding-vertical-top-25 H-font-size-10" style="color: #9b9b9b">— 已有糖水帐号登录 —</div>
<div style="padding: 20px 40px;">
<div class="H-flexbox-horizontal" style="border: 1px solid #efeff4;">
<span class="H-icon H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white">
<i class="iconfont icon-phone H-font-size-22 H-vertical-middle" style="color: #9b9b9b"></i>
</span>
<input id="phone" type="tel" maxlength="11" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-8" placeholder="手机号">
</div>
<div class="H-flexbox-horizontal H-margin-vertical-both-10" style="border: 1px solid #efeff4;">
<span class="H-icon H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white">
<i class="iconfont icon-password H-font-size-22 H-vertical-middle" style="color: #9b9b9b"></i>
</span>
<input id="password" type="password" class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-8" placeholder="密码">
</div>
<button class="H-button H-width-100-percent H-font-size-15 H-outline-none H-padding-vertical-both-8 H-theme-background-color1-click H-padding-horizontal-both-20 H-theme-font-color-white H-border-radius-5">
登录
</button>
</div>
<script src="../../script/api.js" type="text/javascript"></script>
<script type="text/javascript">
//为input添加监听 当密码输入大于6位时登录按钮变色
var password = $api.byId('password');
var btn = $api.dom('button');
$api.addEvt(password, 'input', function () {
if (password.value.length > 6) {
$api.addCls(btn, 'btn-after')
}else{
$api.removeCls(btn,'btn-after')
}
});
</script>
</body>
</html>
2.4.3 在index页面中调用login页面
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>app开发笔记</title>
<link rel="stylesheet" type="text/css" href="./css/Hui.css"/>
</head>
<body class="H-center-all H-height-100-percent">
<div class="H-font-size-24 H-theme-font-color1">hello world</div>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready=function(){
api.openWin({
name: 'login_head',
url: './html/user/login_head.html'
});
}
</script>
</body>
</html>
2.4.4 在Apicloud studio中同步代码到手机
最终页面
最终页面
