1、apiclou實現頁面的登錄方式,不適用自帶的登錄。
html代碼
<div class="login_ipt_box"> <img class="login_pic_ipt" src="../../image/userName.png" /> <input class="ipt_login" name="userName" value="" id="userName" placeholder="請輸入賬戶名"/> </div> <div class="login_ipt_box"> <img class="login_pic_ipt" src="../../image/password.png" /> <input class="ipt_login" name="userPassword" type="password" value="" placeholder="請輸入密碼" id="password"/> </div> <input type="button" class="btn_login" onclick="loginIn()" value="登錄" />
js方面
function loginIn(){ var userName = $api.val($api.byId('userName')), password = $api.val($api.byId('password')); if (!$api.trim(userName)) { api.toast({ msg: '請輸入賬號', duration: 1000, location: 'middle' }); return; } if (!$api.trim(password)) { api.toast({ msg: '請輸入密碼', duration: 1000, location: 'middle' }); return; } /*** 加載動畫 ***/ api.showProgress({ title : ' ', text : '玩命加載中...', modal : true }); api.ajax({ url: 'https://api.yazhuaa/?serAdmin.Login&username='+ userName +'&password='+ password, timeout: 10, dataType: 'json', method: 'post' }, function(ret, err) { api.hideProgress(); if(ret.data.result == false){ api.toast({ msg: '登錄失敗', duration: 1000, location: 'middle' }); }else{ if (ret.data.result.user_name) $api.setStorage('userName', ret.data.result.user_name); if (ret.data.result.id) $api.setStorage('id', ret.data.result.id); if (ret.data.result.member_id) $api.setStorage('member_id', ret.data.result.member_id); if (ret.data.sessionid) $api.setStorage('PHPSESSID', ret.data.sessionid); api.toast({ msg:'登錄成功', duration: '1200', localtion: 'middle' }); $api.setStorage('isLogin', true); // api.sendEvent({ // name: 'UserHasLogin' // }); setTimeout(function() { api.openWin({ name: 'index', url: '../../index.html', bounces: false, animation:{ type: "push", duration:300 } }); }, 1000); } /*** 登錄異常 ***/ if (err) { api.toast({ msg:'網絡異常,請稍后重試', duration: '1300', localtion: 'middle' }); return; } }); }
2、廣播事件的傳播,有時候登錄不止登錄就結束了,登錄之后還有一些相應的改變,例如顯示什么隱藏什么這些的。
在登錄界面登錄成功后,廣播登錄成功事件並設置登錄狀態。登錄成功后需要執行相關命令的界面(如移除登錄相關按鈕、顯示登錄用戶可見內容、獲取當前登錄用戶資料)需設置登錄監聽,以便登錄成功后作出反饋。
//登錄界面 //api.sendEvent廣播登錄成功事件 api.sendEvent({ name: 'loginSuccess' }); //api.setPrefs設置登錄成功狀態 api.setPrefs({ key: 'loginStatus', value: 'loginSuccess' }); //修改界面 //api.addEventListener監聽登錄成功事件(需執行才可生效) api.addEventListener({ name: 'loginSuccess' }, function(ret, err){ if( ret ){ //執行登錄成功相關指令 } });
判斷登錄狀態
判斷登錄狀態可用於決定是否打開登錄界面。
//api.getPrefs獲取當前登錄狀態 api.getPrefs({ key: 'loginStatus' }, function(ret, err) { //當偏好設置尚未設置或者曾設置后被移除后,返回值(ret.value)均為空。 var val = ret.value; if (val && val != "") { //已登錄 } else { //未登錄 } });
登出
在登出界面登出成功后,廣播登出成功事件並移除登錄狀態。登出成功后需要執行相關命令的界面(如顯示登錄相關按鈕、移除登錄用戶可見內容、清空登出用戶數據及緩存)需設置登出監聽,以便登出成功后作出反饋。
//登出界面 //api.sendEvent廣播登出成功事件 api.sendEvent({ name: 'logoutSuccess' }); //api.removePrefs移除登錄狀態 api.removePrefs({ key: 'loginStatus' }); //修改界面 //api.addEventListener監聽登出成功事件(需執行才可生效) api.addEventListener({ name: 'logoutSuccess' }, function(ret, err){ if( ret ){ //執行登出成功相關指令 } });
目前一般app的邏輯為,手機號加驗證碼登錄或者微信登錄,這種情況下狀態就比較麻煩。注意不要用 storage 判斷是否登錄或者登錄之后干什么。因為登錄是在特定的頁面所需要登錄的,這樣以前的頁面是不刷新的,狀態無法改變。所以:addEventListener 和 getPrefs 同時使用這兩個以確保一定正確。 同時,退出的時候也要將這兩個時間分發出去,並且監聽推出事件以改變某些狀態.蘋果審核的時候 如果沒有安裝微信,就要判斷吧微信登錄去掉要不然不會通過