1、menu弹出菜单
这是微信小程序没有的一个组件,提供了一个可唤起的轻量级弹出菜单。menu的子组件为option。
<menu onselected="menuSelect"> <option value="login">登录</option> <option value="register">注册</option> </menu>在hml中写好菜单,但这时启动app是不会显示出来的,且不会占用任何页面空间。
menu需要在方法中被唤起,因此需要设置id属性。这里通过点击“点击登录/注册“文本框唤起菜单:
<text if="{{ !userInfo }}"> 点击登录/注册 </text> showUserMenu() { this.$element("userMenu").show(); }使用无参的show()方法,菜单在页面的左上角被唤起弹出。
show方法还有一个重载方法,可以设置菜单弹出的x轴和y轴偏移量。x和y需要给数值类型,单位为px。
showUserMenu() { this.$element("userMenu").show({ x: 100, y: 100 }); }菜单项的选中事件通过onselect属性绑定,event.value即为选中的option的value属性。
menuSelect(event) { let value = event.value; prompt.showToast({ message: "点击菜单项的值为" + value, duration: 3000 }) }option一定要设置value属性,否则编译不通过。value重复倒是不会报错,但这样无法判断选中了哪一个菜单项,不建议。
2、Toast提示框
鸿蒙js开发模式至今无法通过console.log()等方法打印日志(mac系统如此),但在写程序时不免要进行调试,提示框就是一种很好的方法。
在js文件中引入prompt模块:
import prompt from \'@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、prompt模块的对话框dialog