微信小程序实现登录注册

1. 官方文档教程

1. https://developers.weixin.qq.com/miniprogram/dev/framework/
2. 路由跳转的几种方式： https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html
3. Toast弹框提示：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
4. 数据缓存：https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html

2. 注册实现

1. 编写register.wxml布局页面

<!--pages/register/register.wxml-->
<navigation-bar title="" back="{{true}}" color="white" background="#ffb241"/><view class="login-container"><view class="logo-container"><image class="logo" src="../../assets/img_login_bg.png" 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>

navigation-bar是微信创建项目只带的顶部导航栏，直接拿过来使用即可

注意事项： 自定义组件需要注册之后才能使用， 所以需要在register.json文件中，注册自定义组件

{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"}
}

2. 编写register.wxss样式文件

/* pages/register/register.wxss */.login-container {display: flex;height: 100%;flex-direction: column;background-color: #ffb241;
}.logo-container {display: flex;width: 100%;height: 436rpx;justify-content: center;background-color: #ffb241;
}.logo-container .logo {width: 648rpx;height: 436rpx;
}.login-parent-container {display: flex;flex-direction: column;height: 100%;background-color: #ffffff;border-top-left-radius: 40rpx;border-top-right-radius: 40rpx;padding: 40rpx;
}.login-title-tips {display: flex;width: 100%;justify-content: center;font-weight: 800;font-size: 40rpx;line-height: 100rpx;
}.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: 100%;margin-left: 20rpx;width: calc(100% - 60rpx);
}.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: 100%;margin-left: 20rpx;width: calc(100% - 60rpx);
}.forget-pwd-right-container .tips {font-size: 22rpx;
}.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: #ffb241;color: #ffffff;
}

3. register.js 实现注册

在这里使用wx.setStorageSync来保存用户名和密码

// 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.trim() === '') {wx.showToast({title: '请输入用户名',icon: "error"})return}if (this.data.password.trim() === '') {wx.showToast({title: '请输入密码',icon: "error"})return}//保存用户名和密码wx.setStorageSync('username', this.data.username)wx.setStorageSync('password', this.data.password)wx.showToast({title: '注册成功',icon: 'success',success: () => {setTimeout(() => {wx.navigateBack()}, 1000);}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

4. 实现效果
   

3. 登录实现

1. 编写login.wxml

<!--pages/login/login.wxml-->
<navigation-bar title="" back="{{false}}" color="#ffffff" background="#ffb241" /><view class="login-container"><view class="logo-container"><image class="logo" src="../../assets/img_login_bg.png" 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="{{checked}}"  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>

2. 编写login.wxss样式文件

/* pages/login/login.wxss */.login-container {display: flex;height: 100%;flex-direction: column;background-color: #ffb241;
}.logo-container {display: flex;width: 100%;height: 436rpx;justify-content: center;background-color: #ffb241;
}.logo-container .logo {width: 648rpx;height: 436rpx;
}.login-parent-container {display: flex;flex-direction: column;height: 100%;background-color: #ffffff;border-top-left-radius: 40rpx;border-top-right-radius: 40rpx;padding: 40rpx;
}.login-title-tips {display: flex;width: 100%;justify-content: center;font-weight: 800;font-size: 40rpx;line-height: 100rpx;
}.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;
}.forget-pwd-container .forget-pwd-right-container {display: flex;flex-direction: row;
}.forget-pwd-right-container .tips {font-size: 22rpx;
}.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: #ffb241;color: #ffffff;
}

3. login.js 实现登录

// pages/login/login.js
Page({/*** 页面的初始数据*/data: {username: "",password: "",checked: false},/*** 生命周期函数--监听页面加载*/onLoad(options) {if (wx.getStorageSync("checked")) {this.setData({username: wx.getStorageSync("username"),password: wx.getStorageSync("password"),})this.setData({checked:wx.getStorageSync('checked')})}},/*** 点击记住密码*/checkboxChange(event) {this.setData({checked: event.detail.value})wx.setStorageSync('checked', this.data.checked)},eventUsernameHandle(options) {this.setData({username: options.detail.value})},eventPasswordHandle(options) {this.setData({password: options.detail.value})},/*** 注册*/onLoginHandle() {if (this.data.username.trim() === '') {wx.showToast({title: '请输入用户名',icon: "error"})return}if (this.data.password.trim() === '') {wx.showToast({title: '请输入密码',icon: "error"})return}if (this.data.username === wx.getStorageSync("username") && this.data.password === wx.getStorageSync("password")) {wx.showToast({title: '登录成功',icon: 'success',success: () => {setTimeout(() => {wx.navigateBack()}, 1000);}})} else {wx.showToast({title: '用户名或密码错误',icon: 'error',})}},/*** 注册*/onRegisterHandle() {wx.navigateTo({url: '/pages/register/register',})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

4. 运行效果

4. 关于作者其它项目视频教程介绍

本人在b站录制的一些视频教程项目，免费供大家学习

1. Android新闻资讯app实战：https://www.bilibili.com/video/BV1CA1vYoEad/?vd_source=984bb03f768809c7d33f20179343d8c8
2. Androidstudio开发购物商城实战：https://www.bilibili.com/video/BV1PjHfeXE8U/?vd_source=984bb03f768809c7d33f20179343d8c8
3. Android开发备忘录记事本实战：https://www.bilibili.com/video/BV1FJ4m1u76G?vd_source=984bb03f768809c7d33f20179343d8c8&spm_id_from=333.788.videopod.sections
4. Androidstudio底部导航栏实现：https://www.bilibili.com/video/BV1XB4y1d7et/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8
5. Android使用TabLayout+ViewPager2实现左右滑动切换：https://www.bilibili.com/video/BV1Mz4y1c7eX/?spm_id_from=333.337.search-card.all.click&vd_source=984bb03f768809c7d33f20179343d8c8