Tutorial de desarrollo práctico del mini programa de jardín de infantes


Cuando los niños alcanzan la edad adecuada, deben ingresar al jardín de infantes para estudiar. Ahora muchas familias son solo un hijo. Es más importante elegir un jardín de infantes adecuado para que los niños puedan adaptarse a la vida colectiva desde una edad temprana y aprender habilidades sociales y habilidades culturales y artísticas correspondientes. Para brindarles a sus hijos un entorno educativo seguro y bueno, los padres a menudo necesitan comparar muchos aspectos al elegir una escuela.

Ahora el mapa de Baidu es más conveniente, pero el mapa solo puede mostrar una información de ubicación geográfica del jardín de infantes. Si desea obtener más información sobre la filosofía de la escuela, los maestros, el medio ambiente y otra información, a menudo falta. Después del lanzamiento del miniprograma WeChat en 2017, sus funciones listas para usar y sin instalación atrajeron una gran cantidad de aplicaciones a los estantes.

Sin embargo, la mayoría de los jardines de infancia aún no tienen su propio subprograma de publicidad. En este artículo, utilizamos herramientas de código bajo para construir rápidamente un subprograma, que no solo es conveniente para la publicidad del jardín de infancia, sino también conveniente para que los padres elijan escuelas. El tutorial práctico se divide en tres partes: análisis de demanda, diseño de fuentes de datos y desarrollo de aplicaciones. Se esfuerza por lograr un conocimiento detallado y los pasos son claros y claros. Incluso si no hay una base, se puede construir paso a paso.

1 Análisis de la demanda

El proceso de análisis de requisitos generales es comprender las necesidades reales de los clientes y convertir los requisitos en funciones de software. En el proceso de análisis de requisitos, a menudo utilizamos varios pasos, como entrevistas, creación de prototipos y confirmación de funciones. Para las entrevistas, podemos comunicarnos cara a cara, si se trata de una comunicación en línea, podemos usar WeChat, conferencia Tencent y otras herramientas para facilitar la comprensión detallada de las necesidades.

Después de la comunicación de la demanda, usaremos el mapa mental para ordenar los puntos de función. Los siguientes son los puntos de función que hemos resuelto. Los puntos de función
inserte la descripción de la imagen aquí
no son intuitivos. También usaremos la herramienta de prototipos para dibujar prototipos para facilitar la confirmación. de funciones

1.1 Prototipo de página de inicio

inserte la descripción de la imagen aquí
La página de inicio es una página que muestra las funciones de nuestro applet como un todo y, a menudo, presenta toda la información, y la información se puede enumerar en orden de arriba a abajo. La barra de navegación en la parte inferior puede saltar entre diferentes páginas

1.2 Página de detalles de registro

inserte la descripción de la imagen aquí
En la página de detalles de registro, puede comunicarse rápidamente y enviar información de consulta a través de iconos y botones.

1.3 Pantalla gráfica

inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
Puede haber dos vistas para la visualización de gráficos, una es una vista de una sola columna y la otra es una vista de dos columnas

1.4 Mi página

inserte la descripción de la imagen aquí
Mi página generalmente muestra el avatar del usuario y puede ver la información de la consulta que se ha enviado

2 Diseño de fuente de datos

Después de refinar la información funcional, necesitamos diseñar la fuente de datos de acuerdo con la función. La mayoría de ellos son para mostrar información, y podemos diseñar fuentes de datos independientes según las columnas. Si la fuente de datos es relativamente simple, podemos considerar diseñar dos fuentes de datos, una es la fuente de datos de la columna y la otra es la fuente de datos del documento.

Sin embargo, hay un problema con la división en tablas principales y secundarias. Las tablas secundarias almacenan los identificadores de datos de la tabla principal. Especialmente cuando estamos haciendo la visualización, tenemos que filtrar por el nombre de la columna. De esta manera, debemos usar la sintaxis de agregación para la conexión de tablas, lo que sin duda aumentará la complejidad. Para simplificar, no lo dividiremos en tablas principales y secundarias. Una columna es una fuente de datos.

A partir de las necesidades de clasificación, nuestras columnas se dividen en la introducción del jardín de infantes, los maestros, las actividades emocionantes, la exhibición de trabajos, los anuncios de noticias, las clases de enseñanza, sobre nosotros y las citas. Esta información es información de clase de visualización. Además de la clase de visualización, también tenemos un tipo de información de clase de envío, es decir, la información de consulta también puede crear una fuente de datos separada.

2.1 Información sobre el jardín

Planificaremos una fuente de datos para la información básica relacionada con el jardín de infantes. Los campos incluyen el carrusel de la página de inicio, el número de contacto, la dirección, sobre nosotros, los maestros, las clases de enseñanza y los íconos de navegación .
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
Cabe señalar aquí que los íconos de navegación son los primera matriz de selección El elemento es un objeto, debe agregar los campos y luego agregar las propiedades en el objeto

2.2 Aviso y anuncio

El anuncio de notificación contiene tres campos: título, cuerpo y fecha de publicación.
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

2.3 Actividades maravillosas

Además del título y el texto, hemos agregado un campo adicional para la imagen del evento.
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

2.4 Exposición de obras

El campo Visualización del trabajo incluye un título y una imagen del trabajo.
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

2.5 Reservar una cita

Los campos de registro de reserva incluyen título, contenido
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

2.6 Consulta de información

Los campos de información de consulta incluyen el nombre del estudiante, el número de identificación, el padre del estudiante, el número de teléfono móvil, la dirección particular, la nacionalidad
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

3 Crear aplicaciones de fondo

En general, se proporcionarán programas pequeños a los operadores con antecedentes de administración, y los antecedentes de administración de código bajo se pueden generar automáticamente. Haga clic para crear una aplicación modelo
inserte la descripción de la imagen aquí
Ingrese el nombre de la aplicación
inserte la descripción de la imagen aquí
Verifique la fuente de datos que creamos anteriormente La
inserte la descripción de la imagen aquí
aplicación modelo generará automáticamente una página para agregar, eliminar, modificar y verificar
inserte la descripción de la imagen aquí
Haga clic en Configuración de navegación
inserte la descripción de la imagen aquí
Haga clic para generar un clic de acuerdo con la página
inserte la descripción de la imagen aquí
Generar automáticamente el menú de la izquierda
inserte la descripción de la imagen aquí
Haga clic en el botón Publicar
inserte la descripción de la imagen aquí
para elegir publicar como una versión de prueba Resuelva varios problemas encontrados en la verificación de configuración Una vez
inserte la descripción de la imagen aquí
completada la versión, puede ver el efecto específico en el banco de trabajo empresarial
inserte la descripción de la imagen aquí

4 Crear un subprograma

Haga clic en Nueva aplicación para crear una aplicación personalizada
inserte la descripción de la imagen aquí
Ingrese el nombre de la aplicación para admitir la plataforma para seleccionar el subprograma
inserte la descripción de la imagen aquí
Haga clic en la página en blanco para completar la creación del subprograma
inserte la descripción de la imagen aquí

4.1 Creación de página

De acuerdo con las necesidades, hemos planificado la página de inicio, sobre nosotros, lista de registro de citas, detalles de registro de citas, actividades emocionantes, yo, información de consulta y otras páginas.

Haga clic en el signo + en el área del componente de la página para crear una página
inserte la descripción de la imagen aquí
Ingrese el nombre de la página para completar la creación de la página
inserte la descripción de la imagen aquí
inserte la descripción de la imagen aquí

4.2 Obtener ID abierto de usuario

Los principiantes que no han utilizado herramientas de código bajo, diseñan una página de inicio de sesión tan pronto como desarrollan un pequeño programa y solicitan al usuario que ingrese un nombre de usuario y una contraseña. Esto sigue siendo una cuestión de pensamiento tradicional.

Las herramientas de código bajo se basan en las instalaciones de la nube, y todos los entornos están alojados en la nube, lo que naturalmente es diferente del modelo de desarrollo tradicional. Hay tres modos en código bajo, a saber, inicio de sesión anónimo, inicio de sesión con nombre de usuario y contraseña e inicio de sesión con código de verificación de SMS.

Debido a que somos una aplicación de sitio web, usamos el modo de inicio de sesión anónimo, de
inserte la descripción de la imagen aquí
modo que el usuario haya completado el inicio de sesión tan pronto como abra el applet, lo que es conveniente para nosotros para obtener automáticamente el openid cuando enviemos información más adelante.

Abra el editor de código
inserte la descripción de la imagen aquí
En el directorio común, creamos un getopenid para obtener la información de inicio de sesión del usuario y pegamos
inserte la descripción de la imagen aquí
el siguiente código

export async function getOpenId() {
    
    
  const {
    
     OPENID, FROM_OPENID } = await app?.utils?.getWXContext()
  let userId = FROM_OPENID || OPENID
  if (!userId) {
    
    
    const {
    
     wedaId } = await app.cloud.getUserInfo()
    userId = wedaId
  }
  return userId
}

inserte la descripción de la imagen aquí
Cree una variable global para almacenar el ID abierto del usuario
inserte la descripción de la imagen aquí
. Cuando se inicia el applet, obtenemos el ID abierto del usuario y lo asignamos a la variable global.

import {
    
     getopenid } from './common/getopenid'
export default {
    
    
  onAppLaunch(launchOpts) {
    
    
    //console.log('---------> LifeCycle onAppLaunch', launchOpts)
    getopenid().then(async userId => {
    
    
      
      app.dataset.state.openid = userId
      console.log(app.dataset.state.openid)
    })
  },
  onAppShow(appShowOpts) {
    
    
    //console.log('---------> LifeCycle onAppShow', appShowOpts)
  },
  onAppHide() {
    
    
    //console.log('---------> LifeCycle onAppHide')
  },
  onAppError(options) {
    
    
    //console.log('---------> LifeCycle onAppError', options)
  },
  onAppPageNotFound(options) {
    
    
    //console.log('---------> LifeCycle onAppPageNotFound', options)
  },
  onAppUnhandledRejection(options) {
    
    
    //console.log('---------> LifeCycle onAppUnhandledRejection', options)
  }
}

inserte la descripción de la imagen aquí
Abra la herramienta de desarrollo y depuración y podrá ver que la consola genera la información de inicio de sesión del usuario. La
inserte la descripción de la imagen aquí
información de inicio de sesión es especialmente útil cuando el usuario envía la información, que puede identificar quién envió la información.

Resumir

Este artículo presenta sistemáticamente cómo un programa pequeño pasa de los requisitos al diseño y al proceso de desarrollo específico.Aunque las herramientas de código bajo reducen el umbral de desarrollo, el proceso de desarrollo de software sigue siendo inevitable. Hacer todo el trabajo preparatorio de acuerdo con el proceso de desarrollo de software también puede garantizar el progreso sin problemas del trabajo de desarrollo posterior. En el próximo artículo, presentaremos el desarrollo específico de cada página, así que estad atentos.

Supongo que te gusta

Origin blog.csdn.net/u012877217/article/details/127359440
Recomendado
Clasificación