|
|
|
|
公众号矩阵

从微信小程序到鸿蒙JS开发-表单组件&注册登录模块

文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz

作者:Chris来源:鸿蒙|2021-02-23 09:52

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

牛年将至,祝大家行行无bug,页页so easy~

在微信小程序中,提供了form组件,可以将input、picker、slider、button等全部放在form中,并设置name属性实现类似html的表单提交功能。

鸿蒙js目前是没有form组件的,因此我们需要在提交时手动获取输入框、选择框等的值,自行构建数据对象。

1、登录模块

这里接着上一篇,通过dialog组件实现了模态登录和注册的窗口。登录窗口的效果如下:

每一行中,放置图标和input输入框。input使用的是默认样式,看起来还是很清爽的。

hml视图层:

  1. <dialog id="loginDialog"
  2.                  <div class="loginDialog"
  3.                      <div class="formItem"
  4.                          <image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image> 
  5.                          <input id="phoneInput" type="number" placeholder="请输入手机号" onchange="inputPhone"></input> 
  6.                      </div> 
  7.                      <div class="formItem"
  8.                          <image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image> 
  9.                          <input id="pwdInput" type="password" placeholder="请输入密码" onchange="inputPwd"></input> 
  10.                      </div> 
  11.                      <button class="inputBtn" onclick="login">登录</button> 
  12.                  </div> 
  13.              </dialog> 

手机号的input设置type="number",在获取焦点后键盘自动弹出为数字键盘。密码框type="password",弹出普通键盘,且输入的字符会变为圆点,也可点击右侧眼睛图标查看密码内容。

在最开始使用input时,尝试使用this.$element("id").value获取,但这样是获取不到的。

  1. // 登录 
  2.  login() { 
  3.      prompt.showToast({ 
  4.          message: "手机号: " + this.$element("phoneInput").value + 
  5.          ", 密码: " + this.$element("pwdInput").value, 
  6.          duration: 5000 
  7.      }) 
  8.  } 

因此需要使用input的onchange属性绑定值改变的事件,通过e.value取到改变后的值,并赋给data中的变量。

顺便提一下,今天突然找到了console打印日志的查看方式。需在最下方打开"HiLog"视图,搜索"app Log"后即可查看。console.log()的内容需设置日志等级"debug",console.info()则在"info"等级即可查看。

  1. // 手机号输入框 
  2.  inputPhone(e) { 
  3.      this.phone = e.value; 
  4.  }, 
  5.  // 密码输入框 
  6.  inputPwd(e) { 
  7.      this.pwd = e.value; 
  8.  }, 
  9.  // 登录 
  10.  login() { 
  11.      console.log("手机号: " + this.phone + "密码: " + this.pwd); 
  12.  } 

这里能够正常获取输入框的值了,就可以在点击按钮后将值传给后台服务器,进行登录的校验。按钮的点击方法通过onclick进行绑定。

  1. // 登录 
  2.   login() { 
  3.       fetch.fetch({ 
  4.           url: this.url + "/litemall/user/login?phone=" + this.phone + "&pwd=" + this.pwd, 
  5.           responseType: "json"
  6.           success: res => { 
  7.               let data = JSON.parse(res.data); 
  8.               console.info(JSON.stringify(data)); 
  9.               if (0 != data.code) { 
  10.                   prompt.showToast({ 
  11.                       message: data.msg, 
  12.                       duration: 3000 
  13.                   }) 
  14.               } else { 
  15.                   let userInfo = data.data; 
  16.                   userInfo.age = this.getAge(userInfo.birthday); 
  17.                   this.userInfo = userInfo; 
  18.                   this.$element("loginDialog").close(); 
  19.               } 
  20.           } 
  21.       }) 
  22.   } 

登录失败,用提示框提示用户失败原因:

登录成功,用户信息赋值给页面并关闭dialog:

这里日志的打印需要使用JSON.stringify(),否则会打印"object"。

input组件和button组件都提供了丰富的type可供选择,具体可参考官方文档。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673

css渲染层:

  1. .loginDialog { 
  2.     width: 80%; 
  3.     height: 400px; 
  4.     display: flex; 
  5.     flex-direction: column
  6.     align-items: center; 
  7.     justify-content: center; 
  8. .formItem { 
  9.     width: 100%; 
  10.     height: 100px; 
  11.     display: flex; 
  12.     align-items: center; 
  13.     justify-content: space-between
  14.     margin-bottom: 20px; 
  15. .formItem>image { 
  16.     width: 70px; 
  17.     height: 70px; 
  18.     margin: 0 10px 0 10px; 
  19. input { 
  20.     flex: 1; 
  21. .inputBtn { 
  22.     width: 200px; 
  23.     height: 70px; 

2、注册模块

注册模块同样使用dialog弹窗,内容比登录要更丰富一些:

hml视图层:

  1. <dialog id="registerDialog"
  2.                  <div class="registerDialog"
  3.                      <div class="formItem"
  4.                          <image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image> 
  5.                          <input type="number" placeholder="请输入手机号" onchange="inputPhone"></input> 
  6.                      </div> 
  7.                      <div class="formItem"
  8.                          <image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image> 
  9.                          <input type="password" placeholder="请输入密码" onchange="inputPwd"></input> 
  10.                      </div> 
  11.                      <div class="formItem"
  12.                          <image src="{{ username ? (imgUrl + 'username.png') : (imgUrl + 'username1.png') }}"></image> 
  13.                          <input type="text" placeholder="请输入姓名" onchange="inputUsername"></input> 
  14.                      </div> 
  15.                      <div class="formItem"
  16.                          <image src="{{ nickname ? (imgUrl + 'nickname.png') : (imgUrl + 'nickname1.png') }}"></image> 
  17.                          <input type="text" placeholder="请输入昵称" onchange="inputNickname"></input> 
  18.                      </div> 
  19.                      <div class="formItem"
  20.                          <image src="{{ genderVal ? (imgUrl + 'gender.png') : (imgUrl + 'gender1.png') }}"></image> 
  21.                          <picker type="text" range="{{ genders }}" onchange="chooseGender">{{ gender }}</picker> 
  22.                      </div> 
  23.                      <div class="formItem"
  24.                          <image src="{{ birthdayVal ? (imgUrl + 'birthday.png') : (imgUrl + 'birthday1.png') }}"></image> 
  25.                          <picker type="date" start="1900-1-1" selected="2000-1-1" onchange="chooseBirthday">{{ birthday }}</picker> 
  26.                      </div> 
  27.                      <button class="inputBtn" onclick="register">注册</button> 
  28.                  </div> 
  29.              </dialog> 

上面四个依然是input输入框,随后两个使用了picker选择框组件。需注意,选择框组件标记中需放置文本内容,通过点击这里的文本在页面下方弹出选择框。

type="text"是文本选择框,通过range属性绑定一个字符串数组,效果如下:

onchange属性绑定选择一项后的处理方法,e.newValue是选项值,e.newSelected是选项下标。

性别选择框js逻辑层代码:

  1. export default { 
  2.     data: { 
  3.         ... 
  4.         gender: "点击选择性别"
  5.         genderVal: ""
  6.         genders: ['保密''男''女'], 
  7.         ... 
  8.     }, 
  9.     ... 
  10.     // 性别选择器 
  11.     chooseGender(e) { 
  12.         this.gender = e.newValue; 
  13.         this.genderVal = e.newSelected; 
  14.     }, 
  15.     ... 

type="date"是日期选择器,可以通过属性指定开始、结束、当前日期,通过onchange绑定选择后的处理方法。效果如下:

e.year/month/day分别为选择的年/月/日,注意month比实际月份小1。

生日选择框js逻辑层:

  1. export default { 
  2.     data: { 
  3.        ... 
  4.         birthday: "点击选择生日"
  5.         birthdayVal: "" 
  6.     }, 
  7.     ... 
  8.     // 生日选择器 
  9.     chooseBirthday(e) { 
  10.         let month = (e.month + 1) + ""
  11.         if (month.length == 1) { 
  12.             month = "0" + month
  13.         } 
  14.         let day = e.day + ""
  15.         if (day.length == 1) { 
  16.             day = "0" + day
  17.         } 
  18.         let birthday = e.year + "-" + month + "-" + day
  19.         this.birthday = birthday; 
  20.         this.birthdayVal = birthday; 
  21.     }, 
  22.     ... 

这里开发者工具有一个bug,type="date"在提示时错误拼写成了"data"。

选择器还有time, datetime, multi-text三种,鸿蒙的封装确实很好看好用。

注册的方法:

  1. // 注册 
  2.  register() { 
  3.      fetch.fetch({ 
  4.          url: this.url + "/litemall/user/register"
  5.          method: "POST"
  6.          data: { 
  7.              username: this.username, 
  8.              password: this.pwd, 
  9.              gender: this.genderVal, 
  10.              birthday: this.birthdayVal, 
  11.              nickname: this.nickname, 
  12.              mobile: this.phone 
  13.          }, 
  14.          header: { 
  15.              "Content-Type""application/json;charset=UTF-8" 
  16.          }, 
  17.          responseType: "json"
  18.          success: res => { 
  19.              let data = JSON.parse(res.data); 
  20.              console.info(JSON.stringify(data)); 
  21.              if (0 != data.code) { 
  22.                  prompt.showToast({ 
  23.                      message: data.msg, 
  24.                      duration: 3000 
  25.                  }); 
  26.              } else { 
  27.                  prompt.showToast({ 
  28.                      message: "注册成功"
  29.                      duration: 3000 
  30.                  }); 
  31.                  this.$element("registerDialog").close(); 
  32.              } 
  33.          } 
  34.      }) 
  35.  } 

还需要注意,如果使用fetch发送请求,且data给的是一个对象时,请求头的Content-Type自动设置为application/x-www-form-urlencoded。如果服务器接收json数据,则需要设置请求头,否则会报如下错误。

  1. Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported] 

注册一下:

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

【编辑推荐】

  1. 为什么你总是学不会Python,入门Python的4大陷阱
  2. 厌倦了默认系统字体?这是在Windows 10上进行更改的方法
  3. 5G手机热销之前,要先解决这些问题
  4. 手把手教你用Python爬取百度搜索结果并保存
  5. 揭秘登上2021春晚舞台的黑科技-XR技术
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

6人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

33人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

220人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微