微信小程序——【微信授权或账号登录】

登录页面的效果图

示例：

第一部分 头部图片排列实现

代码头部部分

.wxml

mode :图片裁剪、缩放的模式
属性值：
/ heightFix:宽度不变，高度自动变化，保持原图宽高比不变
/ widthFix高度不变，宽度自动变化，保持原图宽高比不变

.wxss

display: flex ：是 CSS 中的一个属性，用于创建弹性布局（flexbox），使元素在容器内根据一定的规则灵活地排列和对齐。这个属性应用于父元素（容器），使得其子元素可以响应式地调整空间分配。

justify-content：定义了项目在主轴上的对齐方式
属性值：
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
spac-between：两端对齐，项目之间的间隔相等
space-around：两个项目两侧间隔相等

border-bottom：:用来为元素添加可见的下边界线

align-items： 是 CSS 布局属性之一，用于定义 flex 容器（flex container）中子元素（flex items）的垂直对齐方式。它在 flexbox 布局模型中起作用，当容器的 display 属性为 flex 或 inline-flex 时，这个属性就变得很重要。
stretch（默认值）：子元素会拉伸填充整个可用空间，并根据它们的内容和容器中的其他元素调整高度。
flex-start: 子元素顶部对齐于容器的基线（除非设置了 justify-content: flex-end，在这种情况下子元素底端对齐）。
flex-end: 子元素底部对齐于容器的基线。
center: 子元素居中对齐。
baseline: 子元素的基线对齐（通常适用于文本）。
inherit: 如果没有显式指定，从父元素继承 align-items 属性。

第二部分微信授权登录排列

代码中间部分

wxml

wxss


flex-direction: 是 CSS 布局中用于控制弹性容器（flex container）中项目的排列方向。它定义了如何在主轴（main axis）上放置项目，主轴通常是水平的（从左到右）或垂直的（从上到下），取决于容器的方向设置（如 row 或 column）。

row (默认值)：项目按顺序从左到右或从上到下排列。
row-reverse：项目从右到左或从下到上排列，但是起始点还是在容器的开始。
column：项目按顺序堆叠在垂直线上，从上往下排列。
column-reverse：项目从底向上堆叠，但仍然从容器的开始位置开始

第三部分

.wxml

.wxss

radio-group：单项选择器，内部由多个 radio 组成
。。。。radio-group和radio 搭配用（看上图）

bindchange： radio-group中选中项发生改变时触发 change 事件，detail = {value:[选中的radio的value的数组]}

// 实现点击勾选 到 微信授权或账号登录（.js部分）

第四部分

// 实现账号密码登录和语句判断是否成功登录

.wxml

bindsubmit:属性来绑定表单的提交事件。当表单被提交时，绑定的事件处理器会被触发。
form-type:属性被设置为 “submit” 或 “reset” 时，它会触发表单的提交或重置行为。
.wxss

line-height：用于控制行内元素的垂直高度，即一行内容（如文字）与其上下空白区域之间的总高度。line-height 的值可以设置为长度单位（如 px, em）、倍数或数值。
border-radius：用于创建圆角边框
同时出现{padding-left: 15rpx; { box-sizing: border-box;

实现跳转’我的’个人信息并判断账户登录是否正确（.js部分）

wx.showToast：显示消息提示框
wx.redirectTo：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面