【App开发笔记】2.5 编写登录页面（2）

作者: 7abbcd54a89d | 来源:发表于2017-08-24 22:36 被阅读0次

【App开发笔记】2.5 编写登录页面（2）
【App开发笔记】2.4 编写登录页面(1)
Django在线教育网站开发（十七）用户登录-1
Vue2.0去哪网实战笔记
Flutter 开发一个常见的登录界面
vue中利用路由meta控制页面是否需要登录
VUE--ElementUI--后端界面--登录(一)
iOS开发——登录页面动画、转场动画
Flutter 使用MMKV踩坑(iOS release打包出现
22 项目实战：详情页面和登录功能开发（三）

源码地址

2.5.1 先省略微信授权登录模块(放到后台时候做)，直接做微信授权登录之后的页面

js/common.js
先封装一些apicloud的接口，具体接口文档请参照API对象

function OpenWin(win_name,win_url,win_pageparam) {
    api.openWin({
        name: win_name,
        url: win_url,
        pageParam:win_pageparam,
        vScrollBarEnabled:false,
        hScrollBarEnabled:false,
        animation:{
            type:"push",
            subType:"from_right",
            duration:300
        },
        softInputBarEnabled:false
    });
}
function CloseWin() {
    api.closeWin({
        animation:{
            type:"push",
            subType:"from_left",
            duration:300
        },
    });
}
function CloseToWin(win_name) {
    api.closeToWin({
        name: name,
        animation:{
            type:"push",
            subType:"from_left",
            duration:300
        },
    });
}

html/user/login_body.html
修改之前写的一部分代码

<div class="H-horizontal-center" style="padding: 80px 0;">
    <div class="H-text-align-center">
        <!--知识点：加入tapmode=""解决移动端点击300ms延迟的问题-->
      <img  onclick="OpenWin('phone_head','./phone_head.html')" tapmode="" 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>
 <!--引入封装之后的js-->
<script src="../../script/common.js" type="text/javascript"></script>

2.5.2 去iconfont添加我们所需图标

添加图标

css/style.css

.icon-arrow-left{
    color: #929292
}
.icon-arrow-left:active{
    color: #e8e8e8;
}

html/user/phone_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"/>
    <link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<body>
<header class="H-header" id="header" style="background-color: #232427">
    <span onclick="CloseWin()" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-padding-horizontal-left-5 H-z-index-100">
        <i class="iconfont icon-arrow-left H-font-size-20 H-vertical-middle"></i>
    </span>
    <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: #e7e7e8">帐号安全认证
    </div>
</header>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">
    apiready = function () {
        $api.fixStatusBar($api.byId('header'));
        api.openFrame({
            name: 'phone_body',
            url: './phone_body.html',
            rect: {
                x: 0,
                y: $api.byId('header').offsetHeight,
                w: api.winWidth,
                h: api.frameHeight - $api.byId('header').offsetHeight
            }
        });
    };
</script>
</body>
</html>

html/user/phone_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: #e7511a;
            border: 1px solid #e7511a;
        }
        button:active {
            background: #f6d8cd;
            border-color: #f6d8cd;
        }
        ::-webkit-input-placeholder {
            color:#c7c7cd;
        }
        :-moz-placeholder {
            color:#c7c7cd;
        }
        ::-moz-placeholder {
            color:#c7c7cd;
        }
        :-ms-input-placeholder {
            color:#c7c7cd;
        }
    </style>
</head>
<body>
<div class="H-text-align-center H-padding-vertical-both-25 H-font-size-14" style="color: #4a4a4a">绑定手机能保证你的帐号安全</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-both-20 H-font-size-14 H-theme-background-color-white" style="color: #aaaaaa;border-right: 1px solid #efeff4">
            +86
        </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;">
        <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 class="H-vertical-middle H-padding-horizontal-both-15 H-theme-background-color-white H-theme-font-color-333 H-font-size-12" style="border-left: 1px solid #efeff4">获取验证码</div>
    </div>
    <div class="H-text-align-center H-padding-vertical-both-20">
        <div style="color: #bcbcbc" class="H-font-size-12">点击“立即绑定”即表示你同意并愿意遵守糖水</div>
        <div tapmode="" onclick="OpenWin('agreement_head','./agreement_head.html')" style="color: #629fe5" class="H-font-size-12">用户协议</div>
    </div>
    <button tapmode="" onclick="OpenWin('password_head','./password_head.html')" class="H-button H-width-100-percent H-font-size-15 H-outline-none H-padding-vertical-both-8 H-padding-horizontal-both-20 H-theme-font-color-white">
        立即绑定
    </button>
</div>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
</body>
</html>

html/user/password_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"/>
    <link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<body>
<header class="H-header" id="header" style="background-color: #232427">
    <span onclick="CloseWin()" tapmode="" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-padding-horizontal-left-5 H-z-index-100">
        <i class="iconfont icon-arrow-left H-font-size-20 H-vertical-middle"></i>
    </span>
    <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: #e7e7e8">帐号安全认证
    </div>
</header>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">
    apiready = function () {
        $api.fixStatusBar($api.byId('header'));
        api.openFrame({
            name: 'password_body',
            url: './password_body.html',
            rect: {
                x: 0,
                y: $api.byId('header').offsetHeight,
                w: api.winWidth,
                h: api.frameHeight - $api.byId('header').offsetHeight
            }
        });
    };
</script>
</body>
</html>

html/user/password_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: #e7511a;
            border: 1px solid #e7511a;
        }
        button:active {
            background: #f6d8cd;
            border-color: #f6d8cd;
        }
        ::-webkit-input-placeholder {
            color:#c7c7cd;
        }
        :-moz-placeholder {
            color:#c7c7cd;
        }
        ::-moz-placeholder {
            color:#c7c7cd;
        }
        :-ms-input-placeholder {
            color:#c7c7cd;
        }
    </style>
</head>
<body>
<div class="H-text-align-center H-padding-vertical-both-25 H-font-size-14" style="color: #4a4a4a">设置密码后,你可以通过手机号和密码登录糖水</div>
<div style="padding: 20px 40px;">
    <div class="H-flexbox-horizontal" style="border: 1px solid #efeff4;">
        <input id="password" type="password" 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="请输入密码(6-20位字符)">
    </div>
    <button tapmode="" onclick="OpenWin('add_friends_head','./add_friends_head.html')" class="H-button H-margin-vertical-top-20 H-width-100-percent H-font-size-15 H-outline-none H-padding-vertical-both-8 H-padding-horizontal-both-20 H-theme-font-color-white">
        完成
    </button>
</div>
<script src="../../script/api.js" type="text/javascript"></script>
<script src="../../script/common.js" type="text/javascript"></script>
</body>
</html>

html/user/agreement_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"/>
    <link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
</head>
<body>
<header class="H-header" id="header" style="background-color: #fafafa">
     <span onclick="CloseWin()" tapmode="" class="H-icon H-position-relative H-display-inline-block H-float-left H-vertical-middle H-padding-horizontal-left-5 H-z-index-100">
        <i class="iconfont icon-arrow-left H-font-size-20 H-vertical-middle"></i>
    </span>
    <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 src="../../script/common.js" type="text/javascript"></script>
<script type="text/javascript">
    apiready = function() {
        $api.fixStatusBar($api.byId('header'));
        api.openFrame({
            name: 'agreement_body',
            url: './agreement_body.html',
            rect: {
                x: 0,
                y: $api.byId('header').offsetHeight,
                w: api.winWidth,
                h: api.frameHeight - $api.byId('header').offsetHeight
            }
        });
    };
</script>
</body>
</html>

html/user/agreement_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"/>
</head>
<body>
用户协议
</body>
</html>

2.5.3 同步到手机

phone

password

agreement

【App开发笔记】2.5 编写登录页面（2）
源码地址 2.5.1 先省略微信授权登录模块(放到后台时候做)，直接做微信授权登录之后的页面 js/common....
【App开发笔记】2.4 编写登录页面(1)
源码地址样板页面 2.4.1 首先写登录的头部页面 html/user/login_head.html 2...
Django在线教育网站开发（十七）用户登录-1
1：导入相关的函数 2：编写响应逻辑 3：编写前端登录页面显示报错信息： 4：编写首页前端页面，对登录状态的判断
Vue2.0去哪网实战笔记
慕课网Vue2.5开发去哪儿网App 从零基础入门到实战项目【学习笔记】笔记使用幕布编写，可以查看【思维导图】点击访问
Flutter 开发一个常见的登录界面
登录页面在 App 开发中非常常见，本篇借登录页面的开发介绍了文本框 TextField组件的使用，同时使用文本框...
vue中利用路由meta控制页面是否需要登录
之前开发app的时候，经常会遇到有的页面需要登录之后才能进去，有的页面则不需要登录，我之前都是在需要登录的页面的c...
VUE--ElementUI--后端界面--登录(一)
一、页面编写编写登录页面src 目录下新建目录 views编写 views/admin/Login.vue 添加...
iOS开发——登录页面动画、转场动画
iOS开发——登录页面动画、转场动画 iOS开发——登录页面动画、转场动画
Flutter 使用MMKV踩坑(iOS release打包出现
由于工程是Flutter+原生混合开发，并且进入APP的第一个页面(登录页面)就是Flutter页面 MMKV官方...
22 项目实战：详情页面和登录功能开发（三）
登陆页面布局这节，我们来做登录页面的布局1.先写登录页面的路由 2.Login组件布局 3.编写布局样式我们注...