微信小程序开发，登录注册实现
文章目录
-
- 1. 官方文档教程
- 2. 注册实现
- 3. 登录实现
- 4. 关于作者其它项目视频教程介绍
1. 官方文档教程
- https://developers.weixin.qq.com/miniprogram/dev/framework/
- 路由跳转的几种方式： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
- Toast弹框提示：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
- 数据缓存：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html
2. 注册实现
- 编写注册布局文件
register.wxml
<view class="login-container">
<navigation-bar title="" back="{{true}}" color="white" class="navigation-bar" />
<view class="logo-container">
<image class="logo" src="../../assets/img_login_bg.jpg" mode="" />
view>
<view class="login-parent-container">
<text class="login-title-tips">注册text>
<view class="login-username-container">
<image src="../../assets/img_username.png" mode="" />
<input placeholder="请输入用户名" bindinput="eventUsernameHandle" />
view>
<view class="login-password-container">
<image src="../../assets/img_password.png" mode="" />
<input placeholder="请输入密码" password="true" bindinput="eventPasswordHandle" />
view>
<view class="login-btn-container"> <button bind:tap="onRegisterHandle">注册button>view>
view>
view>
- 编写注册样式文件
register.wxss，跟后面的登录样式差不多
/* pages/register/register.wxss */
.login-container {
display: flex;
height: 100vh;
flex-direction: column;
position: relative;
}
.navigation-bar{
position: absolute;
z-index: 2000;
}
.logo-container {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
position: absolute;
}
.logo {
width: 100%;
height: 100vh;
}
.login-parent-container {
display: flex;
flex-direction: column;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
margin-top: 600rpx;
padding: 40rpx;
z-index: 1000;
}
.login-title-tips {
display: flex;
width: 100%;
justify-content: center;
font-weight: 800;
font-size: 40rpx;
line-height: 100rpx;
color: #ffffff;
}
.login-username-container {
display: flex;
flex-direction: row;
height: 90rpx;
align-items: center;
padding-left: 20rpx;
padding-right: 20rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
margin-top: 20rpx;
}
.login-username-container image {
width: 40rpx;
height: 40rpx;
}
.login-username-container input {
width: calc(100% - 60rpx);
margin-left: 20rpx;
}
.login-password-container {
display: flex;
flex-direction: row;
height: 90rpx;
align-items: center;
padding-left: 20rpx;
padding-right: 20rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
margin-top: 20rpx;
}
.login-password-container image {
width: 40rpx;
height: 40rpx;
}
.login-password-container input {
width: calc(100% - 60rpx);
margin-left: 20rpx;
}
.forget-pwd-container {
margin-top: 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.login-btn-container {
margin-top: 50rpx;
display: flex;
}
.login-btn-container button {
width: 100%;
line-height: 70rpx;
background-color: #f62b7c;
color: #ffffff;
}
- 具体注册逻辑实现
register.js
// pages/register/register.js
Page({
/**
* 页面的初始数据
*/
data: {
username: '',
password: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
eventUsernameHandle(options){
this.setData({
username: options.detail.value
})
},
eventPasswordHandle(options){
this.setData({
password: options.detail.value
})
},
onRegisterHandle(){
if(this.data.username==='' || this.data.password ===''){
wx.showToast({
title: '注册信息不能为空',
icon :'error'
})
return
}
let users =wx.getStorageSync('users') ||[]
if(users.some(item => item.username === this.data.username)){
wx.showToast({
title: '用户名已存在',
icon: 'error'
})
return
}
let user ={
username: this.data.username,
password: this.data.password
}
users.push(user)
wx.setStorageSync("users",users)
wx.showToast({
title: '注册成功',
icon :'success'
})
setTimeout(() => {
wx.navigateBack()
},500)
}
})
- 效果图
3. 登录实现
- 编写登录样式文件
login.wxml
<view class="login-container">
<view class="logo-container">
<image class="logo" src="../../assets/img_login_bg.jpg" mode="" />
view>
<view class="login-parent-container">
<text class="login-title-tips">登录text>
<view class="login-username-container">
<image src="../../assets/img_username.png" mode="" />
<input placeholder="请输入用户名" bindinput="eventUsernameHandle" value="{{username}}" />
view>
<view class="login-password-container">
<image src="../../assets/img_password.png" mode="" />
<input placeholder="请输入密码" password="true" bindinput="eventPasswordHandle" value="{{password}}" />
view>
<view class="forget-pwd-container">
<view class="forget-pwd-left-container">
<switch type="checkbox" checked="{{isLogin}}" bindchange="checkboxChange" />
<text>记住密码text>
view>
<view class="forget-pwd-right-container" bind:tap="onRegisterHandle">
<text class="tips">还没有账号？text>
<text class="register-text">注册text>
view>
view>
<view class="login-btn-container"> <button bind:tap="onLoginHandle">登录button>view>
view>
view>
- 编写登录样式文件
login.wxss
/* pages/login/login.wxss */
.login-container {
display: flex;
height: 100vh;
flex-direction: column;
position: relative;
}
.logo-container {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
position: absolute;
}
.logo {
width: 100%;
height: 100vh;
}
.login-parent-container {
display: flex;
flex-direction: column;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
border-top-left-radius: 40rpx;
border-top-right-radius: 40rpx;
margin-top: 600rpx;
padding: 40rpx;
z-index: 1000;
}
.login-title-tips {
display: flex;
width: 100%;
justify-content: center;
font-weight: 800;
font-size: 40rpx;
line-height: 100rpx;
color: #ffffff;
}
.login-username-container {
display: flex;
flex-direction: row;
height: 90rpx;
align-items: center;
padding-left: 20rpx;
padding-right: 20rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
margin-top: 20rpx;
}
.login-username-container image {
width: 40rpx;
height: 40rpx;
}
.login-username-container input {
width: calc(100% - 60rpx);
margin-left: 20rpx;
}
.login-password-container {
display: flex;
flex-direction: row;
height: 90rpx;
align-items: center;
padding-left: 20rpx;
padding-right: 20rpx;
background-color: #f5f5f5;
border-radius: 10rpx;
margin-top: 20rpx;
}
.login-password-container image {
width: 40rpx;
height: 40rpx;
}
.login-password-container input {
width: calc(100% - 60rpx);
margin-left: 20rpx;
}
.forget-pwd-container {
margin-top: 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.forget-pwd-container .forget-pwd-left-container {
display: flex;
flex-direction: row;
align-items: center;
color: #ffffff;
}
.forget-pwd-container .forget-pwd-right-container {
display: flex;
flex-direction: row;
}
.forget-pwd-right-container .tips {
font-size: 22rpx;
color: #ffffff;
}
.forget-pwd-right-container .register-text {
font-size: 22rpx;
color: #ffb241;
}
.login-btn-container {
margin-top: 50rpx;
display: flex;
}
.login-btn-container button {
width: 100%;
line-height: 70rpx;
background-color: #f62b7c;
color: #ffffff;
}
- 具体注册逻辑实现
login.js
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
username: '',
password: '',
isLogin: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
isLogin: wx.getStorageSync('isLogin') || false
})
if (this.data.isLogin){
let user = wx.getStorageSync("user")
this.setData({
username: user.username,
password: user.password
})
}
},
eventUsernameHandle(options) {
this.setData({
username: options.detail.value
})
},
eventPasswordHandle(options) {
this.setData({
password: options.detail.value
})
},
/**
* 是否记住密码
*/
checkboxChange(options) {
this.setData({
isLogin:options.detail.value
})
//保存
wx.setStorageSync("isLogin",this.data.isLogin)
},
/**
* 登录
*/
onLoginHandle(options){
if(this.data.username==='' || this.data.password ===''){
wx.showToast({
title: '登录信息不能为空',
icon :'error'
})
return
}
let users =wx.getStorageSync('users') || []
if(users.some(item => item.username === this.data.username && item.password === this.data.password)){
wx.showToast({
title: '登录成功',
icon: 'success'
})
let user ={
username: this.data.username,
password: this.data.password
}
//保存当前用户登录信息
wx.setStorageSync("user",user)
setTimeout(()=>{
wx.switchTab({
url: '/pages/index/index',
})
},500)
}else {
wx.showToast({
title: '用户名或密码错误',
icon: 'error'
})
}
},
onRegisterHandle() {
wx.navigateTo({
url: '/pages/register/register',
})
},
})
- 效果图
4. 关于作者其它项目视频教程介绍
本人在b站录制的一些视频教程项目，免费供大家学习
- Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
- Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
- Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
- Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
- Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8