在 account 页面上添加一个登录用的表单 .. 打开这个页面 .. 先导入 Taro ui 里的两个组件 .. 需要用的是 AtInput 还有 AtButton . 它们都来自 Taro UI ..

修改一下页面的标题 .. 设置成 登录 ..

在页面上添加一个 state .. 里面添加一个 username 表示用户名 .. 还有 password 表示用户的密码 ..

再设计一下登录表单视图 .. 在这个包装上添加几个类 .. pt-5 m-5 .. 再加上 form 这个自定义的 css 类 ..

里面先用一个 AtInput 组件 .. 添加一个文本框 .. 设置一下组件的属性 .. name .. 是 username .. type 设置成 text .. placeholder 占位符文字 .. 用户 .. value 是文本框的值 .. 绑定一个 this.state.username ..

再给它绑定一个 onChange 事件 .. 使用 handleChange 来处理 .. bind 一个 this .. 还有一个类型参数 .. 参数的值可以是 username ..

className .. mb-3 在组件的底部添加点边距 .. 复制一份 ..

修改一下 name 的值 .. password .. type 也是 password .. 占位符文字是 密码 .. 它的 value 是 this.state.password ..

绑定 onChange .. 处理方法的类型参数值设置成 password ..

下面还需要一个提交按钮 .. 用一下 AtButton .. 按钮文字是 登录 ..

在按钮上添加点属性 ..

type 设置成 primary .. onClick .. 绑定点击事件 .. this.handleClick 来处理 .. bind this 还有 login .. 这样在处理方法里面可以判断点击的是谁 ..

再添加一个 className .. mt-5 ，在按钮的上边添加点外边距 ..

回到模拟器 .. 预览一下这个登录表单 ..

下面再去添加点自定义的样式 .. 打开 assets .. styles 下面的 app.scss .. 先直接在这个文件里添加点样式 .. 添加一个 .form .. 里面设置一下表单的字号 .. 大小设置成 font-size-base ..

然后设置一下 .form 下面的 .at-input .. 去掉它的左边的外边距 .. 把 margin-left 设置成 0 ..

再设置一下 .form 下面的 .at-button 的样式 .. 去掉按钮的圆角效果 .. border-radius 设置成 0 ..

回到模拟器再预览一下登录表单 ..