微信小程序实现登录注册

文章目录

    • 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.mzph.cn/pingmian/66461.shtml

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

相关文章

【C++】18.继承

【C++】18.继承

文章目录 1.继承的概念及定义1.1 继承的概念1.2 继承定义1.2.1定义格式1.2.2继承关系和访问限定符1.2.3继承基类成员访问方式的变化 1.3 继承类模板 2.基类和派生类对象赋值转换3.继承中的作用域3.1 隐藏规则&#xff1a;3.2 考察继承作用域相关选择题 4.派生类的默认成员函数4…
阅读更多...
PCL 分段线性函数

PCL 分段线性函数

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 假设我们有一个分段线性函数，并且我们希望在某个区间内对这个函数进行均匀采样，生成一系列的点。相对通用一些的思路就是对这个函数进行参数化，方法有很多，这在其他的博客中也有提到，不过PCL也为我们提供了一种…
阅读更多...
PostgreSQL学习笔记（二）：PostgreSQL基本操作

PostgreSQL学习笔记（二）：PostgreSQL基本操作

PostgreSQL 是一个功能强大的开源关系型数据库管理系统 (RDBMS)&#xff0c;支持标准的 SQL 语法&#xff0c;并扩展了许多功能强大的操作语法. 数据类型 数值类型 数据类型描述存储大小示例值SMALLINT小范围整数&#xff0c;范围&#xff1a;-32,768 到 32,7672 字节-123INTE…
阅读更多...
html + css 顶部滚动通知栏示例

html + css 顶部滚动通知栏示例

前言 在现代网页设计中&#xff0c;一个吸引人的顶部滚动通知栏不仅能够有效传达重要信息&#xff0c;还能提升用户体验。通过使用HTML和CSS&#xff0c;我们可以创建既美观又功能强大的组件&#xff0c;这些组件可以在不影响网站整体性能的情况下提供实时更新或紧急通知。 本…
阅读更多...
Bi-Encoder vs. Cross-Encoder

Bi-Encoder vs. Cross-Encoder

Bi-Encoder vs. Cross-Encoder Bi-Encoder 和 Cross-Encoder 是两种常见的模型架构&#xff0c;主要用于自然语言处理&#xff08;NLP&#xff09;中的文本匹配、问答、检索等任务。它们的主要区别在于如何处理输入文本以及计算相似度的方式。 1. Bi-Encoder&#xff08;双编…
阅读更多...
excel如何将小数转换为百分比

excel如何将小数转换为百分比

在 Excel 中&#xff0c;将百分比格式的数字取消“%”并恢复为小数&#xff0c;可以按以下几种方法操作&#xff1a; 方法 1&#xff1a;直接更改格式 选中需要取消百分比格式的单元格。点击 **“开始”**选项卡中的 **“数字”**组。将单元格格式从“百分比”改为“常规”或“…
阅读更多...
PyQt5 UI混合开发，控件的提升

PyQt5 UI混合开发，控件的提升

PromoteLabelTest.py 提升的类 import sys from PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout,QTextEdit,QPushButton,QHBoxLayout,QFileDialog,QLabelclass PromoteLabel(QLabel):def __init__(self,parent None):super().__init__(parent)self.setText("…
阅读更多...
A/B实验之置信检验（一）：如何避免误判 (I类) 和漏报 (II类)

A/B实验之置信检验（一）：如何避免误判 (I类) 和漏报 (II类)

假设检验的依据&#xff1a;如何避免误判和漏报 A/B实验系列相关文章&#xff08;置顶&#xff09; 1.A/B实验之置信检验&#xff08;一&#xff09;&#xff1a;如何避免误判和漏报 2.A/B实验之置信检验&#xff08;二&#xff09;&#xff1a;置信检验精要 引言 在数据驱动…
阅读更多...
Spring Boot整合Minio实现文件上传

Spring Boot整合Minio实现文件上传

Spring Boot整合Minio后&#xff0c;前端的文件上传有两种方式&#xff1a; 文件上传到后端&#xff0c;由后端保存到Minio 这种方式好处是完全由后端集中管理&#xff0c;可以很好的做到、身份验证、权限控制、文件与处理等&#xff0c;并且可以做一些额外的业务逻辑&#xf…
阅读更多...
金融租赁系统助力行业转型与升级的创新之路

金融租赁系统助力行业转型与升级的创新之路

内容概要 在当今快速发展的商业环境中&#xff0c;金融租赁系统逐渐成为企业转型与升级的重要工具。它通过整合大数据与自动化技术&#xff0c;不仅提升了风险管理的准确性&#xff0c;还加快了审批流程&#xff0c;让企业在激烈的市场竞争中游刃有余。这个系统就像是一位聪明…
阅读更多...
Postman接口测试02|接口用例设计

Postman接口测试02|接口用例设计

目录 六、接口用例设计 1、接口测试的测试点&#xff08;测试维度&#xff09; 1️⃣功能测试 2️⃣性能测试 3️⃣安全测试 2、设计方法与思路 3、单接口测试用例 4、业务场景测试用例 1️⃣分析测试点 2️⃣添加员工 3️⃣查询员工、修改员工 4️⃣删除员工、查询…
阅读更多...
Python标准库之SQLite3

Python标准库之SQLite3

包含了连接数据库、处理数据、控制数据、自定义输出格式及处理异常的各种方法。 官方文档&#xff1a;sqlite3 --- SQLite 数据库的 DB-API 2.0 接口 — Python 3.13.1 文档 官方文档SQLite对应版本&#xff1a;3.13.1 SQLite主页&#xff1a;SQLite Home Page SQL语法教程&a…
阅读更多...
HTML 迷宫游戏

HTML 迷宫游戏

HTML 迷宫游戏 相关资源文件已经打包成压缩文件&#xff0c;可双击index.html直接运行程序&#xff0c;且文章末尾已附上相关源码&#xff0c;以供大家学习交流&#xff0c;博主主页还有更多Python相关程序案例&#xff0c;秉着开源精神的想法&#xff0c;望大家喜欢&#xff0…
阅读更多...
【Linux】上传、下载、压缩、解压

【Linux】上传、下载、压缩、解压

一、上传、下载 1.1 FinalShell文件系统 我们可以通过FinalShell工具&#xff0c;方便的和虚拟机进行数据交换。 在FinalShell软件的下方窗体中&#xff0c;提供了Linux的文件系统视图&#xff0c;可以方便的&#xff1a; 浏览文件系统&#xff0c;找到合适的文件&#xff0…
阅读更多...
以柔资讯-D-Security终端文件保护系统 logFileName 任意文件读取漏洞复现

以柔资讯-D-Security终端文件保护系统 logFileName 任意文件读取漏洞复现

0x01 产品简介 D-Security终端文件保护系统是一套专注于企业文件管理效率与安全的解决方案，统对文件进行全文加密，而非仅在文件表头或特定部分进行加密，从而大大提高了文件的安全性，降低了被破解的风险。D-Security终端文件保护系统是被政府和国安局等情报单位唯一认定的安…
阅读更多...
关于重构一点简单想法

关于重构一点简单想法

关于重构一点简单想法 当前工作的组内&#xff0c;由于业务开启的时间正好处于集团php-》go技术栈全面迁移的时间点&#xff0c;组内语言技术栈存在&#xff1a;php、go两套。 因此需求开发过程中通常要考虑两套技术栈的逻辑&#xff0c;一些基础的逻辑也没有办法复用。 在这…
阅读更多...
新的 WhoisXML API 白皮书重点分析了主要 gTLD 和 ccTLD 注册趋势

新的 WhoisXML API 白皮书重点分析了主要 gTLD 和 ccTLD 注册趋势

任何寻求建立在线存在的人似乎都可以选择无限多的互联网域名注册服务。然而&#xff0c;问题依然存在&#xff1a;哪些提供商更受注册者青睐&#xff1f;WhoisXML API 的研究团队通过分析主要 gTLD&#xff08;通用顶级域&#xff09;和 ccTLD&#xff08;国家或地区顶级域&…
阅读更多...
zabbix（二）

zabbix（二）

zabbix 1.zabbix监控的模式 主动和被动模式都是对于客户端而言 主动模式 客户端主动将数据发送给server或者是代理服务器 被动模式 服务端或者proxy(代理服务器)主动找客户端索要数据------------>默认方式 被动模式在成规模的集群&#xff08;成百上千台的&#xff09;&…
阅读更多...
Kubernetes Ingress：流量管理的利器

Kubernetes Ingress：流量管理的利器

在 Kubernetes 集群中&#xff0c;服务之间的通信和外部流量的引入通常是至关重要的。虽然 NodePort 和 LoadBalancer 是最常见的解决方案&#xff0c;但当集群内部的服务逐渐增多时&#xff0c;管理不同服务的流量变得复杂。这个时候&#xff0c;Ingress 作为一种强大的流量管…
阅读更多...
2012mfc,几种串

2012mfc,几种串

串,即是由符组成的串,在标准C,标准C,MFC中串这一功能的实现是不相同的,C完全兼容了C. 1.标准C中的串 在标准C中没有串数据类型,C中的串是有符类型的符数组或符类型的符指针来实现的.如: char name[26]"This is a Cstyle string"; //或char *name"This is a…
阅读更多...
最新文章

Copyright @ 2022~2023