從微信小程序到鴻蒙JS開發(fā)-menu&toast&dialog

作者：Chris 2021-02-22 14:56:55

開發(fā)

文章由鴻蒙社區(qū)產(chǎn)出，想要了解更多內(nèi)容請前往：51CTO和華為官方戰(zhàn)略合作共建的鴻蒙技術(shù)社區(qū)https://harmonyos.51cto.com/#zz

[[382941]]

想了解更多內(nèi)容，請?jiān)L問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com/#zz

1、menu彈出菜單

這是微信小程序沒有的一個(gè)組件，提供了一個(gè)可喚起的輕量級(jí)彈出菜單。menu的子組件為option。

<menu id="userMenu" onselected="menuSelect"> 
    <option value="login">登錄</option> 
    <option value="register">注冊</option> 
</menu>

在hml中寫好菜單，但這時(shí)啟動(dòng)app是不會(huì)顯示出來的，且不會(huì)占用任何頁面空間。

menu需要在方法中被喚起，因此需要設(shè)置id屬性。這里通過點(diǎn)擊“點(diǎn)擊登錄/注冊“文本框喚起菜單：

<text if="{{ !userInfo }}" onclick="showUserMenu" class="info_hint"> 
    點(diǎn)擊登錄/注冊 
</text>

showUserMenu() { 
    this.$element("userMenu").show(); 
}

使用無參的show()方法，菜單在頁面的左上角被喚起彈出。

show方法還有一個(gè)重載方法，可以設(shè)置菜單彈出的x軸和y軸偏移量。x和y需要給數(shù)值類型，單位為px。

showUserMenu() { 
    this.$element("userMenu").show({ 
        x: 100, 
        y: 100 
    }); 
}

菜單項(xiàng)的選中事件通過onselect屬性綁定，event.value即為選中的option的value屬性。

menuSelect(event) { 
    let value = event.value; 
    prompt.showToast({ 
        message: "點(diǎn)擊菜單項(xiàng)的值為" + value, 
        duration: 3000 
    }) 
}

option一定要設(shè)置value屬性，否則編譯不通過。value重復(fù)倒是不會(huì)報(bào)錯(cuò)，但這樣無法判斷選中了哪一個(gè)菜單項(xiàng)，不建議。

2、Toast提示框

鴻蒙js開發(fā)模式至今無法通過console.log()等方法打印日志(mac系統(tǒng)如此)，但在寫程序時(shí)不免要進(jìn)行調(diào)試，提示框就是一種很好的方法。

在js文件中引入prompt模塊：

import prompt from '@system.prompt';

調(diào)用prompt.showToast()彈出提示框：

prompt.showToast({ 
    message: "提示信息", 
    duration: 3000 
});

這個(gè)方法只能傳遞message和duration兩個(gè)參數(shù)，彈出位置是在頁面接近最下方中間位置，而且字有點(diǎn)小。

源碼注釋中說明，duration取值是1500到10000，如果不在范圍中會(huì)自動(dòng)更改為邊界值。

再看看微信小程序的Toast，使用wx.showToast彈出。

wx.showToast({ 
    title: '提示信息', 
    duration: 3000 
})

彈出位置在頁面正中，且可以切換預(yù)置，或自定義圖標(biāo)。

wx.showToast({ 
    title: '常回家看看', 
    duration: 3000, 
    icon: 'none', 
    image: "/icon/index1.png" 
})

就是這個(gè)圖標(biāo)位置怪怪的，但個(gè)人感覺這種提示彈窗更加明顯，可擴(kuò)展性也更強(qiáng)。

3、prompt模塊的對(duì)話框dialog

需要用戶確認(rèn)操作的功能十分常用，比如是否刪除，是否下單等。在微信小程序中采用的是wx.showModal()，彈窗內(nèi)容、按鈕內(nèi)容和顏色都可以自定義，事件在success函數(shù)中進(jìn)行捕獲：

wx.showModal({ 
  title: "提示", 
  content: "確認(rèn)刪除嗎？", 
  confirmColor: "#e20a0b", 
  confirmText: "對(duì)，刪了它", 
  cancelColor: "#777777", 
  cancelText: "再考慮一下", 
  success: res => { 
    if(res.confirm) { 
      console.log("刪除成功！"); 
    } else if(res.cancel) { 
      console.log("取消刪除操作。") 
    } 
  } 
})

在鴻蒙中，prompt模塊的showDialog()方法提供了彈出對(duì)話框：

prompt.showDialog({ 
     title: "操作提示", 
     message: "確認(rèn)刪除嗎？", 
     buttons: [ 
         { 
             text: "我要?jiǎng)h除", 
             color: "#e20a0b" 
         }, 
         { 
             text: "取消操作", 
             color: "#777777" 
         } 
     ], 
     success: res => { 
         prompt.showToast({ 
             message: "點(diǎn)擊了第" + res.index + "個(gè)按鈕" 
         }) 
     } 
 })

對(duì)話框也是在底部彈出的，且按鈕可以自行定義。點(diǎn)擊按鈕后，success方法會(huì)獲取按鈕的索引值，根據(jù)索引進(jìn)行業(yè)務(wù)邏輯的編寫。

想要設(shè)置三個(gè)按鈕也是可以的，這個(gè)功能微信小程序的showModal()是沒有的。

prompt.showDialog({ 
        title: "操作提示", 
        message: "確認(rèn)刪除嗎？", 
        buttons: [ 
            { 
                text: "我要?jiǎng)h除", 
                color: "#e20a0b" 
            }, 
            { 
                text: "取消操作", 
                color: "#777777" 
            }, 
            { 
                text: "附加按鈕", 
                color: "#333333" 
            } 
        ], 
        success: res => { 
            prompt.showToast({ 
                message: "點(diǎn)擊了第" + res.index + "個(gè)按鈕" 
            }) 
        } 
    })

4、dialog對(duì)話框組件

prompt.showDialog()只能彈出具有提示文字和按鈕的對(duì)話框，如果需要更豐富的模態(tài)對(duì)話框功能，鴻蒙還提供了dialog組件，這個(gè)組件在微信小程序中也是沒有的。和menu一樣，寫在hml中的dialog并不會(huì)顯示，也不會(huì)占用頁面空間，需要通過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="請輸入手機(jī)號(hào)" 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>

這里需注意，官方文檔中說的“支持單個(gè)子組件”的意思是，dialog中只能有一個(gè)直接子組件，即需要用一個(gè)div將內(nèi)容套起來。

同樣地，根據(jù)id找到元素，使用show()方法喚起對(duì)話框。對(duì)話框的show()方法無重載，會(huì)在頁面底部彈出。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()方法關(guān)閉它。

this.$element("registerDialog").close();

附上本頁面的代碼，后臺(tái)功能自己搭建了Spring Boot服務(wù)器進(jìn)行交互。下篇將講解表單組件：

<!-- 我的 --> 
  <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"> 
                  點(diǎn)擊登錄/注冊 
              </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="請輸入手機(jī)號(hào)" 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(); 
     } 
 }, 
 // 手機(jī)號(hào)輸入框 
 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(); 
             } 
         } 
     }) 
 }