1. Introducción de muestra
Este Codelab se basa en el componente de entrada, el componente de etiqueta y el componente de diálogo para implementar la entrada, la verificación requerida y el envío de la página del formulario:
1. Establezca diferentes tipos para el componente de entrada (como texto, correo electrónico, fecha, etc.) y complete la página del formulario.
2. Realice la verificación requerida en los cuadros de entrada de nombre de usuario, correo electrónico y pasatiempos en la página del formulario.
3. Utilice el cuadro emergente para seleccionar género y pasatiempos.
Conceptos relacionados
● Componente de entrada : componente interactivo, que incluye botón de opción, cuadro de selección múltiple, botón y cuadro de entrada de texto de una sola línea.
● Componente de etiqueta : Defina las etiquetas correspondientes para los componentes de entrada, botón y área de texto. Cuando se hace clic en la etiqueta, se activará el efecto de clic del componente enlazado.
● componente de diálogo : contenedor de ventana emergente personalizado.
ejemplo completo
dirección de origen de la casa rural
2. Configuración del entorno
Primero debemos completar el establecimiento del entorno de desarrollo HarmonyOS, consulte los siguientes pasos.
Requisitos de Software
● Versión de DevEco Studio : versión DevEco Studio 3.1 y superior.
● Versión del SDK de HarmonyOS : API versión 9 y superior.
Requisitos de hardware
● Tipo de dispositivo: teléfono móvil Huawei o simulador de dispositivo de teléfono móvil Huawei ejecutándose en DevEco Studio.
● Sistema HarmonyOS: versión para desarrolladores 3.1.0 y superiores.
Construcción del entorno
1. Instale DevEco Studio. Para obtener más información, consulte Descargar e instalar software .
2. Configure el entorno de desarrollo de DevEco Studio. El entorno de desarrollo de DevEco Studio depende del entorno de red. Debe estar conectado a la red para garantizar el uso normal de la herramienta. Puede configurar el entorno de desarrollo de acuerdo con las dos situaciones siguientes :
● Si tiene acceso directo a Internet, solo necesita descargar el SDK de HarmonyOS .
● Si la red no puede acceder directamente a Internet, es necesario acceder a ella a través de un servidor proxy. Consulte Configuración del entorno de desarrollo .
1. Los desarrolladores pueden consultar el siguiente enlace para completar la configuración relevante de depuración del dispositivo:
● Utilice una máquina real para depurar
● Usar el simulador para depurar
3. Interpretación de la estructura del código.
Este Codelab solo explica el código principal. Para obtener el código completo, lo proporcionaremos en la descarga del código fuente o en 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. Diseño de página
La página incluye nombre de usuario, dirección de correo electrónico, fecha de nacimiento, altura, sexo, cuadro de entrada de pasatiempos y botón de enviar. Haga clic en el botón de enviar para la verificación requerida.
<!-- 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>
El efecto es como se muestra en la figura:
Haga clic en el cuadro de entrada de género para que aparezca el botón de opción de género, haga clic en el cuadro de entrada de pasatiempos para que aparezca el cuadro de selección múltiple de pasatiempos.
<!-- 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>
El efecto es como se muestra en la figura:
5. Procesamiento lógico en segundo plano
Cuando los valores en los cuadros de entrada de nombre de usuario, dirección de correo electrónico, fecha de nacimiento y altura cambien, se actualizarán en el objeto de datos en tiempo real.
// 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;}},...}
Seleccione género y pasatiempos a través de cuadros emergentes personalizados. Haga clic en el botón Cancelar en el cuadro emergente para cerrar el cuadro emergente actual. Haga clic en el botón Aceptar para establecer el valor seleccionado primero y luego cerrar el cuadro emergente.
// 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;});}},...}
Antes de hacer clic en el botón Enviar para enviar el formulario, primero realice la verificación requerida en el nombre de usuario, contraseña, correo electrónico y pasatiempos, y luego use expresiones regulares para verificar la fecha de nacimiento en el formato "aaaa-mm-dd" y realice una verificación de enteros en la altura o suma de comprobación de punto flotante.
// 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});},...}
Resumir
Ha completado este estudio de Codelab y ha aprendido los siguientes puntos de conocimiento:
1. Uso del componente de entrada.
2. Uso del componente de etiqueta.
3. Uso del componente de diálogo.