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

  • 相关阅读:
    丛铭俣 160809324 (作业5)
    丛铭俣 160809324 (作业4)
    丛铭俣 160809324 (作业3)
    丛铭俣 160809324 (作业2)
    系统设计的一些原则
    计算输入框的字符长度
    DateTime.ToLongDateString
    邮箱发送验证码
    .net core中加入日志
    .net core 将类库项目转移到一个新建的文件夹下面
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/8042411.html
Copyright © 2020-2023  润新知