当前位置： 首页 > article >正文

微信小程序实现登录注册

article 2025/1/9 19:28:00

文章目录

    • 1. 官方文档教程
    • 2. 注册实现
    • 3. 登录实现
    • 4. 关于作者其它项目视频教程介绍

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"
  }
}
  1. 编写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;
}
  1. 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() {

  }
})
  1. 实现效果
    在这里插入图片描述

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>
  1. 编写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;
}
  1. 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() {

  }
})
  1. 运行效果

在这里插入图片描述

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

http://www.kler.cn/a/473357.html

相关文章：

  • Agent | Dify中的两种可选模式
  • linux音视频采集技术: v4l2
  • maven的简单介绍
  • 【AI-21】深度学习框架中的神经网络
  • 后台管理系统引导功能的实现
  • 精选2款.NET开源的博客系统
  • windows10下安装Microsoft SQL Server 2016
  • mysql性能测试优化
  • 【分糖果——DFS】
  • 面向对象分析与设计Python版 建模工具UML
  • k8s集群监控系统部署方案
  • 回归预测 | MATLAB实GRU多输入单输出回归预测
  • Spring boot接入xxl-job
  • 【传统枪机现代枪机的功能需求】
  • 【HarmonyOS NEXT】鸿蒙应用使用后台任务之长时任务，解决屏幕录制音乐播放等操作不被挂起
  • C/C++中头文件time
  • DAX实现K近邻(KNN)分类算法
  • 课题推荐——基于GPS的无人机自主着陆系统设计
  • 【Python3】异步操作 redis
  • 69.基于SpringBoot + Vue实现的前后端分离-家乡特色推荐系统（项目 + 论文PPT）
  • 通过可穿戴外骨骼，以更灵活的方式操作你的机器人。
  • 分布式主键ID生成方式-snowflake雪花算法
  • 迅为RK3568开发板篇OpenHarmony配置HDF驱动控制LED-修改HCS硬件配置
  • 电脑硬盘系统迁移及问题处理
  • linux相关conda操作
  • 深度学习中的卷积和反卷积（二）——反卷积的介绍