【App開發(fā)筆記】2.5 編寫登錄頁面（2）

源碼地址

2.5.1 先省略微信授權(quán)登錄模塊(放到后臺(tái)時(shí)候做)屯远，直接做微信授權(quán)登錄之后的頁面

js/common.js
先封裝一些apicloud的接口蜓肆，具體接口文檔請(qǐng)參照API對(duì)象

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">
        <!--知識(shí)點(diǎn)：加入tapmode=""解決移動(dòng)端點(diǎn)擊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添加我們所需圖標(biāo)

添加圖標(biāo)

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開發(fā)筆記</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">帳號(hào)安全認(rèn)證
    </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開發(fā)筆記</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">綁定手機(jī)能保證你的帳號(hào)安全</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="手機(jī)號(hào)">
    </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="短信驗(yàn)證碼">
        <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">獲取驗(yàn)證碼</div>
    </div>
    <div class="H-text-align-center H-padding-vertical-both-20">
        <div style="color: #bcbcbc" class="H-font-size-12">點(diǎn)擊“立即綁定”即表示你同意并愿意遵守糖水</div>
        <div tapmode="" onclick="OpenWin('agreement_head','./agreement_head.html')" style="color: #629fe5" class="H-font-size-12">用戶協(xié)議</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開發(fā)筆記</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">帳號(hào)安全認(rèn)證
    </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開發(fā)筆記</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">設(shè)置密碼后,你可以通過手機(jī)號(hào)和密碼登錄糖水</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="請(qǐng)輸入密碼(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開發(fā)筆記</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">用戶協(xié)議
    </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開發(fā)筆記</title>
    <link rel="stylesheet" type="text/css" href="../../css/Hui.css"/>
</head>
<body>
用戶協(xié)議
</body>
</html>

2.5.3 同步到手機(jī)

phone

password

agreement

最后編輯于：2017.12.10 03:27:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末涧窒，一起剝皮案震驚了整個(gè)濱河市瞧捌，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌垮兑，老刑警劉巖，帶你破解...
沈念sama閱讀 217,185評(píng)論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件待逞，死亡現(xiàn)場(chǎng)離奇詭異甥角，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)识樱，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,652評(píng)論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來震束，“玉大人怜庸，你說我怎么就攤上這事」复澹” “怎么了割疾？”我有些...
開封第一講書人閱讀 163,524評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)嘉栓。經(jīng)常有香客問我宏榕，道長(zhǎng)拓诸，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,339評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任麻昼，我火速辦了婚禮奠支，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘抚芦。我一直安慰自己倍谜，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,387評(píng)論 6贊 391
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布叉抡。她就那樣靜靜地躺著尔崔，像睡著了一般。火紅的嫁衣襯著肌膚如雪褥民。梳的紋絲不亂的頭發(fā)上季春，一...
開封第一講書人閱讀 51,287評(píng)論 1贊 301
城市分裂傳說
那天，我揣著相機(jī)與錄音消返，去河邊找鬼鹤盒。笑死，一個(gè)胖子當(dāng)著我的面吹牛侦副，可吹牛的內(nèi)容都是我干的侦锯。我是一名探鬼主播，決...
沈念sama閱讀 40,130評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼秦驯，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼尺碰！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起译隘，我...
開封第一講書人閱讀 38,985評(píng)論 0贊 275
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤亲桥，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后固耘，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體题篷，經(jīng)...
沈念sama閱讀 45,420評(píng)論 1贊 313
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,617評(píng)論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年厅目，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了番枚。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,779評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡损敷，死狀恐怖葫笼，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情拗馒，我是刑警寧澤路星，帶...
沈念sama閱讀 35,477評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站诱桂，受9級(jí)特大地震影響洋丐，放射性物質(zhì)發(fā)生泄漏呈昔。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,088評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一友绝、第九天我趴在偏房一處隱蔽的房頂上張望堤尾。院中可真熱鬧，春花似錦九榔、人聲如沸哀峻。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,716評(píng)論 0贊 22
一樁弒父案哲泊，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽剩蟀。三九已至，卻和暖如春切威，著一層夾襖步出監(jiān)牢的瞬間育特，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,857評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工先朦，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留缰冤，地道東北人。一個(gè)月前我還...
沈念sama閱讀 47,876評(píng)論 2贊 370
代替公主和親
正文我出身青樓喳魏，卻偏偏與公主長(zhǎng)得像棉浸，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子刺彩，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,700評(píng)論 2贊 354

【App開發(fā)筆記】2.5 編寫登錄頁面（2）

2.5.1 先省略微信授權(quán)登錄模塊(放到后臺(tái)時(shí)候做)屯远，直接做微信授權(quán)登錄之后的頁面

2.5.2 去iconfont添加我們所需圖標(biāo)

2.5.3 同步到手機(jī)

推薦閱讀更多精彩內(nèi)容