当前位置: 首页 > 科技观察

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

时间:2023-03-17 10:07:07 科技观察

更多内容请访问:与华为共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz牛年已至临近,祝大家一路顺风无BUG,每一页都是那么轻松~在微信小程序中,提供了一个表单组件,可以在表单中放置input、picker、slider、button等,并设置名称属性实现类似HTML表单提交的功能。鸿蒙js目前没有表单组件,所以需要我们在提交时手动获取输入框、选择框等的值,自己构建数据对象。1、登录模块沿用上一个,通过对话框组件实现模态登录注册窗口。登录窗口效果如下:每一行放置图标和输入框。输入法使用默认样式,看起来还是很清爽的。Hml视图层:

imagesrc="{{pwd?(imgUrl+'password.png'):(imgUrl+'password1.png')}}">
login
输入设置type="number"手机号码,在获得焦点后,键盘会自动弹出为数字键盘。在密码框type="password"中,会弹出一个普通的键盘,输入的字符会变成点。您也可以点击右侧的眼睛图标查看密码内容。一开始使用input的时候,尝试用this.$element("id").value来获取,但是这是不行的。//登录login(){prompt.showToast({message:"Phonenumber:"+this.$element("phoneInput").value+",password:"+this.$element("pwdInput").value,duration:5000})}所以需要用input的onchange属性绑定值变化的事件,通过e.value获取变化的值,赋值给data中的变量。对了,今天突然发现一个查看控制台打印日志的方法。您需要打开底部的“HiLog”视图,搜索“appLog”进行查看。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=>{letdata=JSON.parse(res.data);console.info(JSON.stringify(data));if(0!=data.code){prompt.showToast({message:data.msg,duration:3000})}else{letuserInfo=data.data;userInfo.age=this.getAge(userInfo.birthday);this.userInfo=userInfo;this.$element("loginDialog").close();}}})}登录失败,用提示框提示用户失败原因:登录成功,页面赋值用户信息,关闭对话框:这里需要JSON.stringify()打印日志,否则打印“object”.输入组件和按钮组件都提供了丰富的类型供选择。详情请参考官方文档。https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673css渲染层:.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:010px010px;}input{flex:1;}.inputBtn{width:200px;height:70px;}2.注册模块也使用dialogPop-up窗口,内容比login更丰富:hml视图层:
{{gender}}{{birthday}}注册上面四个还是input输入框,后面两个用的是picker选择框组件,注意文本内容需要放在选择框组件标记处,底部会弹出选择框点击此处文本进入页面,type="text"为文本选择框,通过range属性绑定字符串数组,效果如下:onchange属性绑定选中某项后的处理方法,e.newValue为选项值,e.newSelected为选项下标。性别选择框js逻辑层代码:exportdefault{data:{...gender:"点击选择性别",genderVal:"",genders:['confidential','male','female'],...},...//性别选择器chooseGender(e){this.gender=e.newValue;this.genderVal=e.newSelected;},...}type="date"是一个日期选择器,可以指定开始、结束、当前日期、通过onchange绑定选择后的处理方式。效果如下:e.year/month/day分别为选中的年/月/日。请注意,月份比实际月份小1。生日选择框js逻辑层:exportdefault{data:{...birthday:"点击选择生日",birthdayVal:""},...//生日选择器chooseBirthday(e){letmonth=(e.month+1)+"";if(month.length==1){month="0"+month;}letday=e.day+"";if(day.length==1){day="0"+day;}letbirthday=e.year+"-"+month+"-"+day;this.birthday=birthday;this.birthdayVal=birthday;},...}这里开发者工具有bug,type="date"正在提示拼写错误的“数据”。有三种类型的选择器:时间、日期时间和多文本。鸿蒙的包装确实好看好用。注册方法://registerregister(){fetch.fetch({url:this.url+"/litemall/user/register",method:"POST",data:{username:this.username,password:this.pwd,性别:this.genderVal,生日:this.birthdayVal,昵称:this.nickname,手机:this.phone},header:{“Content-Type”:“application/json;charset=UTF-8”},responseType:“json",success:res=>{letdata=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发送请求,数据是对象,请求头的Content-Type会自动设置为application/x-www-form-urlencoded。如果服务端收到的是json数据,需要设置请求头,否则会报如下错误。已解决[org.springframework.web.HttpMediaTypeNotSupportedException:Contenttype'application/x-www-form-urlencoded;charset=UTF-8'notsupported]注册:更多信息请访问:鸿蒙与华为官方技术社区共建https://harmonyos.51cto.com/#zz