项目准备
注册小程序和创建项目
👉注册小程序和创建项目教程👈
头部区域
头部区域代码展示
布局组件和图片组件的使用
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 属性来控制该选项是否默认被选中。用户只能从 包含的 选项中选择一个。
切换登录方式
微信登录方式
账号登录方式
切换登录方式代码实现
登录方法的代码实现
账号或密码错误提示错误
登录成功跳转页面
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/hd-wfwjg/22476.html