从微信小程序到鸿蒙JS开发-表单组件&注册登录模块
想了解更多内容，从微程序册登请访问：
和华为官方合作共建的到鸿单组鸿蒙技术社区
https://harmonyos.51cto.com/#zz
牛年将至，祝大家行行无bug，开块页页so easy～
在微信小程序中，发表提供了form组件，录模可以将input、从微程序册登picker、到鸿单组slider、开块button等全部放在form中，发表并设置name属性实现类似html的录模表单提交功能。
鸿蒙js目前是从微程序册登没有form组件的，因此我们需要在提交时手动获取输入框、到鸿单组选择框等的开块值，自行构建数据对象。发表
1、录模登录模块
这里接着上一篇，通过dialog组件实现了模态登录和注册的窗口。登录窗口的效果如下：
每一行中，放置图标和input输入框。input使用的是默认样式，看起来还是很清爽的。
hml视图层：
<dialog id="loginDialog"> <div class="loginDialog"> <div class="formItem"> <image src="{ { phone ? (imgUrl + phone.png) : (imgUrl + phone1.png) }}"></image> <input id="phoneInput" type="number" placeholder="请输入手机号" onchange="inputPhone"></input> </div> <div class="formItem"> <image src="{ { pwd ? (imgUrl + password.png) : (imgUrl + password1.png) }}"></image> <input id="pwdInput" type="password" placeholder="请输入密码" onchange="inputPwd"></input> </div> <button class="inputBtn" onclick="login">登录</button> </div> </dialog>手机号的input设置type="number"，高防服务器在获取焦点后键盘自动弹出为数字键盘。密码框type="password"，弹出普通键盘，且输入的字符会变为圆点，也可点击右侧眼睛图标查看密码内容。
在最开始使用input时，尝试使用this.$element("id").value获取，但这样是获取不到的。
// 登录 login() { prompt.showToast({ message: "手机号: " + this.$element("phoneInput").value + ", 密码: " + this.$element("pwdInput").value, duration: 5000 }) }
因此需要使用input的onchange属性绑定值改变的事件，通过e.value取到改变后的值，并赋给data中的变量。
顺便提一下，今天突然找到了console打印日志的查看方式。需在最下方打开"HiLog"视图，搜索"app Log"后即可查看。console.log()的内容需设置日志等级"debug"，console.info()则在"info"等级即可查看。
// 手机号输入框 inputPhone(e) { this.phone = e.value; }, // 密码输入框 inputPwd(e) { this.pwd = e.value; }, // 登录 login() { console.log("手机号: " + this.phone + "密码: " + this.pwd); }
这里能够正常获取输入框的值了，就可以在点击按钮后将值传给后台服务器，进行登录的校验。按钮的点击方法通过onclick进行绑定。网站模板
// 登录 login() { fetch.fetch({ url: this.url + "/litemall/user/login?phone=" + this.phone + "&pwd=" + this.pwd, responseType: "json", success: res => { let data = JSON.parse(res.data); console.info(JSON.stringify(data)); if (0 != data.code) { prompt.showToast({ message: data.msg, duration: 3000 }) } else { let userInfo = data.data; userInfo.age = this.getAge(userInfo.birthday); this.userInfo = userInfo; this.$element("loginDialog").close(); } } }) }登录失败，用提示框提示用户失败原因：
登录成功，用户信息赋值给页面并关闭dialog：
这里日志的打印需要使用JSON.stringify()，否则会打印"object"。
input组件和button组件都提供了丰富的type可供选择，具体可参考官方文档。
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673
css渲染层：
.loginDialog { width: 80%; height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .formItem { width: 100%; height: 100px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .formItem>image { width: 70px; height: 70px; margin: 0 10px 0 10px; } input { flex: 1; } .inputBtn { width: 200px; height: 70px; }2、注册模块
注册模块同样使用dialog弹窗，内容比登录要更丰富一些：
hml视图层：
<dialog id="registerDialog"> <div class="registerDialog"> <div class="formItem"> <image src="{ { phone ? (imgUrl + phone.png) : (imgUrl + phone1.png) }}"></image> <input type="number" placeholder="请输入手机号" onchange="inputPhone"></input> </div> <div class="formItem"> <image src="{ { pwd ? (imgUrl + password.png) : (imgUrl + password1.png) }}"></image> <input type="password" placeholder="请输入密码" onchange="inputPwd"></input> </div> <div class="formItem"> <image src="{ { username ? (imgUrl + username.png) : (imgUrl + username1.png) }}"></image> <input type="text" placeholder="请输入姓名" onchange="inputUsername"></input> </div> <div class="formItem"> <image src="{ { nickname ? (imgUrl + nickname.png) : (imgUrl + nickname1.png) }}"></image> <input type="text" placeholder="请输入昵称" onchange="inputNickname"></input> </div> <div class="formItem"> <image src="{ { genderVal ? (imgUrl + gender.png) : (imgUrl + gender1.png) }}"></image> <picker type="text" range="{ { genders }}" onchange="chooseGender">{ { gender }}</picker> </div> <div class="formItem"> <image src="{ { birthdayVal ? (imgUrl + birthday.png) : (imgUrl + birthday1.png) }}"></image> <picker type="date" start="1900-1-1" selected="2000-1-1" onchange="chooseBirthday">{ { birthday }}</picker> </div> <button class="inputBtn" onclick="register">注册</button> </div> </dialog>上面四个依然是input输入框，随后两个使用了picker选择框组件。需注意，选择框组件标记中需放置文本内容，通过点击这里的文本在页面下方弹出选择框。
type="text"是文本选择框，通过range属性绑定一个字符串数组，效果如下：
onchange属性绑定选择一项后的处理方法，e.newValue是选项值，e.newSelected是选项下标。
性别选择框js逻辑层代码：
export default { data: { ... gender: "点击选择性别", genderVal: "", genders: [保密, 男, 女], ... }, ... // 性别选择器 chooseGender(e) { this.gender = e.newValue; this.genderVal = e.newSelected; }, ... }type="date"是日期选择器，可以通过属性指定开始、结束、当前日期，通过onchange绑定选择后的处理方法。源码库效果如下：
e.year/month/day分别为选择的年/月/日，注意month比实际月份小1。
生日选择框js逻辑层：
export default { data: { ... birthday: "点击选择生日", birthdayVal: "" }, ... // 生日选择器 chooseBirthday(e) { let month = (e.month + 1) + ""; if (month.length == 1) { month = "0" + month; } let day = e.day + ""; if (day.length == 1) { day = "0" + day; } let birthday = e.year + "-" + month + "-" + day; this.birthday = birthday; this.birthdayVal = birthday; }, ... }
这里开发者工具有一个bug，type="date"在提示时错误拼写成了"data"。
选择器还有time, datetime, multi-text三种，鸿蒙的封装确实很好看好用。
注册的方法：
// 注册 register() { fetch.fetch({ url: this.url + "/litemall/user/register", method: "POST", data: { username: this.username, password: this.pwd, gender: this.genderVal, birthday: this.birthdayVal, nickname: this.nickname, mobile: this.phone }, header: { "Content-Type": "application/json;charset=UTF-8" }, responseType: "json", success: res => { let data = JSON.parse(res.data); console.info(JSON.stringify(data)); if (0 != data.code) { prompt.showToast({ message: data.msg, duration: 3000 }); } else { prompt.showToast({ message: "注册成功", duration: 3000 }); this.$element("registerDialog").close(); } } }) }还需要注意，如果使用fetch发送请求，且data给的是一个对象时，请求头的Content-Type自动设置为application/x-www-form-urlencoded。如果服务器接收json数据，则需要设置请求头，否则会报如下错误。
Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type application/x-www-form-urlencoded;charset=UTF-8 not supported]注册一下：
想了解更多内容，请访问：
和华为官方合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#zz
