建站
咨詢
售后
建站咨詢
新聞中心
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
成都創(chuàng)新互聯(lián)專業(yè)提供達(dá)州電信機(jī)房服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購(gòu)買達(dá)州電信機(jī)房服務(wù)，并享受7*24小時(shí)金牌售后服務(wù)。
和華為官方合作共建的鴻蒙技術(shù)社區(qū)
https://harmonyos./#zz
牛年將至，祝大家行行無(wú)bug，頁(yè)頁(yè)so easy～
在微信小程序中，提供了form組件，可以將input、picker、slider、button等全部放在form中，并設(shè)置name屬性實(shí)現(xiàn)類似html的表單提交功能。
鴻蒙js目前是沒(méi)有form組件的，因此我們需要在提交時(shí)手動(dòng)獲取輸入框、選擇框等的值，自行構(gòu)建數(shù)據(jù)對(duì)象。
1、登錄模塊
這里接著上一篇，通過(guò)dialog組件實(shí)現(xiàn)了模態(tài)登錄和注冊(cè)的窗口。登錄窗口的效果如下：
每一行中，放置圖標(biāo)和input輸入框。input使用的是默認(rèn)樣式，看起來(lái)還是很清爽的。
hml視圖層：
手機(jī)號(hào)的input設(shè)置type="number"，在獲取焦點(diǎn)后鍵盤自動(dòng)彈出為數(shù)字鍵盤。密碼框type="password"，彈出普通鍵盤，且輸入的字符會(huì)變?yōu)閳A點(diǎn)，也可點(diǎn)擊右側(cè)眼睛圖標(biāo)查看密碼內(nèi)容。
在最開(kāi)始使用input時(shí)，嘗試使用this.$element("id").value獲取，但這樣是獲取不到的。
- // 登錄
- login() {
- prompt.showToast({
- message: "手機(jī)號(hào): " + this.$element("phoneInput").value +
- ", 密碼: " + this.$element("pwdInput").value,
- duration: 5000
- })
- }
因此需要使用input的onchange屬性綁定值改變的事件，通過(guò)e.value取到改變后的值，并賦給data中的變量。
順便提一下，今天突然找到了console打印日志的查看方式。需在最下方打開(kāi)"HiLog"視圖，搜索"app Log"后即可查看。console.log()的內(nèi)容需設(shè)置日志等級(jí)"debug"，console.info()則在"info"等級(jí)即可查看。
- // 手機(jī)號(hào)輸入框
- inputPhone(e) {
- this.phone = e.value;
- },
- // 密碼輸入框
- inputPwd(e) {
- this.pwd = e.value;
- },
- // 登錄
- login() {
- console.log("手機(jī)號(hào): " + this.phone + "密碼: " + this.pwd);
- }
這里能夠正常獲取輸入框的值了，就可以在點(diǎn)擊按鈕后將值傳給后臺(tái)服務(wù)器，進(jìn)行登錄的校驗(yàn)。按鈕的點(diǎn)擊方法通過(guò)onclick進(jìn)行綁定。
- // 登錄
- 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);
- console.info(JSON.stringify(data));
- if (0 != data.code) {
- prompt.showToast({
- message: data.msg,
- duration: 3000
- })
- } else {
- let userInfo = data.data;
- userInfo.age = this.getAge(userInfo.birthday);
- this.userInfo = userInfo;
- this.$element("loginDialog").close();
- }
- }
- })
- }
登錄失敗，用提示框提示用戶失敗原因：
登錄成功，用戶信息賦值給頁(yè)面并關(guān)閉dialog：
這里日志的打印需要使用JSON.stringify()，否則會(huì)打印"object"。
input組件和button組件都提供了豐富的type可供選擇，具體可參考官方文檔。
https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-input-0000000000611673
css渲染層：
- .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;
- }
2、注冊(cè)模塊
注冊(cè)模塊同樣使用dialog彈窗，內(nèi)容比登錄要更豐富一些：
hml視圖層：
