在微信小程序中，提供了form組件，可以將input、picker、slider、button等全部放在form中，并設(shè)置name屬性實(shí)現(xiàn)類似html的表單提交功能。

鴻蒙js目前是沒有form組件的，因此我們需要在提交時(shí)手動(dòng)獲取輸入框、選擇框等的值，自行構(gòu)建數(shù)據(jù)對(duì)象。

1、登錄模塊

這里接著上一篇，通過dialog組件實(shí)現(xiàn)了模態(tài)登錄和注冊(cè)的窗口。登錄窗口的效果如下：

每一行中，放置圖標(biāo)和input輸入框。input使用的是默認(rèn)樣式，看起來還是很清爽的。

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="請(qǐng)輸入手機(jī)號(hào)" 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="請(qǐng)輸入密碼" onchange="inputPwd"></input>
                        </div>
                        <button class="inputBtn" onclick="login">登錄</button>
                    </div>
                </dialog>

手機(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)容。

在最開始使用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屬性綁定值改變的事件，通過e.value取到改變后的值，并賦給data中的變量。

順便提一下，今天突然找到了console打印日志的查看方式。需在最下方打開"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)擊方法通過onclick進(jìn)行綁定。

    // 登錄
    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();
                }
            }
        })
    }

登錄失敗，用提示框提示用戶失敗原因：

登錄成功，用戶信息賦值給頁面并關(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視圖層：

                <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="請(qǐng)輸入手機(jī)號(hào)" 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="請(qǐng)輸入密碼" 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="請(qǐng)輸入姓名" 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="請(qǐng)輸入昵稱" 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">注冊(cè)</button>
                    </div>
                </dialog>

上面四個(gè)依然是input輸入框，隨后兩個(gè)使用了picker選擇框組件。需注意，選擇框組件標(biāo)記中需放置文本內(nèi)容，通過點(diǎn)擊這里的文本在頁面下方彈出選擇框。

type="text"是文本選擇框，通過range屬性綁定一個(gè)字符串?dāng)?shù)組，效果如下：

onchange屬性綁定選擇一項(xiàng)后的處理方法，e.newValue是選項(xiàng)值，e.newSelected是選項(xiàng)下標(biāo)。

性別選擇框js邏輯層代碼：

export default {
    data: {
        ...
        gender: "點(diǎn)擊選擇性別",
        genderVal: "",
        genders: ['保密', '男', '女'],
        ...
    },
    ...
    // 性別選擇器
    chooseGender(e) {
        this.gender = e.newValue;
        this.genderVal = e.newSelected;
    },
    ...
}

type="date"是日期選擇器，可以通過屬性指定開始、結(jié)束、當(dāng)前日期，通過onchange綁定選擇后的處理方法。效果如下：

e.year/month/day分別為選擇的年/月/日，注意month比實(shí)際月份小1。

生日選擇框js邏輯層：

export default {
    data: {
       ...
        birthday: "點(diǎn)擊選擇生日",
        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;
    },
    ...
}

這里開發(fā)者工具有一個(gè)bug，type="date"在提示時(shí)錯(cuò)誤拼寫成了"data"。

選擇器還有time, datetime, multi-text三種，鴻蒙的封裝確實(shí)很好看好用。

注冊(cè)的方法：

    // 注冊(cè)
    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: "注冊(cè)成功",
                        duration: 3000
                    });
                    this.$element("registerDialog").close();
                }
            }
        })
    }

還需要注意，如果使用fetch發(fā)送請(qǐng)求，且data給的是一個(gè)對(duì)象時(shí)，請(qǐng)求頭的Content-Type自動(dòng)設(shè)置為application/x-www-form-urlencoded。如果服務(wù)器接收json數(shù)據(jù)，則需要設(shè)置請(qǐng)求頭，否則會(huì)報(bào)如下錯(cuò)誤。

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

注冊(cè)一下：