1. 샘플 소개
이 Codelab은 입력 구성요소, 라벨 구성요소, 대화상자 구성요소를 기반으로 양식 페이지의 입력, 필수 확인 및 제출을 구현합니다.
1. 입력 구성 요소에 대해 다양한 유형(예: 텍스트, 이메일, 날짜 등)을 설정하여 양식 페이지를 완성합니다.
2. 양식 페이지의 사용자 이름, 이메일, 취미 입력란에 대한 필수 인증을 수행합니다.
3. 팝업창을 이용하여 성별, 취미를 선택하세요.
관련 개념
● 입력 구성 요소 : 라디오 상자, 다중 선택 상자, 버튼 및 한 줄 텍스트 입력 상자를 포함한 대화형 구성 요소입니다.
● 라벨 컴포넌트 : 입력, 버튼, 텍스트 영역 컴포넌트에 해당하는 라벨을 정의하고, 라벨을 클릭하면 바인딩된 컴포넌트의 클릭 효과가 발생합니다.
● 대화 상자 구성 요소 : 사용자 정의 팝업 창 컨테이너입니다.
완전한 예
2. 환경설정
먼저 HarmonyOS 개발 환경 구축을 완료해야 하며, 다음 단계를 참고하시기 바랍니다.
소프트웨어 요구사항
● DevEco Studio 버전: DevEco Studio 3.1 릴리스 이상.
● HarmonyOS SDK 버전: API 버전 9 이상.
하드웨어 요구 사항
● 장치 유형: Huawei 휴대폰 또는 DevEco Studio에서 실행되는 Huawei 휴대폰 장치 시뮬레이터.
● HarmonyOS 시스템: 3.1.0 개발자 릴리스 이상.
환경설정
1. DevEco Studio를 설치하세요.자세한 내용은 소프트웨어 다운로드 및 설치를 참조하세요 .
2. DevEco Studio 개발 환경 설정 DevEco Studio 개발 환경은 네트워크 환경에 따라 다릅니다. 도구의 정상적인 사용을 보장하려면 네트워크에 연결해야 합니다. 다음 두 가지 상황에 따라 개발 환경을 구성할 수 있습니다. :
● 인터넷에 직접 접속할 수 있는 경우 HarmonyOS SDK만 다운로드 하면 됩니다 .
● 네트워크에서 인터넷에 직접 접속할 수 없는 경우에는 인터넷에 접속하기 위해 프록시 서버가 필요합니다.자세한 내용은 개발 환경 구성을 참조하십시오 .
1. 개발자는 다음 링크를 참조하여 장치 디버깅 관련 구성을 완료할 수 있습니다.
3. 코드 구조 해석
본 Codelab에서는 핵심 코드만 설명하며, 전체 코드는 소스코드 다운로드 또는 gitee를 통해 제공하겠습니다.
├──entry/src/main/js // 代码区│ └──MainAbility│ ├──common│ │ ├──constant│ │ │ └──commonConstants.js // 公共常量│ │ └──images // 图片资源目录│ ├──i18n│ │ ├──en-US.json // 英文国际化│ │ └──zh-CN.json // 中文国际化│ ├──pages│ │ └──index│ │ ├──index.css // 表单页面样式│ │ ├──index.hml // 表单页面│ │ └──index.js // 表单页面逻辑│ └──app.js // 程序入口└──entry/src/main/resource // 应用静态资源目录
4. 페이지 디자인
해당 페이지에는 사용자 이름, 이메일 주소, 생년월일, 키, 성별, 취미 입력란과 제출 버튼이 포함되어 있으며, 필수 확인을 위해 제출 버튼을 클릭하세요.
<!-- index.hml --><div class="container">...<div class="user-area"><image class="image" src="{ { urls.user }}"></image><div class="input-label"><image src="{ { urls.required }}"></image><label class="label" target="user">{ { $t('strings.user') }}</label></div><div class="input-div"><input class="input" id="user" type="text" placeholder="{ { $t('strings.user') }}" onchange="inputChange"ontranslate="translate"></input></div></div><div class="input-area"><image src="{ { urls.email }}"></image><div class="input-label"><image src="{ { urls.required }}"></image><label class="label" target="email">{ { $t('strings.email') }}</label></div><div class="input-div"><input class="input" id="email" type="email" placeholder="{ { $t('strings.email') }}"onchange="inputChange"></input></div></div><div class="input-area"><image src="{ { urls.date }}"></image><div class="input-label"><label class="label" target="date">{ { $t('strings.birthday') }}</label></div><div class="input-div"><input class="input" id="date" type="date" placeholder="{ { $t('strings.date') }}" onchange="inputChange"></input></div></div><div class="input-area"><image src="{ { urls.height }}"></image><div class="input-label"><label class="label" target="height">{ { $t('strings.height_holder') }}</label></div><div class="input-div"><input class="input" id="height" type="number" placeholder="{ { $t('strings.height') }}"onchange="inputChange"></input></div></div><div class="input-area"><image src="{ { urls.gender }}"></image><div class="input-label"><label class="label" target="gender">{ { $t('strings.gender') }}</label></div><div class="input-div" onclick="openGender"><input class="input select" id="gender" type="text" placeholder="{ { $t('strings.gender') }}"softkeyboardenabled="false"value="{ { genderObj[gender] }}"></input><image src="{ { urls.spinner }}"></image></div></div><div class="input-area"><image src="{ { urls.hobby }}"></image><div class="input-label"><image src="{ { urls.required }}"></image><label class="label" target="hobbies">{ { $t('strings.hobbies') }}</label></div><div class="input-div" onclick="openHobby"><input class="input select" id="hobbies" type="text" placeholder="{ { $t('strings.hobby') }}"softkeyboardenabled="false" value="{ { hobbies.join(',') }}"></input><image src="{ { urls.spinner }}"></image></div></div><button type="capsule" onclick="buttonClick">{ { $t('strings.submit') }}</button>...</div>
효과는 그림과 같습니다.
성별 입력란을 클릭하면 성별 라디오 버튼이 팝업되며, 취미 입력란을 클릭하면 취미 다중 선택 상자가 팝업됩니다.
<!-- index.hml --><div class="container">...<dialog id="genderDialog"><div class="gender-dialog"><text>{ { $t('strings.gender_select') }}</text><div><text>{ { $t('strings.gender_male') }}</text><input if="{ { gender === 0 }}" class="radio" type="radio" checked="true" name="radio"value="{ { $t('strings.gender_male') }}" onchange="onRadioChange"></input><input if="{ { gender === 1 }}" class="radio" type="radio" checked="false" name="radio"value="{ { $t('strings.gender_male') }}" onchange="onRadioChange"></input></div><divider vertical="false"></divider><div><text>{ { $t('strings.gender_female') }}</text><input if="{ { gender === 0 }}" class="radio" type="radio" checked="false" name="radio"value="{ { $t('strings.gender_female') }}"></input><input if="{ { gender === 1 }}" class="radio" type="radio" checked="true" name="radio"value="{ { $t('strings.gender_female') }}"></input></div><div class="button"><text onclick="closeGender">{ { $t('strings.cancel') }}</text><divider vertical="true"></divider><text onclick="confirmGender">{ { $t('strings.determined') }}</text></div></div></dialog><dialog id="hobbyDialog"><div class="hobby-dialog"><text>{ { $t('strings.hobby') }}</text><div><text>{ { $t('strings.hobby_swim') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[0]) !== -1 }}"value="{ { hobbiesOjb[0] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_fitness') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[1]) !== -1 }}"value="{ { hobbiesOjb[1] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_soccer') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[2]) !== -1 }}"value="{ { hobbiesOjb[2] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_basketball') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[3]) !== -1 }}"value="{ { hobbiesOjb[3] }}" onchange="checkboxOnChange"></input></div><div><text>{ { $t('strings.hobby_reading_book') }}</text><input class="checkbox" type="checkbox" checked="{ { hobbies.indexOf(hobbiesOjb[4]) !== -1 }}"value="{ { hobbiesOjb[4] }}" onchange="checkboxOnChange"></input></div><div class="button"><text onclick="closeHobby">{ { $t('strings.cancel') }}</text><divider vertical="true"></divider><text onclick="confirmHobby">{ { $t('strings.determined') }}</text></div></div></dialog></div>
효과는 그림과 같습니다.
5. 배경 논리 처리
사용자 이름, 이메일 주소, 생년월일, 키 입력란의 값이 변경되면 실시간으로 데이터 개체에 업데이트됩니다.
// index.jsexport default {data: {...user: '',email: '',date: '',height: '',...},...// 实时保存输入框内容inputChange(event) {let idName = event.target.id;if (idName === CommonConstants.USER) {this.user = event.value;} else if (idName === CommonConstants.EMAIL) {this.email = event.value;} else if (idName === CommonConstants.DATE) {this.date = event.value;} else if (idName === CommonConstants.HEIGHT) {this.height = event.value;}},...}
맞춤형 팝업창을 통해 성별과 취미를 선택하세요. 현재 팝업 상자를 닫으려면 팝업 상자에서 취소 버튼을 클릭하고, 선택한 값을 먼저 설정한 후 팝업 상자를 닫으려면 확인 버튼을 클릭하세요.
// index.jsexport default {data: {...genderObj: [],genderTemp: 0,gender: 0,hobbiesOjb: [],hobbiesTemp: [],hobbies: []},...// 打开性别弹框openGender() {this.$element('genderDialog').show();},// 重新选择性别onRadioChange(event) {if (event.checked) {this.genderTemp = 0;} else {this.genderTemp = 1;}},// 关闭性别弹框closeGender() {this.$element('genderDialog').close();},// 性别弹框中点击“确定”confirmGender() {this.gender = this.genderTemp;this.closeGender();},// 打开爱好弹框openHobby() {this.$element('hobbyDialog').show();},// 关闭爱好弹框closeHobby() {this.$element('hobbyDialog').close();},// 在爱好弹开中点击“确定”confirmHobby() {let that = this;let copyHobbies = Object.create(Object.getPrototypeOf(this.hobbiesTemp));Object.getOwnPropertyNames(this.hobbiesTemp).forEach((items) => {let item = Object.getOwnPropertyDescriptor(that.hobbiesTemp, items);Object.defineProperty(copyHobbies, items, item);})this.hobbies = copyHobbies;this.closeHobby();},...// 选择爱好checkboxOnChange(event) {let currentVal = event.currentTarget.attr.value;if (event.checked) {this.hobbiesTemp.push(currentVal);} else {this.hobbiesTemp = this.hobbiesTemp.filter(item => {return item !== currentVal;});}},...}
양식을 제출하기 위해 제출 버튼을 클릭하기 전에 먼저 사용자 이름, 비밀번호, 이메일, 취미에 대해 필수 확인을 수행한 후 정규식을 사용하여 "yyyy-mm-dd" 형식으로 생년월일을 확인하고 인증을 수행합니다. 높이에 대한 정수 확인 또는 부동 소수점 체크섬.
// index.jsexport default {...// 表单提交验证buttonClick() {if (this.user === '') {this.showPrompt(this.$t('strings.user_check_null'));return;}if (this.email === '') {this.showPrompt(this.$t('strings.email_check_null'));return;}if (this.hobbies.length === 0) {this.showPrompt(this.$t('strings.hobby_check_null'));return;}if ((this.date !== '') && (!this.checkDateInput(this.date))) {this.showPrompt(this.$t('strings.date_not_format'));return;}if ((this.height !== '') && (!this.checkHeight(this.height))) {this.showPrompt(this.$t('strings.height_not_format'));return;}this.showPrompt(this.$t('strings.success'));},...// 表单验证结果showPrompt(msg) {prompt.showToast({message: msg,duration: CommonConstants.DURATION});},...}
요약하다
귀하는 이 Codelab 연구를 완료하고 다음 지식을 습득했습니다.
1. 입력 컴포넌트의 사용.
2. 라벨 구성 요소의 사용.
3. 대화 상자 구성 요소를 사용합니다.