微信小程序实现登录注册

news2025/1/10 2:01:06

文章目录

    • 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.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.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.coloradmin.cn/o/2273461.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[大模型开源]SecGPT 网络安全大模型

[大模型开源]SecGPT 网络安全大模型

模型介绍 SecGPT的愿景是将人工智能技术引入网络安全领域&#xff0c;以提高网络防御的效率和效果。其使命是推动网络安全智能化&#xff0c;为社会提供更安全的数字生活环境。 ① SecGPT开源地址&#xff1a;https://github.com/Clouditera/secgpt② 模型地址&#xff1a;htt…
阅读更多...
解决“KEIL5软件模拟仿真无法打印浮点数”之问题

解决“KEIL5软件模拟仿真无法打印浮点数”之问题

在没有外部硬件支持时&#xff0c;我们会使用KEIL5软件模拟仿真&#xff0c;这是是仿真必须要掌握的技巧。 1、点击“Project”&#xff0c;然后点击“Options for target 项目名字”&#xff0c;点击“Device”,选择CPU型号。 2、点击“OK” 3、点击“Target”,勾选“Use Mi…
阅读更多...
C语言 扫雷程序设计

C语言 扫雷程序设计

目录 1.main函数 2.菜单打印menu函数 3.游戏game函数 4.宏定义 5.界面初始化 6.打印界面 7.设置雷 8.统计排查坐标周围雷的个数 9.排查雷 10.总代码 test.c代码 game.h代码 game.c代码 结语&#xff1a; 一个简单的扫雷游戏&#xff0c;通过宏定义可以修改行列的…
阅读更多...
Excel 技巧03 - 如何对齐小数位数？ (★）如何去掉小数点？如何不四舍五入去掉小数点？

Excel 技巧03 - 如何对齐小数位数？ (★）如何去掉小数点？如何不四舍五入去掉小数点？

这几个有点儿关联&#xff0c;我都给放到一起了&#xff0c;不影响大家分别使用。 目录 1&#xff0c;如何对齐小数位数&#xff1f; 2&#xff0c;如何去掉小数点&#xff1f; 3&#xff0c;如何不四舍五入去掉小数点&#xff1f; 1&#xff0c;如何对齐小数位数&#xff…
阅读更多...
【大模型+本地自建知识图谱/GraphRAG/neo4j/ollama+Qwen千问（或llama3）】 python实战（中）

【大模型+本地自建知识图谱/GraphRAG/neo4j/ollama+Qwen千问（或llama3）】 python实战（中）

一、建立基本的知识图谱并导入neo4j 这里我举例用的属性表、关系表&#xff0c;大概格式如下 id名字颜色a1苹果红色 startrelenda1属于b1 启动neo4j&#xff08;关于neo4j的安装此处不再赘述&#xff09; import pandas as pd from py2neo import Graph, Node, Relationship…
阅读更多...
量子计算遇上人工智能：突破算力瓶颈的关键？

量子计算遇上人工智能：突破算力瓶颈的关键？

引言&#xff1a;量子计算遇上人工智能——突破算力瓶颈的关键&#xff1f; 在数字化时代的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;正以前所未有的速度改变着我们的生活&#xff0c;从语音助手到自动驾驶&#xff0c;从医学诊断到金融分析&#xff0c;无不彰显其…
阅读更多...
jenkins入门12-- 权限管理

jenkins入门12-- 权限管理

Jenkins的权限管理 由于jenkins默认的权限管理体系不支持用户组或角色的配置&#xff0c;因此需要安装第三发插件来支持角色的配置&#xff0c;我们使用Role-based Authorization Strategy 插件 只有项目读权限 只有某个项目执行权限
阅读更多...
IWOA-GRU和GRU时间序列预测(改进的鲸鱼算法优化门控循环单元)

IWOA-GRU和GRU时间序列预测(改进的鲸鱼算法优化门控循环单元)

时序预测 | MATLAB实现IWOA-GRU和GRU时间序列预测(改进的鲸鱼算法优化门控循环单元) 目录 时序预测 | MATLAB实现IWOA-GRU和GRU时间序列预测(改进的鲸鱼算法优化门控循环单元)预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现IWOA-GRU和GRU时间序列预测…
阅读更多...
分享3个国内使用正版GPT的网站【亲测有效！2025最新】

分享3个国内使用正版GPT的网站【亲测有效！2025最新】

1. molica 传送入口&#xff1a;https://ai-to.cn/url/?umolica 2. 多帮AI 传送入口&#xff1a;https://aigc.openaicloud.cn?inVitecodeMYAAGGKXVK 3. 厉害猫 传送入口&#xff1a;https://ai-to.cn/url/?ulihaimao
阅读更多...
Personal APP

Personal APP

1、Matlab 2023b https://www.bilibili.com/opus/887246540317392920 https://blog.csdn.net/qq_25719943/article/details/138096918 https://www.jokerdown.com/22886.html 2、 3、
阅读更多...
Vue2：el-table中的文字根据内容改变颜色

Vue2：el-table中的文字根据内容改变颜色

想要实现的效果如图，【级别】和【P】列的颜色根据文字内容变化 1、正常创建表格 <template><el-table:data="tableData"style="width: 100%"><el-table-column prop="id" label="ID"/> <el-table-column …
阅读更多...
ArmSoM RK3588/RK3576核心板，开发板网络设置

ArmSoM RK3588/RK3576核心板，开发板网络设置

ArmSoM系列产品都搭配了以太网口或WIFI模块&#xff0c;PCIE转以太网模块、 USB转以太网模块等&#xff0c;这样我们的网络需求就不止是上网这么简单了&#xff0c;可以衍生出多种不同的玩法。 1. 网络连接​ 连接互联网或者组成局域网都需要满足一个前提–设备需要获取到ip&a…
阅读更多...
动态规划六——两个数组的dp问题

动态规划六——两个数组的dp问题

目录 题目一——1143. 最长公共子序列 - 力扣&#xff08;LeetCode&#xff09; 题目二——1035. 不相交的线 - 力扣&#xff08;LeetCode&#xff09; 题目三——115. 不同的子序列 - 力扣&#xff08;LeetCode&#xff09; 题目四—— 44. 通配符匹配 - 力扣&#xff08;…
阅读更多...
LQ quarter 5th

LQ quarter 5th

目录 B. 开赛主题曲 C. BlueAI E. 精准难度 B. 开赛主题曲 &#xff08;1&#xff09;两层循环枚举所有子串。第一层子串长度&#xff0c;第二层子串起点 &#xff08;2&#xff09;判子串是否合法还要一个 for&#xff0c;26 * 26 * 2e5 快要超时&#xff0c;因此计算每个字母…
阅读更多...
Sam Altman发布博客，回顾OpenAI九年历程，直言目标已瞄准ASI超级人工智能

Sam Altman发布博客，回顾OpenAI九年历程，直言目标已瞄准ASI超级人工智能

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
Python爬虫与1688图片搜索API接口：深度解析与显著收益

Python爬虫与1688图片搜索API接口：深度解析与显著收益

在电子商务的浩瀚海洋中&#xff0c;数据是驱动业务决策的核心引擎。阿里巴巴旗下的1688平台&#xff0c;作为全球领先的B2B在线市场&#xff0c;不仅汇聚了海量的商品信息&#xff0c;还提供了丰富的API接口&#xff0c;为开发者提供了强大的数据获取工具。本文将深入探讨1688…
阅读更多...
回归预测 | MATLAB实LSTM多输入单输出回归预测

回归预测 | MATLAB实LSTM多输入单输出回归预测

回归预测 | MATLAB实LSTM多输入单输出回归预测 目录 回归预测 | MATLAB实LSTM多输入单输出回归预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 LSTM多输入单输出回归预测 程序设计 完整代码&#xff1a;MATLAB实LSTM多输入单输出回归预测 %% 清空环境变量 warni…
阅读更多...
从 0 到 1，用 FastGPT 搭建专属私有化知识库与超智能 AI 助理

从 0 到 1，用 FastGPT 搭建专属私有化知识库与超智能 AI 助理

田园课堂私有化知识库搭建流程与总结 引言 在当今数字化时代&#xff0c;知识管理与智能交互对于教育领域的创新发展至关重要。FastGPT作为一款高效的AI流程构建可视化开源工具&#xff0c;为田园课堂实现私有化知识库的快速搭建提供了有力支持。本文将详细阐述使用FastGPT搭…
阅读更多...
centos服务器 /1ib64/libm.so.6: version “GLIBc 2.27’ not found 异常

centos服务器 /1ib64/libm.so.6: version “GLIBc 2.27’ not found 异常

centos服务器 /1ib64/libm.so.6: version “GLIBc 2.27’ not found 异常 问题 在服务器使用open3d时&#xff0c;报错缺失GLIBC_2.27&#xff0c;因为后续操作出问题会导致服务器挂&#xff0c;所以最好先备份一下。 解决 查询glibc版本 输入指令查询系统glibc版本&#x…
阅读更多...
UE播放声音

UE播放声音

蓝图中有两个播放声音的函数 Play Sound 2D 和 Play Sound at Location Play Sound 2D没有声音距离衰减&#xff0c;一般用于界面ui Play Sound at Location 有声音距离衰减&#xff0c;一般用于枪声&#xff0c;场景声等&#xff0c;比较常用
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023