微信小程序实现登录注册

文章目录

    • 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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/950751.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

嵌入式系统 （2.嵌入式硬件系统基础）

嵌入式系统 （2.嵌入式硬件系统基础）

2.嵌入式硬件系统基础 2.1嵌入式硬件系统的组成 嵌入式硬件系统以嵌入式微处理器为核心&#xff0c;主要由嵌入式微处理器、总线、存储器、输入/输出接口和设备组成。 嵌入式微处理器 嵌入式微处理器采用冯诺依曼结构或哈佛结构&#xff1a;前者指令和数据共享同一存储空间…
阅读更多...
多模态大模型初探索：通过ollama部署多模态大模型

多模态大模型初探索：通过ollama部署多模态大模型

文章目录 前言模型下载 前言 今天和同事聊天&#xff0c;聊到多模态大模型&#xff0c;感觉可以作为2025年的一个新的探索方向。希望和大家一起学习&#xff0c;一起进步。 今天也是尝试了我能想到的最基本最快速地本地部署多模态大模型的方式&#xff0c;那便是使用ollama。…
阅读更多...
【超详细】React SSR 服务端渲染实战

【超详细】React SSR 服务端渲染实战

前言 这篇文章和大家一起来聊一聊 React SSR&#xff0c;本文更偏向于实战。你可以从中学到&#xff1a; 从 0 到 1 搭建 React SSR 服务端渲染需要注意什么 react 18 的流式渲染如何使用 文章如有误&#xff0c;欢迎指出&#xff0c;大家一起学习交流&#xff5e;。 &…
阅读更多...
js策略模式

js策略模式

定义一组算法&#xff0c;将每个算法封装成一个独立的类&#xff0c;并使它们可以互相替换。策略模式使得算法的变化不会影响到使用算法的客户。 const priceProcessor {pre(originPrice) {if (originPrice > 100) {return originPrice - 20;}return originPrice * 0.9;}…
阅读更多...
Python中的可变对象与不可变对象；Python中的六大标准数据类型哪些属于可变对象，哪些属于不可变对象

Python中的可变对象与不可变对象；Python中的六大标准数据类型哪些属于可变对象，哪些属于不可变对象

Python中的可变对象与不可变对象&#xff1b;Python中的六大标准数据类型哪些属于可变对象&#xff0c;哪些属于不可变对象 Python中的可变对象与不可变对象一、Python的六大标准数据类型1. 数字类型 (Number)2. 字符串 (String)3. 列表 (List)4. 元组 (Tuple)5. 集合 (Set)6. …
阅读更多...
js状态模式

js状态模式

允许一个对象在其内部状态改变时改变它的行为。 状态模式将对象的状态封装成独立的类&#xff0c;并使它们可以互相转换 // 定义状态接口class State {constructor() {if (this.constructor State) {throw new Error(不能实例化抽象类);}}// 定义状态方法handle(context) {th…
阅读更多...
基于64QAM的载波同步和定时同步性能仿真,包括Costas环和gardner环

基于64QAM的载波同步和定时同步性能仿真,包括Costas环和gardner环

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; 仿真操作步骤可参考程序配套的操作视频。 2.算法涉及理论知识概要 载波同步是…
阅读更多...
【Web安全】SQL 注入攻击技巧详解：布尔盲注（Boolean-Based Blind SQL Injection）

【Web安全】SQL 注入攻击技巧详解：布尔盲注（Boolean-Based Blind SQL Injection）

【Web安全】SQL 注入攻击技巧详解&#xff1a;布尔盲注&#xff08;Boolean-Based Blind SQL Injection&#xff09; 引言 布尔盲注&#xff08;Boolean-Based Blind SQL Injection&#xff09;是一种在无法直接从数据库获取数据的情况下&#xff0c;通过观察数据库响应的布尔…
阅读更多...
太速科技-418-基于AD9361 +ZYNQ7020 的软件无线电 SDR 套件

太速科技-418-基于AD9361 +ZYNQ7020 的软件无线电 SDR 套件

基于AD9361 ZYNQ7020 的软件无线电 SDR 套件 一、板卡信息 ● ZYNQ芯片采用XC7Z020&#xff0c;逻辑容量更大&#xff0c;支持更大的逻辑设计&#xff1b; ● 内存采用两片512M DDR3&#xff0c;共1GByte&#xff0c;更大容量。 ● 支持千兆网口&#xff0c;支持ZEDFMCO…
阅读更多...
SpringBoot日常：集成Kafka

SpringBoot日常：集成Kafka

文章目录 1、pom.xml文件2、application.yml3、生产者配置类4、消费者配置类5、消息订阅6、生产者发送消息7、测试发送消息 本章内容主要介绍如何在springboot项目对kafka进行整合&#xff0c;最终能达到的效果就是能够在项目中通过配置相关的kafka配置&#xff0c;就能进行消息…
阅读更多...
分布式IO模块：激光切割机产线高效控制的创新引擎

分布式IO模块：激光切割机产线高效控制的创新引擎

在智能制造的浪潮中&#xff0c;激光切割技术以其高精度、高效率的特点&#xff0c;成为了现代工业生产中不可或缺的一部分。特别是在汽车制造、航空航天、电子设备及精密零部件加工等领域&#xff0c;激光切割机以其无与伦比的切割精度和灵活性&#xff0c;引领着制造业的转型…
阅读更多...
RK3562编译Android13 ROOT固件教程，触觉智能开发板演示

RK3562编译Android13 ROOT固件教程，触觉智能开发板演示

本文介绍编译Android13 ROOT权限固件的方法&#xff0c;触觉智能RK3562开发板演示&#xff0c;搭载4核A53处理器&#xff0c;主频高达2.0GHz&#xff1b;内置独立1Tops算力NPU&#xff0c;可应用于物联网网关、平板电脑、智能家居、教育电子、工业显示与控制等行业。 关闭seli…
阅读更多...
wireshark抓包工具新手使用教程

wireshark抓包工具新手使用教程

wireshark抓包工具新手入门使用教程 一、Wireshark软件安装二、Wireshark 抓包示范三、Wireshakr抓包界面四、Wireshark过滤器设置五、wireshark过滤器表达式的规则六、Wireshark抓包分析TCP三次握手七、Wireshark分析常用列标签格式 Wireshark是一款开源的网络协议分析工具&am…
阅读更多...
如何用Python编程实现自动整理XML发票文件

如何用Python编程实现自动整理XML发票文件

传统手工整理发票耗时费力且易出错&#xff0c;而 XML 格式发票因其结构化、标准化的特点&#xff0c;为实现发票的自动化整理与保存提供了可能。本文将详细探讨用python来编程实现对 XML 格式的发票进行自动整理。 一、XML 格式发票的特点 结构化数据&#xff1a;XML 格式发票…
阅读更多...
【网络安全 | 漏洞挖掘】HubSpot 全账户接管（万字详析）

【网络安全 | 漏洞挖掘】HubSpot 全账户接管（万字详析）

未经许可，不得转载。 今天我们将分享一个关于在 Bugcrowd 平台的 HubSpot 公共漏洞赏金计划中实现全账户接管的故事。 文章目录 正文SQL 注入主机头污染（Host Header Poisoning）负载均衡器主机头覆盖（Load Balancer Host Header Override）Referer Header 测试ORIGIN Heade…
阅读更多...
2025_0105_生活记录

2025_0105_生活记录

3号去内蒙看了流星雨。还记得上次看流星的时间是2018年&#xff0c;也是冬天&#xff0c;大家在雁栖湖校区的操场上仰望星空。那个时候幸运的看到了一颗流星&#xff0c;便迅速地在心里许愿。这次看到了三颗流星&#xff0c;我也许了愿&#xff0c;希望实现。 24年走过了十多个…
阅读更多...
（四）ROS通信编程——服务通信

（四）ROS通信编程——服务通信

前言 学完了话题通信其实操作流程基本都已经很熟悉了&#xff0c;因此服务通讯的学习就会流畅许多。 服务通信也是ROS中一种极其常用的通信模式&#xff0c;服务通信是基于请求响应模式的&#xff0c;是一种应答机制。也即: 一个节点A向另一个节点B发送请求&#xff0c;B接收…
阅读更多...
《繁星路》V1.8.3(Build16632266)官方中文学习版

《繁星路》V1.8.3(Build16632266)官方中文学习版

《繁星路》官方中文版https://pan.xunlei.com/s/VODae2_2Z3QyMF02I5y321uHA1?pwdqgsh# 作为一款星际模拟游戏&#xff0c;完美融合了硬科幻元素与基地建设玩法&#xff0c;体验改造行星的恢弘与壮阔。化身人工意识AMI&#xff0c;遵照基本指示推进火星改造的各项工作&#xf…
阅读更多...
学习threejs，导入wrl格式的模型

学习threejs，导入wrl格式的模型

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.VRMLLoader wrl模型加…
阅读更多...
Element-plus、Element-ui之Tree 树形控件回显Bug问题。

Element-plus、Element-ui之Tree 树形控件回显Bug问题。

需求&#xff1a;提交时&#xff0c;需要把选中状态和半选中状态 的数据id提交。如图所示&#xff1a; 数据回显时&#xff0c;会出现代码如下&#xff1a; <template><el-tree ref"treeRef" :data"data" show-checkbox node-key"id" …
阅读更多...
最新文章

Copyright @ 2022~2023