阅读背景:

关于APIcloud中的登录与注册的简单实现

来源:互联网 

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 同时使用这两个以确保一定正确。 同时,退出的时候也要将这两个时间分发出去,并且监听推出事件以改变某些状态.苹果审核的时候 如果没有安装微信,就要判断吧微信登录去掉要不然不会通过


分享到: