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

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

1.主页面

主页面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.登录页面

登录页面loginIn.js代码

// pages/loginIn/loginIn.js
Page({/*** 页面的初始数据*/data: {},// 登录提交表单LoginInBindSubmit: function (event) {//表单1var LoginInInputUsername=event.detail.value.LoginInInput1;//表单2var 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页面

<form bindsubmit="LoginInBindSubmit"><view class="LoginInMainView" ><h1>登 录</h1><view class="LoginInSecondView" ><image class="LoginInImg" src="../../images/logins/loginAvatar.gif"></image><input name="LoginInInput1" placeholder="账号" class="LoginInInput" /></view><view class="LoginInSecondView" ><image class="LoginInImg" src="../../images/logins/loginAvatar.gif"></image><input name="LoginInInput2"  placeholder="密码" class="LoginInInput" /></view><button class="LoginInLoginButton" form-type="submit">登录</button></view>
</form>

登录页面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);}// 数据保存到datathis.setData({saveName:saveName,saveId:saveId})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

注册页面register.wxml代码

<!--pages/register/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;
}

源码在这，天翼盘2022.7.15更新

完美-小程序登录注册功能.rar:
访问码：ttu7

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

2021-11-05 微信小程序实现登录功能
微信小程序实现登录功能(云函数的创建和调用) Page({data: {userInfo: {},},getUserProfile (e) {wx.getUserProfile({desc: '用于完 ...
微信小程序注册/登录接口开发
文章目录后端有关说明前端有关说明接口设计小程序注册/登录接口 APP 注册/登录接口 PC Web 端的注册/登录接口小程序注册/登录序列图校验 token 后端有关说明登录和注册的逻辑 ...
Springboot实现微信小程序注册登录及微信登录
运行环境 jdk1.8+eclipse+tomact 8.5+maven3.5+springboot 2.0.1 微信开发者工具数据库一张表三个字段 CREATE TABLE `user` (`u ...
微信小程序一键登录功能，使用uni-app和springboot（JWT鉴权）
目录概述微信登录接口说明关于获取微信用户的信息前端代码(uni-app) 后端代码(SpringBoot) 配置文件:application.yml 配置文件:Pom.xml 类:WeChat ...
【微信小程序】登录功能实现及讲解（获取用户唯一标识）
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 功能:登录实现并获取到用户唯一标识官方文档地址:可以先看完我的文章再看官方地址实现步骤:1.调用微 ...
如何完成微信小程序的登录功能
前言微信小程序是一个轻量级的,不用安装包,就可以打开的一个小工具,那我们就看一下,微信小程序是如何登录的开始第一步,搭建基础页面. <template><view class= ...
微信小程序用户登录功能无法使用
背景一个半年前的小程序项目了,最近一个用我项目的朋友说用户登录功能不能用了,小程序端.后端都没有报错.只有我开发时留下的,信息提示. 我第一个反应就是微信小程序在今年三月份更新的接口,wx.getU ...
Taro开发微信小程序保持登录状态(本地存储)
Taro 一.Taro官网链接 Taro是由凹凸实验室倾力打造的一个开放式跨端跨框架解决方案,支持使用React.Vue.js.Nerv等框架来开发小程序.H5.react Native等应用. ...
简单实现小程序授权登录功能
本人给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助. 在我们平时工作.学习.生活中,微信小程序已成为我们密不可分的一部分, ...

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

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

1.主页面

主页面login.js代码

主页面login.wxml代码

主页面login.wxss代码

2.登录页面

登录页面loginIn.js代码

登录页面loginIn.wxml页面

登录页面loginIn.wxss样式表

2.注册页面

注册页面register.js代码

注册页面register.wxml代码

注册页面register.wxss代码

源码在这，天翼盘2022.7.15更新

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

最新文章

热门文章