從微信小程序到(dào)鴻蒙js開發【08】——表單組件&注冊登錄模塊 ...
發表時(shí)間：2021-2-22
發布人(rén)：融晨科技
浏覽次數：100
在(zài)微信小程序中，提供了(le／liǎo)form組件，可以(yǐ)将input、picker、slider、button等全部放在(zài)form中，并設置name屬性實現類似html的(de)表單提交功能。
鴻蒙js目前是(shì)沒有form組件的(de)，因此我們需要(yào / yāo)在(zài)提交時(shí)手動獲取輸入框、選擇框等的(de)值，自行構建數據對象。
1、登錄模塊
這(zhè)裏接着上(shàng)一篇，通過dialog組件實現了(le／liǎo)模态登錄和(hé / huò)注冊的(de)窗口。登錄窗口的(de)效果如下：
每一行中，放置圖标和(hé / huò)input輸入框。input使用的(de)是(shì)默認樣式，看起來(lái)還是(shì)很清爽的(de)。
hml視圖層：
<dialog id="loginDialog">
<div class="loginDialog">
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ phone ? (imgUrl +'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input id="phoneInput" type="number" placeholder="請輸入手機号" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ 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>手機号的(de)input設置type="number"，在(zài)獲取焦點後鍵盤自動彈出(chū)爲(wéi / wèi)數字鍵盤。密碼框type="password"，彈出(chū)普通鍵盤，且輸入的(de)字符會變爲(wéi / wèi)圓點，也(yě)可點擊右側眼睛圖标查看密碼内容。
在(zài)最開始使用input時(shí)，嘗試使用this.$element("id").value獲取，但這(zhè)樣是(shì)獲取不(bù)到(dào)的(de)。
// 登錄
login() {
prompt.showToast({
message: "手機号: " + this.$element("phoneInput").value +
", 密碼: " + this.$element("pwdInput").value,
duration: 5000
})
}
因此需要(yào / yāo)使用input的(de)onchange屬性綁定值改變的(de)事件，通過e.value取到(dào)改變後的(de)值，并賦給data中的(de)變量。
順便提一下，今天突然找到(dào)了(le／liǎo)console打印日志的(de)查看方式。需在(zài)最下方打開"HiLog"視圖，搜索"app Log"後即可查看。console.log()的(de)内容需設置日志等級"debug"，console.info()則在(zài)"info"等級即可查看。
// 手機号輸入框
inputPhone(e) {
this.phone = e.value;
},
// 密碼輸入框
inputPwd(e) {
this.pwd = e.value;
},
// 登錄
login() {
console.log("手機号: " + this.phone + "密碼: " + this.pwd);
}
這(zhè)裏能夠正常獲取輸入框的(de)值了(le／liǎo)，就(jiù)可以(yǐ)在(zài)點擊按鈕後将值傳給後台服務器，進行登錄的(de)校驗。按鈕的(de)點擊方法通過onclick進行綁定。
// 登錄
login() {
fetch.fetch({
url: this.url + "/litemall/user/login?phone=" + this.phone + "&pwd=" + this.pwd,
responseType: "json",
success: res => {
let data = http://www.wxapp-union.com/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：
這(zhè)裏日志的(de)打印需要(yào / yāo)使用JSON.stringify()，否則會打印"object"。
input組件和(hé / huò)button組件都提供了(le／liǎo)豐富的(de)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彈窗，内容比登錄要(yào / yāo)更豐富一些：
hml視圖層：
<dialog id="registerDialog">
<div class="registerDialog">
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ phone ? (imgUrl +'phone.png') : (imgUrl + 'phone1.png') }}"></image>
<input type="number" placeholder="請輸入手機号" onchange="inputPhone"></input>
</div>
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ pwd ? (imgUrl +'password.png') : (imgUrl + 'password1.png') }}"></image>
<input type="password" placeholder="請輸入密碼" onchange="inputPwd"></input>
</div>
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ username ? (imgUrl +'username.png') : (imgUrl + 'username1.png') }}"></image>
<input type="text" placeholder="請輸入姓名" onchange="inputUsername"></input>
</div>
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ nickname ? (imgUrl +'nickname.png') : (imgUrl + 'nickname1.png') }}"></image>
<input type="text" placeholder="請輸入昵稱" onchange="inputNickname"></input>
</div>
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ genderVal ? (imgUrl +'gender.png') : (imgUrl + 'gender1.png') }}"></image>
<picker type="text" range="{{ genders }}" onchange="chooseGender">{{ gender }}</picker>
</div>
<div class="formItem">
<image src="http://www.wxapp-union.com/{{ 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>上(shàng)面四個(gè)依然是(shì)input輸入框，随後兩個(gè)使用了(le／liǎo)picker選擇框組件。需注意，選擇框組件标記中需放置文本内容，通過點擊這(zhè)裏的(de)文本在(zài)頁面下方彈出(chū)選擇框。
type="text"是(shì)文本選擇框，通過range屬性綁定一個(gè)字符串數組，效果如下：
onchange屬性綁定選擇一項後的(de)處理方法，e.newValue是(shì)選項值，e.newSelected是(shì)選項下标。
性别選擇框js邏輯層代碼：
export default {
data: {
...
gender: "點擊選擇性别",
genderVal: "",
genders: ['保密', '男', '女'],
...
},
...
// 性别選擇器
chooseGender(e) {
this.gender = e.newValue;
this.genderVal = e.newSelected;
},
...
}type="date"是(shì)日期選擇器，可以(yǐ)通過屬性指定開始、結束、當前日期，通過onchange綁定選擇後的(de)處理方法。效果如下：
e.year/month/day分别爲(wéi / wèi)選擇的(de)年/月/日，注意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;
},
...
}
這(zhè)裏開發者工具有一個(gè)bug，type="date"在(zài)提示時(shí)錯誤拼寫成了(le／liǎo)"data"。
選擇器還有time, datetime, multi-text三種，鴻蒙的(de)封裝确實很好看好用。
注冊的(de)方法：
// 注冊
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 = http://www.wxapp-union.com/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();
}
}
})
}還需要(yào / yāo)注意，如果使用fetch發送請求，且data給的(de)是(shì)一個(gè)對象時(shí)，請求頭的(de)Content-Type自動設置爲(wéi / wèi)application/x-www-form-urlencoded。如果服務器接收json數據，則需要(yào / yāo)設置請求頭，否則會報如下錯誤。
Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]注冊一下：
