Directory:

1. Login module

2. Registration module

3. Introduction to series of articles

The year of the Ox is coming, I wish you a line without bugs, pages so easy ~

Form component is provided in wechat applet, which can put input, picker, slider, button and so on in form, and set the name attribute to achieve htML-like form submission function.

Hongmeng JS currently does not have a form component, so we need to manually obtain the input box, select box and other values during submission, and build data objects by ourselves.

1. Login module

Following up on the previous article, modal login and registration Windows are implemented through the Dialog component. The login window looks like this:

In each line, place the icon and input fields. Input uses the default style and looks clean.

HML View layer:

<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=" </button class="inputBtn" onclick="login"> </button> </div> </dialog>Copy the code

Set the input type of the phone number to “number”, and the keypad will automatically pop up as a numeric keypad after the focus is obtained. In the password box type=”password”, a common keyboard pops up and the entered characters become dots. You can also click the eye icon on the right to view the password content.

When you first use input, try this.$Element (“id”).value, but you won’t get it.

// Login () {prompt. ShowToast ({message: "phone number: "+ this. element("phoneInput").value + ", password: " + this.$element("pwdInput").value, duration: 5000 }) }Copy the code

Therefore, it is necessary to use the onchange attribute of input to bind the event with the changed value, fetch the changed value through E. value, and assign it to the variable in data.

By the way, today I found a way to view console print logs. Open the “HiLog” view at the bottom and search for “app Log”. The content of console.log() must be set to the debug log level, and console.info() can be viewed at the info level.

// inputPhone(e) {this.phone = e.value; }, // Password input box inputPwd(e) {this.pwd = e.value; }, // login() {console.log(" phone number: "+ this.phone +" password: "+ this.pwd); }Copy the code

Here can normally get the value of the input box, you can click the button after the value to the background server, login verification. Button click methods are bound by onclick.

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(); }}})}Copy the code

If the login fails, a dialog box is displayed indicating the failure cause:

After successful login, assign user information to the page and close dialog:

Json.stringify () is required to print the log, otherwise “object” will be printed.

Both the Input and Button components provide a rich selection of types to choose from, as described in the official documentation.

Developer.harmonyos.com/cn/docs/doc…

CSS rendering layer:

.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;
}
Copy the code

2. Registration module

The registration module also uses the Dialog popup, which is a bit richer than the login:

HML View layer:

<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"> <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"> <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" </div> <button class="inputBtn" onclick="register"> </button> </div> </dialog>Copy the code

The first four are still input fields, and the next two use the Picker selection box component. Note that the selection box component tag needs to place text content. Click the text here to pop up the selection box at the bottom of the page.

Type =”text” is the text selection box that binds an array of strings with the range property, giving the following effect:

Onchange property binding Method of selecting an option. E. newValue is the option value and E. newSelected is the option subscript.

Gender selection box JS logic layer code:

export default { data: { ... Gender: "click the sex selection," genderVal: "", genders: [' confidential 'and' male ', 'woman'],... },... // chooseGender(e) {this.gender = e.newvalue; this.genderVal = e.newSelected; },... }Copy the code

Type =”date” is a date picker, which can specify the start, end, and current dates through the property, and how to handle the selection through the onchange binding. The effect is as follows:

E. ear/month/day indicates the selected year, month, and day. Note that month is 1 smaller than the actual month.

Birthday select box JS logic layer:

export default { data: { ... Birthday: "Click select Birthday ", birthdayVal: ""},... ChooseBirthday (e) {let month = (e.money + 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; },... }Copy the code

– there is a bug in the developer tool where type=”date” is misspelled as “data” when prompted.

Selector and time, Datetime, multi-text three, Hongmeng package is really good to use.

Registration method:

// 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: "register successfully ", duration: 3000}); this.$element("registerDialog").close(); }}})}Copy the code

Note also that if fetch is used to send requests and data is given an object, the content-Type of the request header is automatically set to Application/X-www-form-urlencoded. If the server receives JSON data, the request header needs to be set; otherwise, the following error is reported.

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

Sign up:

Author: Chris.

Want to know more, please visit: 51 cto and huawei officials strategic cooperation HongMeng technology community at https://harmonyos.51cto.com