微信小程序-注册登录功能-本地数据保存-页面数据交替

￡神魔★判官ぃ 2022-12-16 15:26 188阅读 0赞

## Title:微信小程序-注册登录功能-本地数据保存-页面数据交替 ##

[完美-小程序登录注册功能.rar-- 访问码:][-_.rar--]yqa5

# 1.主页面 #

![登录界面][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng_size_16_color_FFFFFF_t_70_pic_center]

### 主页面login.js代码 ###

// pages/login/login.js
    Page({
        
    
         /**
          * 页面的初始数据
          */
         data: {
        
              nowuseinguser:'登录',//头像名称
              zhucewenben:'|注册',//
              usernews:[
                   {
        
                        name:'凌黎雄',
                        id:'123',
                        password:'123'
                   },
                   {
        
                        name:'李一全',
                        id:'456',
                        password:'456'
                   }
         
              ]
                   
              
         },
    
         // 登录页面
         onLoginClick: function (event) {
        
              var that=this;
              var loginUserNow=this.data.nowuseinguser;//获取登录昵称
              if(loginUserNow=='登录'){
        //判断是否已登录账号
                   wx.setStorageSync('LoginTranferValue', this.data.usernews);//登录传值
              wx.navigateTo({
             //跳转
                url: '../loginIn/loginIn',
              })
              }else{
        //退出登录
                   wx.showModal({
        //弹出框
                     cancelColor: 'red',//取消按钮颜色
                     confirmColor:'yellow',//确认按钮颜色
                     title:'确认退出登录',//标题
                     success:function(res){
        //获取弹出框值
                          if(res.confirm){
        //点击确认退出
                             that.setData({
        
                                  nowuseinguser:'登录',
                                  zhucewenben:'/注册'
                             });
                             wx.clearStorageSync();//退出登录时清空本地同步缓存数据，这样退出登录才会真正的退出
                             
                          }
                          if(res.cancel){
        //点击取消事件
    
                          }
                     }
                   })
              }
              
         },
         // 注册页面
         onRegsinterClick: function (event) {
        
              console.log('点击值为:'+'注册');
              var that =this;//获取对象
              var register=this.data.zhucewenben;//获取'注册'文本
              if(register='|注册'){
        
                   wx.setStorageSync('RegisteredTransfer',that.data.usernews);//传值给注册页面
                   wx.navigateTo({
        
                     url: '../register/register',
                   })
              }
              
         },
              // 我的选课
         onLoginMyCourses: function (event) {
        
    
         },
         // 我的考勤
         onLoginMyAttendance: function (event) {
        
    
         },
         // 我的活动
         onLoginMyActivity: function (event) {
        
    
         },
         // 修改密码
         onLoginModifyPassword: function (event) {
        
              wx.navigateTo({
        
                   url: '../modifypassword/modifypassword',
              })
         },
         // 小程序说明
         onLoginExplain: function (event) {
        
    
         },
    
    
    
         /**
          * 生命周期函数--监听页面加载
          */
         onLoad: function (options) {
        
              
         },
    
         /**
          * 生命周期函数--监听页面初次渲染完成
          */
         onReady: function () {
        
    
         },
    
         /**
          * 生命周期函数--监听页面显示
          */
         onShow: function (event) {
        
    
    
              // 注册返回值
              var registerReturnDatas=wx.getStorageSync('registerReturnDatas');//获得注册所以返回数据
              var registerReturName=registerReturnDatas[0];//获得昵称
              var registerReturnId=registerReturnDatas[1];//获得账号
              var registerReturnPassword=registerReturnDatas[2];//获得密码
              console.log(registerReturnDatas);
              var usernews=this.data.usernews;
              usernews.push({
        
                   name:registerReturName,
                   id:registerReturnId,
                   password:registerReturnPassword
              });
              
              console.log(usernews);
              this.setData({
        
                   usernews:usernews
              })
    
              // 登录返回值
              var LogInAndReturnToTheAccount = wx.getStorageSync('LogInAndReturnToTheAccount');//
              console.log(LogInAndReturnToTheAccount);
              this.setData({
        
                   nowuseinguser:LogInAndReturnToTheAccount,
                   zhucewenben:''
              });
    
    
              // 判定登录用户是否为空，为空则重置文本'登录'和'|注册'
              var nickName=this.data.nowuseinguser;//获取当前昵称
              var that=this;
              // 假如昵称等于空，重新赋值
              if(nickName==''||nickName==null){
        
                   that.setData({
        
                        nowuseinguser:'登录',
                        zhucewenben:'|注册'
    
                   })
              }
              
         },
    
    })

### 主页面login.wxml代码 ###

<view id="loginMainView">
         <image id="loginAvatar" src="../../images/logins/loginAvatar.gif"  class="loginLogin">
         </image>
         <text name="logintext1" class="textlogin" bindtap="onLoginClick">{
        {
        nowuseinguser}}</text>
         <text name="logintext2" class="textlogin" bindtap="onRegsinterClick">{
        {
        zhucewenben}}</text>
    </view>
    <view id="loginSecondView">
         <image mode="widthFix" class="onLoginMyCourses" class="loginIamge" src="../../images/logins/loginMenu1.png">
         </image>
         <image mode="widthFix" bindtap="onLoginMyAttendance" class="loginIamge" src="../../images/logins/loginMenu2.png">
         </image>
         <image mode="widthFix" bindtap="onLoginMyActivity" class="loginIamge" src="../../images/logins/loginMenu3.png">
         </image>
         <image mode="widthFix" bindtap="onLoginModifyPassword" class="loginIamge" src="../../images/logins/loginMenu4.png">
         </image>
         <image mode="widthFix" bindtap="onLoginExplain" class="loginIamge" src="../../images/logins/loginMenu5.png">
         </image>
    </view>

### 主页面login.wxss代码 ###

/* 登录图标 */
    #loginAvatar{
        
         width: 70rpx;
         height: 70rpx;
         white-space: wrap;
    }
    /* 登录view */
    #loginMainView{
        
         margin-top: 20rpx;
         display: flex;
         width: 100%;
         height: 100%;
         display: flex;
         align-items: center;
         justify-content: center;
    }
    /*  */
    #loginSecondView{
        
         margin-top: 30rpx;
         display: flex;
         width: 100%;
         height: 500rpx;
         flex-direction: column;
         align-items: center;
         justify-content: center;
    }
    .loginIamge{
        
         margin-top: 40rpx;
    }

# 2.登录页面 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng_size_16_color_FFFFFF_t_70_pic_center 1]

### 登录页面loginIn.js代码 ###

// pages/loginIn/loginIn.js
    Page({
        
    
        /**
         * 页面的初始数据
         */
        data: {
        
    
        },
        // 登录提交表单
        LoginInBindSubmit: function (event) {
        
            //表单1
            var LoginInInputUsername=event.detail.value.LoginInInput1;
            //表单2
            var LoginInInputPassword=event.detail.value.LoginInInput2;
            //得到本地数据集合
            var LoginTranferValue= wx.getStorageSync('LoginTranferValue');
            // 判断登录
            for(var i=0;i<LoginTranferValue.length;i++){
        
                var LoginInName=LoginTranferValue[i].name;//昵称
                if(LoginInInputUsername==LoginTranferValue[i].id&&LoginInInputPassword==LoginTranferValue[i].password){
        
                   
                    // 返回账号前清空本地缓存数据
                    wx.clearStorageSync();
                     // 登录成功返回账号昵称
                    wx.setStorageSync('LogInAndReturnToTheAccount', LoginTranferValue[i].name);
                    wx.navigateBack({
        
                      delta: 1,
                    })
                }
            }
        },
        onLoad: function (options) {
        
            console.log('登录界面加载');
            
            
        },
    
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
        
            console.log('登录界面渲染');
        },
    
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
        
            console.log('登录界面显示');
        },
    
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
        
            console.log('登录界面隐藏');
        },
    
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
        
    
        },
    
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
        
    
        },
    
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
        
    
        },
    
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function () {
        
    
        }
    })

### 登录页面loginIn.wxml页面 ###

### 登录页面loginIn.wxss样式表 ###

/* pages/loginIn/loginIn.wxss */
    /* 主view */
    .LoginInMainView{
        
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 200rpx;
    }
    /* 内viwe */
    .LoginInSecondView{
        
        border: 2rpx solid black;
        display: flex;
        flex-direction: row;
        margin-top: 60rpx;
    }
    /* 图标 */
    .LoginInImg{
        
        width: 40rpx;
        height: 40rpx;
    }
    .LoginInLoginButton{
        
        margin-top: 50rpx;
    }

# 2.注册页面 #

### 注册页面register.js代码 ###

Page({
        
         /**
          * 页面的初始数据
          */
         data: {
        
              userinput1: '',
              userinput2: '',
              pwinput1: '',
              pwinput2: '',
              placeholder1: '昵称',
              placeholder2: '账号',
              placeholder3: '密码',
              placeholder4: '重复密码',
              ErrorMessage1: '',
              ErrorMessage2: '',
              ErrorMessage3: '',
              ErrorMessage4: '',
              saveName:[],
              saveId:[],
    
         },
         // 提交表单
         onRegisterFormClick: function (event) {
        
              // 获取表单
              var inputName=event.detail.value.registerInput0+"";
              var inputId=event.detail.value.registerInput1+"";
              var inputPassword=event.detail.value.registerInput2+"";
              var inputRepassword=event.detail.value.registerInput3+"";
              // 拿来返回数据
              var registerReturnDatas=[inputName,inputId,inputPassword];
              // 获取本地账号和昵称
              var saveName=this.data.saveName;
              var saveId=this.data.saveId;
              // 数组赋值另一个数组
              var saveName2=new Array;
              var saveId2=new Array;
              for(var i=0;i<saveName.length;i++){
        
                   saveName2.push(saveName[i]);
                   saveId2.push(saveId[i]);
              }
              console.log(saveName2);
              console.log(saveId2);
              // 循环
              var i=0;
              do{
        
                   if((inputName!=''&inputId!=''&inputPassword!=''&inputRepassword!='')&&(inputPassword==inputRepassword)&&(inputName!=saveName2[i]&inputId!=saveId2[i])){
        
                        console.log(inputId[i]);
                        console.log('scueess');
                        // 返回数据
                        wx.setStorageSync('registerReturnDatas', registerReturnDatas);
                        wx.navigateBack({
        
                             delta: 1,
                        })
                   }
                   i++;
              }while(i<saveName2.length-1);
              
         },
         /**
          * 生命周期函数--监听页面加载
          */
         onLoad: function (options) {
        
              // 初始化数据-获取已有账号
              var that=this;
              var getSomeAccounts= wx.getStorageSync('RegisteredTransfer');
              // 定义数组
              var saveName=[];
              var saveId=[];
              // 把数据整合成数组
              for(var i=0;i<getSomeAccounts.length;i++){
        
                   saveName.push(getSomeAccounts[i].name);
                   saveId.push(getSomeAccounts[i].id);
              }
              // 数据保存到data
              this.setData({
        
                   saveName:saveName,
                   saveId:saveId
              })
         },
    
         /**
          * 生命周期函数--监听页面初次渲染完成
          */
         onReady: function () {
        
    
         },
    
         /**
          * 生命周期函数--监听页面显示
          */
         onShow: function () {
        
    
         },
    
         /**
          * 生命周期函数--监听页面隐藏
          */
         onHide: function () {
        
    
         },
    
         /**
          * 生命周期函数--监听页面卸载
          */
         onUnload: function () {
        
    
         },
    
         /**
          * 页面相关事件处理函数--监听用户下拉动作
          */
         onPullDownRefresh: function () {
        
    
         },
    
         /**
          * 页面上拉触底事件的处理函数
          */
         onReachBottom: function () {
        
    
         },
    
         /**
          * 用户点击右上角分享
          */
         onShareAppMessage: function () {
        
    
         }
    })

### 注册页面register.wxml代码 ###

<form bindsubmit="onRegisterFormClick">
    <view class="registerMainView">
        
        <view class="registerSecondView">
            <image class="registerimg" src="../../images/logins/loginAvatar.gif"></image>
            <input name="registerInput0" value="{
        {userinput1}}" placeholder="{
        {placeholder1}}" />
        </view>
        <text class="textErrorMessage">{
        {
        ErrorMessage1}}</text>
    
        <view class="registerSecondView">
            <image class="registerimg" src="../../images/logins/loginAvatar.gif"></image>
            <input name="registerInput1" value="{
        {userinput2}}" placeholder="{
        {placeholder2}}" />
        </view>
        <text class="textErrorMessage">{
        {
        ErrorMessage2}}</text>
    
        <view class="registerSecondView">
            <image class="registerimg" src="../../images/logins/loginAvatar.gif"></image>
            <input name="registerInput2" value="{
        {pwinput1}}" placeholder="{
        {placeholder3}}" />
        </view>
        <text class="textErrorMessage">{
        {
        ErrorMessage3}}</text>
        
        <view class="registerSecondView">
            <image class="registerimg" src="../../images/logins/loginAvatar.gif"></image>
            <input name="registerInput3" value="{
        {pwinput2}}" placeholder="{
        {placeholder4}}" />
        </view>
        <text class="textErrorMessage">{
        {
        ErrorMessage4}}</text>
    
        <view class="RegisterBindSubmitButton">
            <button type="primary" form-type="submit">注册</button>
        </view>
    </view>
    </form>

### 注册页面register.wxss代码 ###

/* pages/register/register.wxss */
    /* 主view */
    .registerMainView{
        
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-top: 40rpx;
    }
    /* 内view */
    .registerSecondView{
        
        border: 2rpx solid black;
        margin-top: 40rpx;
    }
    /* 图标 */
    .registerimg{
        
        width: 40rpx;
        height: 40rpx;
        float: left;
    }
    /* 注册按钮 */
    .RegisterBindSubmitButton{
        
        margin-top: 50rpx;
    }
    .textErrorMessage{
        
        font-size: 20rpx;
        color: red;
        height: 20rpx;
    }

### 源码在这，天翼盘 ###

[完美-小程序登录注册功能.rar-- 访问码:][-_.rar--]yqa5

[-_.rar--]: https://cloud.189.cn/t/ZraQzieEvyaa
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/ad94d0aa521e41eeac22523d90c528d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0MzY3Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/4efa4540075a4b0f8e37186615b20930.png