微信小程序-详细登录流程 - (图解+代码流程)

项目准备

     注册小程序和创建项目

👉注册小程序和创建项目教程👈

一、登录页面效果图

头部区域

头部区域代码展示

布局组件和图片组件的使用

view组件： 等价于之前的div容器，是一个块级元素。可以设置宽和高
image组件： 显示图片的组件，src属性是当前的图片路径 mode属性是当前图片的压缩方式

弹性布局 display：flex；

了解更多弹性盒模型布局👈
​布局方向： display-directtion row|column row是水平方向布局（默认） column是垂直方向布局
排列方向： justify-content center 居中 space-between两端对齐 常用，其它可以看网上信息进行完善
交叉轴方向： align-items 这行代码定义了弹性盒子内部的项目在交叉轴（垂直方向，如果主轴是水平的话）上的对齐方式。

登录内容区域

登录内容区域代码展示

bindsubmit=“uplogin”

bindsubmit： 是一种事件绑定语法，用于处理表单提交事件。是微信小程序提供的一个事件绑定属性，专门用于表单 () 组件。当用户点击表单内的提交按钮时，会触发这个事件。
form-type=“submit”： 是一个特殊的属性，专门用于表单中的按钮组件（< button >），用来指定该按钮具有提交表单的功能。

代码注解

display: flex; 这行代码设置了元素的布局模式为弹性盒子（Flexbox）。它能够让子元素在容器中按行或列方向上排列，并能够轻松对齐和分配空间。
justify-content: center; 这行代码指定了弹性盒子内部的项目在主轴（默认为水平方向）上的对齐方式。在这里，center意味着子元素会在水平方向上居中对齐。
align-items: center; 这行代码定义了弹性盒子内部的项目在交叉轴（垂直方向，如果主轴是水平的话）上的对齐方式。
border-radius 属性用于设置元素的外边角为圆角，数值越大，圆角越明显。
padding-left: 20rpx; 这行代码设置了元素左侧的内边距为20rpx。
box-sizing: border-box; 这行代码调整了元素盒模型的计算方式。默认情况下，许多浏览器使用W3C盒模型，其中元素的宽度和高度不包括边框和内边距

切换登录区域

切换登录区域代码展示

< radio-group />

这是一个容器组件，用于包裹一系列的 组件。它有一个重要的属性 bindchange 事件，当用户改变选中项时触发，可以通过这个事件获取当前选中的值。例如，你可以设置一个事件处理函数来处理用户的选择变化。

< radio/>

这个组件代表单选框中的每一个选项。它通常作为 的子元素使用。每个 可以设置 value 属性来指定选项的值，以及 checked 属性来控制该选项是否默认被选中。用户只能从 包含的 选项中选择一个。

切换登录方式

微信登录方式

账号登录方式

切换登录方式代码实现

二、登录功能实现

登录方法的代码实现

账号或密码错误提示错误

登录成功跳转页面