微信小程序实现登录注册

文章目录

    • 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.rhkb.cn/news/505738.html

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

相关文章

1. Doris分布式环境搭建

1. Doris分布式环境搭建

一. 环境准备 本次测试集群采用3台机器hadoop1、hadoop2、hadoop3, Frontend和Backend部署在同一台机器上&#xff0c;Frontend部署3台组成高可用&#xff0c;Backend部署3个节点&#xff0c;组成3副本存储。 主机IP操作系统FrontendBackendhadoop1192.168.47.128Centos7Foll…
阅读更多...
docker-compose安装canal并利用rabbitmq同步多个mysql数据

docker-compose安装canal并利用rabbitmq同步多个mysql数据

必看&#xff1a;本文默认已经安装好了docker-compose、rabbitmq、mysql并且mysql开启了binlog日志&#xff0c;不需要再安装&#xff1b; 流程图 如上图所示&#xff0c;左边是MQ模式流程图&#xff0c;右边则是TCP模式的流程图&#xff1b; 最终的目的是利用canal监听多个M…
阅读更多...
ue5动画重定向，一键重定向。ue4小白人替换成ue5

ue5动画重定向，一键重定向。ue4小白人替换成ue5

这就是我们下载的 初学者动画内容包 点击设置选中列 绿色的是动画 黄色的关卡 蓝色是蓝图 ctrla 全选 ctrl鼠标左键 选中所有动画 重定向动画资产 不要选错&#xff0c;只要绿色 选择目标网格体 选择所有的绿色 动画 导出动画 添加前缀ycn 导出 一定要提前新建好存放的…
阅读更多...
scrapy爬取图片

scrapy爬取图片

scrapy 爬取图片 环境准备 python3.10scrapy pillowpycharm 简要介绍scrapy Scrapy 是一个开源的 Python 爬虫框架&#xff0c;专为爬取网页数据和进行 Web 抓取而设计。它的主要特点包括&#xff1a; 高效的抓取性能&#xff1a;Scrapy 采用了异步机制&#xff0c;能够高效…
阅读更多...
Hadoop3.x 万字解析，从入门到剖析源码

Hadoop3.x 万字解析，从入门到剖析源码

&#x1f496; 欢迎来到我的博客&#xff01; 非常高兴能在这里与您相遇。在这里&#xff0c;您不仅能获得有趣的技术分享&#xff0c;还能感受到轻松愉快的氛围。无论您是编程新手&#xff0c;还是资深开发者&#xff0c;都能在这里找到属于您的知识宝藏&#xff0c;学习和成长…
阅读更多...
RabbitMQ介绍与使用

RabbitMQ介绍与使用

RabbitMQ官网 RabbitMQ 介绍 RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;基于 AMQP&#xff08;高级消息队列协议&#xff09;标准&#xff0c;使用 Erlang 编程语言构建。它是消息队列&#xff08;MQ&#xff09;的一种&#xff0c;广泛应用于分布式系统中&#x…
阅读更多...
【爬虫】单个网站链接爬取文献数据:标题、摘要、作者等信息

【爬虫】单个网站链接爬取文献数据:标题、摘要、作者等信息

源码链接&#xff1a; https://github.com/Niceeggplant/Single—Site-Crawler.git 一、项目概述 从指定网页中提取文章关键信息的工具。通过输入文章的 URL&#xff0c;程序将自动抓取网页内容 二、技术选型与原理 requests 库&#xff1a;这是 Python 中用于发送 HTTP 请求…
阅读更多...
混合专家模型 (MoE)笔记摘要

混合专家模型 (MoE)笔记摘要

ref&#xff1a; https://huggingface.co/blog/zh/moe#%E4%BB%80%E4%B9%88%E6%98%AF%E6%B7%B7%E5%90%88%E4%B8%93%E5%AE%B6%E6%A8%A1%E5%9E%8B 简短总结 混合专家模型 (MoEs): 与稠密模型相比&#xff0c; 预训练速度更快 与具有相同参数数量的模型相比&#xff0c;具有更快的…
阅读更多...
解决idea中无法拖动tab标签页的问题

解决idea中无法拖动tab标签页的问题

1、按 Ctrl Alt S 打开设置&#xff0c;找到路径 File | Settings | Appearance & Behavior | Appearance 2、去掉勾选 Drag-and-drop with Alt pressed only 即可
阅读更多...
六、Angular 发送请求/ HttpClient 模块

六、Angular 发送请求/ HttpClient 模块

一、应用 HttpClient 模块 angular/common/http 中的 HttpClient 类基于浏览器提供的 XMLHttpRequest 接口。要想使用 HtpClient 模块&#xff0c;就要先导入 Anqular 的 HttpClientModule。大多数 Web 应用程序都会在根模块 AppModule 中导入它。 编辑 src/app/app.module.ts…
阅读更多...
基于单片机的无线智能窗帘控制器的设计

基于单片机的无线智能窗帘控制器的设计

摘 要 : 本文以单片机为控制核心 , 基于 PT2262/ 2272 无线收发模块 , 实现了窗帘的无线远程智能控制 . 该控制器通过高频无线收发模块实现了遥控窗帘的开合控制; 根据外部光线强弱实现自动开关窗帘 ; 根据设定时间自动完成开关过程; 通过语音播报当前环境温湿度信息以…
阅读更多...
android刷机

android刷机

android ota和img包下载地址&#xff1a; https://developers.google.com/android/images?hlzh-cn android启动过程 线刷 格式&#xff1a;ota格式 模式&#xff1a;recovery 优点&#xff1a;方便、简单&#xff0c;刷机方法通用&#xff0c;不会破坏手机底层数据&#xff0…
阅读更多...
Vivado中Tri_mode_ethernet_mac的时序约束、分析、调整——（一）时序约束的基本概念

Vivado中Tri_mode_ethernet_mac的时序约束、分析、调整——（一）时序约束的基本概念

1、基本概念 推荐阅读&#xff0c;Ally Zhou编写的《Vivado使用误区与进阶》系列文章&#xff0c;熟悉基本概念、tcl语句的使用。 《Vivado使用误区与进阶》电子书开放下载&#xff01;&#xff01; 2、Vivado中的语法例程 1&#xff09;语法例程 约束的语句可以参考vivado…
阅读更多...
设计模式 行为型 责任链模式（Chain of Responsibility Pattern）与 常见技术框架应用 解析

设计模式 行为型 责任链模式（Chain of Responsibility Pattern）与 常见技术框架应用 解析

责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许将请求沿着处理者链进行发送。每个处理者对象都有机会处理该请求&#xff0c;直到某个处理者决定处理该请求为止。这种模式的主要目的是避免请求的发送者和接收者之间…
阅读更多...
ubuntu 20.04 安装docker--小白学习之路

ubuntu 20.04 安装docker--小白学习之路

更新包 sudo apt-get update # 安装需要的软件包以使apt能够通过HTTPS使用仓库 sudo apt-get install ca-certificates curl gnupg lsb-release 使用清华大学源 # 添加Docker官方的GPG密钥 curl -fsSL https://mirrors.tuna.tsinghua.edu.cn/docker-ce/linux/ubuntu/gpg | sudo…
阅读更多...
Linux之线程池与单例模式

Linux之线程池与单例模式

目录 线程池 线程池代码 单例模式 饿汉模式单例模式 懒汉模式单例模式 在前几期&#xff0c;我们已经学习了多线程的创建和控制&#xff0c;学习了多线程中的同步和互斥&#xff0c;学习了多线程中的条件变量和信号量&#xff0c;基于此我们实现了基于阻塞队列和基于环形队…
阅读更多...
The Dedicated Few (10 player)

The Dedicated Few (10 player)

The Dedicated Few (10 player) 少数精锐&#xff08;10人&#xff09; &#xff1a;以少于9人的阵容击败纳克萨玛斯的所有首领&#xff08;10人&#xff09; 历时2小时做完了&#xff0c;不容易啊&#xff0c;别人可以的咱也可以。 World of Warcraft [CLASSIC][80猎人][G…
阅读更多...
List ---- 模拟实现LIST功能的发现

List ---- 模拟实现LIST功能的发现

目录 listlist概念 list 中的迭代器list迭代器知识const迭代器写法list访问自定义类型 附录代码 list list概念 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是双向链表结构&#xff0c;双向链表中每个元素…
阅读更多...
vscode支持ssh远程开发

vscode支持ssh远程开发

文章目录 一、生成ssh使用的公钥/密钥对二、使用vscode通过ssh连接服务器1.安装插件2.配置文件3.连接服务器4.新建文件夹&#xff0c;存放不同的任务 三、使用scp命令与服务器互传文件、文件夹1.检查Windows 系统是否支持scp命令2.在Windows系统本地的电脑向服务器传输文件、文…
阅读更多...
Jmeter-压测时接口如何按照顺序执行

Jmeter-压测时接口如何按照顺序执行

Jmeter-压测时接口如何按照顺序执行-临界部分控制器 在进行压力测试时&#xff0c;需要按照顺序进行压测&#xff0c;比如按照接口1、接口2、接口3、接口4 进行执行 查询结果是很混乱的&#xff0c;如果请求次数少&#xff0c;可能会按照顺序执行&#xff0c;但是随着次数增加…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023