美文网首页App开发笔记-模仿【糖水】
【App开发笔记】2.5 编写登录页面（2）

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

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

    源码地址

    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）

        本文链接：https://www.haomeiwen.com/subject/cbjjdxtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        App开发笔记-模仿【糖水】

        关于我们|服务条款|联系我们|【App开发笔记】2.5 编写登录页面（2）|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！