从微信小程序到鸿蒙JS开发-表单组件&注册登录模块
想了解更多内容，请访问：
成都创新互联专业提供达州电信机房服务，为用户提供五星数据中心、电信、双线接入解决方案，用户可自行在线购买达州电信机房服务，并享受7*24小时金牌售后服务。
和华为官方合作共建的鸿蒙技术社区
https://harmonyos./#zz
牛年将至，祝大家行行无bug，页页so easy～
在微信小程序中，提供了form组件，可以将input、picker、slider、button等全部放在form中，并设置name属性实现类似html的表单提交功能。
鸿蒙js目前是没有form组件的，因此我们需要在提交时手动获取输入框、选择框等的值，自行构建数据对象。
1、登录模块
这里接着上一篇，通过dialog组件实现了模态登录和注册的窗口。登录窗口的效果如下：
每一行中，放置图标和input输入框。input使用的是默认样式，看起来还是很清爽的。
hml视图层：
-
-
-
-
-
登录
手机号的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视图层：
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ gender }}
-
-
-
- {{ birthday }}
-
- 注册
-
-
上面四个依然是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./#zz
当前名称：从微信小程序到鸿蒙JS开发-表单组件&注册登录模块
标题来源：http://www.shufengxianlan.com/qtweb/news18/290868.html
网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
广告
![]()
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
创新互联