从微信小程序到鸿蒙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视图层: