weex開發實戰(4)-實現登入功能
阿新 • • 發佈:2019-02-06
登入功能是一個app必備的功能,這一次我們使用weex來實現登入以及記住登入。
利用input的onchange事件來捕獲輸入框的值<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>
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