從微信小程式到鴻蒙js開發【08】——表單元件&註冊登入模組
目錄：
1、登入模組
2、註冊模組
3、系列文章導讀
牛年將至，祝大家行行無bug，頁頁so easy～
在微信小程式中，提供了form元件，可以將input、picker、slider、button等全部放在form中，並設定name屬性實現類似html的表單提交功能。
鴻蒙js目前是沒有form元件的，因此我們需要在提交時手動獲取輸入框、選擇框等的值，自行構建資料物件。
1、登入模組
這裡接著上一篇，通過dialog元件實現了模態登入和註冊的視窗。登入視窗的效果如下：
每一行中，放置圖示和input輸入框。input使用的是預設樣式，看起來還是很清爽的。
hml檢視層：
<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>
手機號的input設定type="number"，在獲取焦點後鍵盤自動彈出為數字鍵盤。密碼框type="password"，彈出普通鍵盤，且輸入的字元會變為圓點，也可點選右側眼睛圖示檢視密碼內容。
在最開始使用input時，嘗試使用this.$element("id").value獲取，但這樣是獲取不到的。
// 登入 login() { prompt.showToast({ message: "手機號: " + this.$element("phoneInput").value + ", 密碼: " + this.$element("pwdInput").value, duration: 5000 }) }
因此需要使用input的onchange屬性繫結值改變的事件，通過e.value取到改變後的值，並賦給data中的變數。
順便提一下，今天突然找到了console列印日誌的檢視方式。需在最下方開啟"HiLog"檢視，搜尋"app Log"後即可檢視。console.log()的內容需設定日誌等級"debug"，console.info()則在"info"等級即可檢視。
// 手機號輸入框 inputPhone(e) { this.phone = e.value; }, // 密碼輸入框 inputPwd(e) { this.pwd = e.value; }, // 登入 login() { console.log("手機號: " + this.phone + "密碼: " + this.pwd); }
這裡能夠正常獲取輸入框的值了，就可以在點選按鈕後將值傳給後臺伺服器，進行登入的校驗。按鈕的點選方法通過onclick進行繫結。
// 登入
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();
}
}
})
}登入失敗，用提示框提示使用者失敗原因：
登入成功，使用者資訊賦值給頁面並關閉dialog：
這裡日誌的列印需要使用JSON.stringify()，否則會列印"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、註冊模組
註冊模組同樣使用dialog彈窗，內容比登入要更豐富一些：
hml檢視層：
<dialog id="registerDialog">
<div class="registerDialog">
<div class="formItem">
<image src="{{ phone ? (imgUrl + 'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input type="number" placeholder="請輸入手機號" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="{{ pwd ? (imgUrl + 'password.png') : (imgUrl + 'password1.png') }}"></image>
<input type="password" placeholder="請輸入密碼" onchange="inputPwd"></input>
</div>
<div class="formItem">
<image src="{{ username ? (imgUrl + 'username.png') : (imgUrl + 'username1.png') }}"></image>
<input type="text" placeholder="請輸入姓名" onchange="inputUsername"></input>
</div>
<div class="formItem">
<image src="{{ nickname ? (imgUrl + 'nickname.png') : (imgUrl + 'nickname1.png') }}"></image>
<input type="text" placeholder="請輸入暱稱" onchange="inputNickname"></input>
</div>
<div class="formItem">
<image src="{{ genderVal ? (imgUrl + 'gender.png') : (imgUrl + 'gender1.png') }}"></image>
<picker type="text" range="{{ genders }}" onchange="chooseGender">{{ gender }}</picker>
</div>
<div class="formItem">
<image src="{{ birthdayVal ? (imgUrl + 'birthday.png') : (imgUrl + 'birthday1.png') }}"></image>
<picker type="date" start="1900-1-1" selected="2000-1-1" onchange="chooseBirthday">{{ birthday }}</picker>
</div>
<button class="inputBtn" onclick="register">註冊</button>
</div>
</dialog>上面四個依然是input輸入框，隨後兩個使用了picker選擇框元件。需注意，選擇框元件標記中需放置文字內容，通過點選這裡的文字在頁面下方彈出選擇框。
type="text"是文字選擇框，通過range屬性繫結一個字串陣列，效果如下：
onchange屬性繫結選擇一項後的處理方法，e.newValue是選項值，e.newSelected是選項下標。
性別選擇框js邏輯層程式碼：
export default {
data: {
...
gender: "點選選擇性別",
genderVal: "",
genders: ['保密', '男', '女'],
...
},
...
// 性別選擇器
chooseGender(e) {
this.gender = e.newValue;
this.genderVal = e.newSelected;
},
...
}type="date"是日期選擇器，可以通過屬性指定開始、結束、當前日期，通過onchange繫結選擇後的處理方法。效果如下：
e.year/month/day分別為選擇的年/月/日，注意month比實際月份小1。
生日選擇框js邏輯層：
export default {
data: {
...
birthday: "點選選擇生日",
birthdayVal: ""
},
...
// 生日選擇器
chooseBirthday(e) {
let month = (e.month + 1) + "";
if (month.length == 1) {
month = "0" + month;
}
let day = e.day + "";
if (day.length == 1) {
day = "0" + day;
}
let birthday = e.year + "-" + month + "-" + day;
this.birthday = birthday;
this.birthdayVal = birthday;
},
...
}
這裡開發者工具有一個bug，type="date"在提示時錯誤拼寫成了"data"。
選擇器還有time, datetime, multi-text三種，鴻蒙的封裝確實很好看好用。
註冊的方法：
// 註冊
register() {
fetch.fetch({
url: this.url + "/litemall/user/register",
method: "POST",
data: {
username: this.username,
password: this.pwd,
gender: this.genderVal,
birthday: this.birthdayVal,
nickname: this.nickname,
mobile: this.phone
},
header: {
"Content-Type": "application/json;charset=UTF-8"
},
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 {
prompt.showToast({
message: "註冊成功",
duration: 3000
});
this.$element("registerDialog").close();
}
}
})
}還需要注意，如果使用fetch傳送請求，且data給的是一個物件時，請求頭的Content-Type自動設定為application/x-www-form-urlencoded。如果伺服器接收json資料，則需要設定請求頭，否則會報如下錯誤。
Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]註冊一下：
作者：Chris.
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社群https://harmonyos.51cto