1、menu弹出菜单
这是微信小程序没有的一个组件，提供了一个可唤起的轻量级弹出菜单。menu的子组件为option。
"userMenu" onselected="menuSelect"> - <option value="login">登录option>
- <option value="register">注册option>
-
在hml中写好菜单，但这时启动app是不会显示出来的，且不会占用任何页面空间。
menu需要在方法中被唤起，因此需要设置id属性。这里通过点击“点击登录/注册“文本框唤起菜单：
"{{ !userInfo }}" onclick="showUserMenu" class="info_hint"> - 点击登录/注册
-
- 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
需要用户确认操作的功能十分常用，比如是否删除，是否下单等。在微信小程序中采用的是wx.showModal()，弹窗内容、按钮内容和颜色都可以自定义，事件在success函数中进行捕获：
- wx.showModal({
- title: "提示",
- content: "确认删除吗？",
- confirmColor: "#e20a0b",
- confirmText: "对，删了它",
- cancelColor: "#777777",
- cancelText: "再考虑一下",
- success: res => {
- if(res.confirm) {
- console.log("删除成功！");
- } else if(res.cancel) {
- console.log("取消删除操作。")
- }
- }
- })
在鸿蒙中，prompt模块的showDialog()方法提供了弹出对话框：
- prompt.showDialog({
- title: "操作提示",
- message: "确认删除吗？",
- buttons: [
- {
- text: "我要删除",
- color: "#e20a0b"
- },
- {
- text: "取消操作",
- color: "#777777"
- }
- ],
- success: res => {
- prompt.showToast({
- message: "点击了第" + res.index + "个按钮"
- })
- }
- })
对话框也是在底部弹出的，且按钮可以自行定义。点击按钮后，success方法会获取按钮的索引值，根据索引进行业务逻辑的编写。
想要设置三个按钮也是可以的，这个功能微信小程序的showModal()是没有的。
- prompt.showDialog({
- title: "操作提示",
- message: "确认删除吗？",
- buttons: [
- {
- text: "我要删除",
- color: "#e20a0b"
- },
- {
- text: "取消操作",
- color: "#777777"
- },
- {
- text: "附加按钮",
- color: "#333333"
- }
- ],
- success: res => {
- prompt.showToast({
- message: "点击了第" + res.index + "个按钮"
- })
- }
- })
4、dialog对话框组件
prompt.showDialog()只能弹出具有提示文字和按钮的对话框，如果需要更丰富的模态对话框功能，鸿蒙还提供了dialog组件，这个组件在微信小程序中也是没有的。和menu一样，写在hml中的dialog并不会显示，也不会占用页面空间，需要通过id在方法中被唤起。
"loginDialog"> -
"loginDialog" > -
"formItem" > -
"{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}" > -
"phoneInput" type="number" placeholder="请输入手机号" onchange="inputPhone"> -
