1. 程式人生 > >weex開發實戰(4)-實現登入功能

weex開發實戰(4)-實現登入功能

登入功能是一個app必備的功能,這一次我們使用weex來實現登入以及記住登入。

<template>

    <div class="wrapper">

        <div class="nav_bar">
            <div style="flex:1;"></div>
            <div class="nav_text">
                <text style="color:#FFFFFF;">{{title}}</text>
            </div>
            <div style="flex:1;"></div>
        </div>
        <div class="nav_line"></div>

        <div class="form">
            <div class="username f-common">
                <text class="text_user txt">使用者名稱:</text>
                <input type="text" maxlength="12" oninput="onchange" class="input"/>
            </div>
            <div class="password f-common">
                <text class="text_pass txt">密碼:</text>
                <input type="password" maxlength="20" oninput="onchange1" class="input"/>
            </div>
        </div>

        <div class="action">
            <div class="signin ac-common" onclick="showsp">
                <text class="text">註冊</text>
            </div>
            <div class="login ac-common" onclick="setsp">
                <text class="text">登入</text>
            </div>
        </div>
        <div class="hintwrapper" if="{{show}}">
            <text class="hint">{{hint}}</text>
        </div>
    </div>

</template>
利用input的onchange事件來捕獲輸入框的值
 onchange:function(event){
                    this.username = event.value;
                    this.hint = this.hint_a;
                },
 onchange1:function(event){
                    this.password = event.value;
                    this.hint = this.hint_a;
                }

至於檢查賬號密碼,可以用stream.fetch來網路校驗。

專案原始碼地址:點選開啟連結  <-----------github