目錄：css
一、menu彈出菜單json
二、Toast提示框小程序
三、prompt模塊的對話框dialog微信小程序
一、menu彈出菜單微信
這是微信小程序沒有的一個組件，提供了一個可喚起的輕量級彈出菜單。menu的子組件爲option。app
<menu id="userMenu" onselected="menuSelect">
<option value="login">登陸</option>
<option value="register">註冊</option>
</menu>
在hml中寫好菜單，但這時啓動app是不會顯示出來的，且不會佔用任何頁面空間。函數
menu須要在方法中被喚起，所以須要設置id屬性。這裏經過點擊「點擊登陸/註冊「文本框喚起菜單：post
<text if="{{ !userInfo }}" onclick="showUserMenu" class="info_hint">
點擊登陸/註冊
</text>
showUserMenu() {
this.$element("userMenu").show();
}
使用無參的show()方法，菜單在頁面的左上角被喚起彈出。fetch
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重複卻是不會報錯，但這樣沒法判斷選中了哪個菜單項，不建議。
二、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"
})
就是這個圖標位置怪怪的，但我的感受這種提示彈窗更加明顯，可擴展性也更強。
三、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 + "個按鈕"
})
}
})
三、dialog對話框組件
prompt.showDialog()只能彈出具備提示文字和按鈕的對話框，若是須要更豐富的模態對話框功能，鴻蒙還提供了dialog組件，這個組件在微信小程序中也是沒有的。和menu同樣，寫在hml中的dialog並不會顯示，也不會佔用頁面空間，須要經過id在方法中被喚起。
<dialog id="loginDialog">
<div class="loginDialog">
<div class="formItem">
<image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input id="phoneInput" type="number" placeholder="請輸入手機號" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image>
<input id="pwdInput" type="password" placeholder="請輸入密碼" onchange="inputPwd"></input>
</div>
<button class="inputBtn" onclick="login">登陸</button>
</div>
</dialog>
這裏需注意，官方文檔中說的「支持單個子組件」的意思是，dialog中只能有一個直接子組件，即須要用一個div將內容套起來。
一樣地，根據id找到元素，使用show()方法喚起對話框。對話框的show()方法無重載，會在頁面底部彈出。dialog的大小取決於子組件div的大小，div給樣式便可。
menuSelect(event) {
let value = event.value;
if ("login" == value) {
this.phone = "";
this.pwd = "";
this.$element("loginDialog").show();
} else if ("register" == value) {
this.phone = "";
this.pwd = "";
this.$element("registerDialog").show();
}
},
可用close()方法關閉它。
this.$element("registerDialog").close();
附上本頁面的代碼，後臺功能本身搭建了Spring Boot服務器進行交互。下篇將講解表單組件：
hml：
<!-- 個人 -->
<div class="myPage">
<div class="userInfo">
<image src="{{ userInfo && userInfo.avatar != '0' ? userInfo.avatar : (imgUrl + 'user.png')}}"></image>
<div class="info_desc">
<text if="{{ !userInfo }}" onclick="showUserMenu" class="info_hint">
點擊登陸/註冊
</text>
<text if="{{ userInfo }}" class="info_name">
{{ userInfo.nickname ? userInfo.nickname : userInfo.username }}
</text>
<text if="{{ userInfo }}" class="info_detail">
{{ userInfo.age }} {{ userInfo.gender == 1 ? '男' : (userInfo.gender == 2 ? '女' : '性別保密') }}
</text>
</div>
</div>
<menu id="userMenu" onselected="menuSelect">
<option value="login">登陸</option>
<option value="register">註冊</option>
</menu>
<dialog id="loginDialog">
<div class="loginDialog">
<div class="formItem">
<image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input id="phoneInput" type="number" placeholder="請輸入手機號" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image>
<input id="pwdInput" type="password" placeholder="請輸入密碼" onchange="inputPwd"></input>
</div>
<button class="inputBtn" onclick="login">登陸</button>
</div>
</dialog>
</div>
<!-- 個人end -->
css：
/*個人*/
.userInfo {
width: 92%;
height: 240px;
margin: 20px 0 20px 0;
border-radius: 30px;
box-shadow: 5px 5px 15px #bbbbbb;
background-color: #eeeeee;
display: flex;
align-items: center;
}
.userInfo>image {
margin: 0 40px 0 40px;
width: 160px;
height: 160px;
border-radius: 90px;
object-fit: 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: 0 10px 0 10px;
}
input {
flex: 1;
}
.inputBtn {
width: 200px;
height: 70px;
}
js：（省略data部分）
// 彈出菜單
showUserMenu() {
this.$element("userMenu").show();
},
// 菜單選中
menuSelect(event) {
let value = event.value;
if ("login" == value) {
this.phone = "";
this.pwd = "";
this.$element("loginDialog").show();
} else if ("register" == value) {
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",
success: res => {
let data = JSON.parse(res.data);
if (0 != data.code) {
prompt.showToast({
message: data.msg,
duration: 3000
})
} else {
this.userInfo = data.data;
this.$element("loginDialog").close();
}
}
})
}
登陸成功效果：
做者：Chris.
想了解更多內容，請訪問： 51CTO和華爲官方戰略合做共建的鴻蒙技術社區https://harmonyos.51cto.com