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

从微信小程序到鸿蒙JS开发-menu&toast&dialog

时间:2023-03-15 23:46:01 科技观察

更多内容请访问:与华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com/#zz1、menu弹出菜单这是一个组件,微信小程序没有,提供了轻量级的弹出式菜单,可以唤起。菜单的子组件是选项。LoginRegister用HML写菜单,不过此时启动应用程序不会显示,也不会占用任何页面空间。方法中需要调用菜单,所以需要设置id属性。此处通过单击“单击登录/注册”文本框调用菜单:单击以登录/注册显示用户菜单(){这个。$element("userMenu").show();}使用不带参数的show()方法,菜单会被唤起并在页面左上角弹出。show方法还有一个重载方法,可以设置弹出菜单的x轴和y轴偏移量。x和y需要是数值类型,单位是px。showUserMenu(){this.$element("userMenu").show({x:100,y:100});}菜单项的选中事件由onselect属性绑定,event.value为value属性所选选项的。menuSelect(event){letvalue=event.value;prompt.showToast({message:"点击的菜单项的值"+value,duration:3000})}option必须设置value属性,否则编译不通过。如果值重复,不会报错,但是无法判断选中的是哪个菜单项,所以不推荐。2.Toast提示框鸿蒙js开发模式一直无法通过console.log()等方法打印日志(mac系统就是这样),但是写程序难免要调试,提示框是一个好方法。在js文件中引入提示模块:importpromptfrom'@system.prompt';调用prompt.showToast()弹出提示框:prompt.showToast({message:"提示信息",duration:3000});该方法只能传递message和duration两个参数,弹窗位置在页面中下附近,字有点小。源码注释中说明duration的取值范围是1500到10000,不在范围内会自动改为边界值。再看微信小程序的Toast,使用wx.showToast弹出。wx.showToast({title:'提示信息',duration:3000})弹出位置在页面中间,可以切换预设或自定义图标。wx.showToast({title:'回家看看',duration:3000,icon:'none',image:"/icon/index1.png"})就是这个图标位置比较奇怪,不过个人感觉这样提示弹窗更明显,扩展性更强。3、提示模块的对话框要求用户确认的操作功能很常见,比如是否删除,是否下单等。在微信小程序中,使用了wx.showModal()。可以自定义弹窗内容、按钮内容和颜色,成功函数中捕获事件:wx.showModal({title:"Prompt",content:"ConfirmDeleteit?",confirmColor:"#e20a0b",confirmText:"对,删除",cancelColor:"#777777",cancelText:"再想想",success:res=>{if(res.confirm){console.log("删除成功!");}elseif(res.cancel){console.log("取消删除操作。")}}})在鸿蒙中,提示模块的showDialog()方法提供了弹出对话框:prompt.showDialog({title:"操作提示",message:"确定删除吗?",buttons:[{text:"我要删除",color:"#e20a0b"},{text:"取消操作",color:"#777777"}],success:res=>{prompt.showToast({message:"The"+res.index+"buttonwasclicked"})}})底部也弹出对话框,按钮即可自己定义。点击按钮后,success方法会获取按钮的索引值,根据索引编写业务逻辑。也可以设置三个按钮。微信小程序的showModal()没有这个功能。prompt.showDialog({title:"操作提示",message:"确定要删除吗?",buttons:[{text:"我要删除",color:"#e20a0b"},{text:"取消操作",color:"#777777"},{text:"Additionalbutton",color:"#333333"}],success:res=>{prompt.showToast({message:"“+res.index+”按钮clicked"})}})4、对话框组件prompt.showDialog()只能弹出带有提示文字和按钮的对话框。如果你需要更丰富的模态对话框功能,鸿蒙也提供了对话框组件。这个组件在微信上是没有小程序的。和菜单一样,html中写的dialog是不会显示的,也不会占用页面空间,需要在方法中通过id来唤起。

login
注意这里官方文档说“支持单个子组件”的意思dialog中只能有一个直接子组件,即需要用一个div来包裹内容。同理,通过id查找元素,使用show()方法调出对话框。对话框的show()方法没有重载,会在页面底部弹出。对话框的大小取决于子组件div的大小,div可以设置样式。menuSelect(event){letvalue=event.value;if("login"==value){this.phone="";this.pwd="";this.$element("loginDialog").show();}elseif("register"==value){this.phone="";this.pwd="";this.$element("registerDialog").show();}},可以用close()关闭方法。this.$element("registerDialog").close();附上本页面代码,后台函数搭建一个SpringBoot服务器进行交互。下篇文章将讲解表单组件:点击登录/注册{{userInfo.nickname?userInfo.nickname:userInfo.username}}{{userInfo.age}}{{userInfo.gender==1?'Male':(userInfo.gender==2?'Female':'GenderConfidential')}}
登录注册logincss:/*my*/.userInfo{width:92%;高度:240px;边距:20px020px0;边框半径:30px;框阴影:5px5px15px#bbbbbb;背景颜色:#eeeeee;显示:flex;对齐项目:中心;}.userInfo>图像{边距:040px040px;宽度:160像素;高度:160像素;边框半径:90像素;适合对象:contain;}.info_desc{height:200px;margin-right:20px;flex:1;display:flex;flex-direction:column;justify-content:center;}.info_hint{font-size:48px;font-weight:bold;color:#333333;}.info_name{font-size:40px;font-weight:600;height:100px;color:#333333;}.info_detail{font-size:34px;color:#666666;}.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{宽度:200px;height:70px;}js:(节省数据部分)//弹出菜单showUserMenu(){this.$element("userMenu").show();},//菜单选择中menuSelect(event){letvalue=event.value;if("login"==value){this.phone="";this.pwd="";this.$element("loginDialog").show();}elseif("register"==值){this.phone="";this.pwd="";//this.$element("registerDialog").show();}},//电话号码输入框inputPhone(e){this.phone=e.value;},//密码输入框inputPwd(e){this.pwd=e.value;},//登录login(){fetch.fetch({url:this.url+"/litemall/user/login?phone="+this.phone+"&pwd="+this.pwd,responseType:"json",成功:res=>{letdata=JSON.parse(res.data);if(0!=data.code){prompt.showToast({message:data.msg,duration:3000})}else{this.userInfo=data.data;this.$element("loginDialog").close();}}})}登录成功结果:更多信息请访问:鸿蒙科技与华为官方共建社区https://harmonyos.51cto.com/#zz