Notas básicas del mini programa.

1. La diferencia entre programas pequeños y desarrollo web ordinario

1. Diferentes entornos operativos

• Las páginas web se ejecutan en un entorno de navegador.
• El mini programa se ejecuta en el entorno WeChat

2. La API es diferente

• Debido a los diferentes entornos de ejecución, las API de DOM y BOM no se pueden llamar en el subprograma.
• Sin embargo, los miniprogramas pueden llamar a varias API proporcionadas por el entorno WeChat, como:

lGeolocalización

lEscanea el código

pagar

3. Diferentes modelos de desarrollo

• Modelo de desarrollo web: navegador + editor de código
• Los miniprogramas tienen su propio conjunto de modelos de desarrollo estándar:

lSolicite una cuenta de desarrollo de miniprograma

lInstalar herramientas de desarrollo de miniprogramas

lCrear y configurar proyectos de miniprogramas.

2. Estructura básica del proyecto de mini programa.

1. Pages se utiliza para almacenar las páginas de todos los mini programas.

2. utils se utiliza para almacenar módulos con propiedades de herramientas (por ejemplo: módulos personalizados para formatear el tiempo)

3. Archivo de entrada app.js del proyecto del subprograma

4. Archivo de configuración global app.json del proyecto del subprograma

5. Archivo de estilo global app.wxss del proyecto del subprograma

6. archivo de configuración del proyecto project.config.json

7. sitemap.json se utiliza para configurar si WeChat permite que el mini programa y sus páginas sean indexados

​​​​​​​ 

3. Componentes de la página del miniprograma

        Los funcionarios del Mini Programa recomiendan que todas las páginas del Mini Programa se almacenen en el directorio de páginas y existan en carpetas separadas.

Entre ellos, cada página consta de 4 archivos básicos, los cuales son:

1. Archivo .js (archivo de secuencia de comandos de la página, almacenamiento de datos de la página, funciones de procesamiento de eventos, etc.)

2. Archivo .json (archivo de configuración de la página actual, apariencia de la ventana de configuración, rendimiento, etc.)

3. Archivo .wxml (archivo de estructura de plantilla de la página)

4. Archivo .wxss (archivo de hoja de estilo de la página actual)

4. El papel de los archivos de configuración.

1. JSON es un formato de datos. En el desarrollo real, JSON siempre aparece en forma de archivos de configuración. Los proyectos de miniprogramas no son una excepción: a través de diferentes archivos de configuración .json, los proyectos de miniprogramas se pueden configurar en diferentes niveles.

Hay 4 tipos de archivos de configuración json en el proyecto del mini , a saber:

①El archivo de configuración app.json en el directorio raíz del proyecto

②El archivo de configuración project.config.json en el directorio raíz del proyecto

③archivo de configuración sitemap.json en el directorio raíz del proyecto

④ Archivo de configuración .json en la carpeta de cada página

2. app.json es la configuración global del miniprograma actual , incluidas todas las rutas de página, apariencia de la ventana, rendimiento de la interfaz, pestañas inferiores, etc. El contenido de configuración de app.json en el proyecto de demostración es el siguiente:

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​​​: _ _

①páginas: se utiliza para registrar las rutas de todas las páginas del subprograma actual

②Ventana: define globalmente el color de fondo, el color del texto, etc. de todas las páginas del mini programa.

③estilo: define globalmente la versión de estilo utilizada por el componente del subprograma

④sitemapLocation: se utiliza para indicar la ubicación de sitemap.json

​​​​​​​​​​​​​​

 3. project.config.json es el archivo de configuración del proyecto, que se utiliza para registrar la configuración personalizada que hemos realizado para las herramientas de desarrollo de mini programas, por ejemplo:

l configuración guarda configuraciones relacionadas con la compilación

l El nombre del proyecto se guarda en nombre del proyecto.

l Lo que se guarda en appid es el ID de cuenta del mini programa.

4. WeChat ahora ha abierto la búsqueda dentro del mini programa y el efecto es similar al SEO de las páginas web de PC. El archivo sitemap.json se utiliza para configurar si la página del mini programa permite la indexación de WeChat. Cuando el desarrollador permite que WeChat indexe, WeChat indexará el contenido de la página del mini programa en forma de rastreador. Cuando las palabras clave de búsqueda del usuario coinciden con éxito con el índice de la página, es probable que la página del mini programa se muestre en los resultados de la búsqueda.

​​​​​​​

 Nota: El indicador de índice del mapa del sitio está habilitado de forma predeterminada. Si necesita deshabilitar el indicador de índice del mapa del sitio, puede configurar el campo checkSiteMap en falso en la configuración del archivo de configuración del proyecto del subprograma project.config.json

5. Para cada página del subprograma, puede utilizar el archivo .json para configurar la apariencia de la ventana de esta página, y los elementos de configuración de la página anularán los mismos elementos de configuración en la ventana de app.json . Por ejemplo:

 6. Solo necesitamos agregar la ruta de almacenamiento de la página en app.json -> páginas, y la mini herramienta de desarrollo de programas puede ayudarnos a crear automáticamente el archivo de página correspondiente.

como muestra la imagen:

 Solo necesita ajustar el orden de las rutas de las páginas en app.json -> matriz de páginas para modificar la página de inicio del proyecto. El subprograma mostrará la primera página como la página de inicio del proyecto, como se muestra en la figura:

 7. WXML es un conjunto de lenguajes de etiquetas diseñados por el marco del mini programa, que se utiliza para construir la estructura de la página del mini programa y su función es similar a HTML en el desarrollo web.

 La diferencia entre WXML y HTML

①Los nombres de las etiquetas son diferentes

HTML (div, span, img, a)

lWXML (vista, texto, imagen, navegador)

②Los nodos de atributos son diferentes

l<a href="#">Hipervínculo</a>

l<navigator url="/pages/home/home"></navigator>

③ Proporciona una sintaxis de plantilla similar a Vue

Enlace de datos

Representación de lista

l Representación condicional

WXS (WeiXin Script) es un lenguaje de programación único para programas pequeños que, combinado con WXML, puede construir la estructura de la página.
Las funciones definidas en el js de la página no se pueden llamar en WXML, pero las funciones definidas en WXS se pueden llamar en WXML. Por lo tanto, en programas pequeños, un escenario de aplicación típico de WXS es ​​"filtrar".

8. WXSS es un conjunto de lenguajes de estilo que se utilizan para describir estilos de componentes WXML, similar a CSS en el desarrollo web.

La diferencia entre WXSS y CSS

① Unidad de tamaño rpx agregada

lCSS requiere conversión manual de unidades de píxeles, como rem

lWXSS admite la nueva unidad de tamaño rpx en la capa inferior y el subprograma realizará conversiones automáticamente en pantallas de diferentes tamaños.

②Proporciona estilos globales y estilos locales.

lApp.wxss en el directorio raíz del proyecto se aplicará a todas las páginas del mini programa

lEl estilo .wxss de las páginas locales solo tiene efecto en la página actual

③WXSS solo admite algunos selectores CSS

l.clase y #id

elemento

lSelector de unión, selector de descendientes

Selectores de pseudoclase como l::after y ::before​​​​​​​

​​​​​​​

9. No es suficiente que un proyecto solo proporcione visualización de la interfaz, en el mini programa procesamos las operaciones del usuario a través de archivos .js. Por ejemplo: responder a los clics del usuario, obtener la ubicación del usuario, etc.

Los archivos JS en mini programas se dividen en tres categorías principales, a saber:

①app.js

l es el archivo de entrada para todo el proyecto del mini programa. Todo el mini programa se inicia llamando a la función App ().

②El archivo .js de la página

l es el archivo de entrada de la página. La página se crea y ejecuta llamando a la función Page().

③Archivo .js ordinario

l es un archivo de módulo de función ordinario, que se utiliza para encapsular funciones o atributos públicos para uso de la página.

5. Entorno anfitrión y proceso de renderizado del miniprograma.

​​​​​​​El entorno de host ( entorno de host ) se refiere al entorno dependiente necesario para que se ejecute el programa . Por ejemplo:

El sistema Android y el sistema iOS son dos entornos de alojamiento diferentes. La versión de Android de la aplicación WeChat no se puede ejecutar en el entorno iOS, por lo que Android es el entorno anfitrión del software de Android, ¡y el software separado del entorno anfitrión no tiene sentido!

El entorno anfitrión del miniprograma es el teléfono móvil WeChat.

Contenidos incluidos en el entorno de alojamiento del mini programa

①Modelo de comunicación

②Mecanismo operativo

③Componentes

④API

El cuerpo principal de comunicación en el subprograma es la capa de representación y la capa lógica, entre las cuales:

①La plantilla WXML y el estilo WXSS funcionan en la capa de renderizado

②Los scripts JS funcionan en la capa lógica

Proceso de inicio del mini programa:

①Descargue el paquete de código del subprograma al local

② Analizar el archivo de configuración global app.json

③Ejecute el archivo de entrada del subprograma app.js y llame a App() para crear una instancia del subprograma

④Renderizar la página de inicio del subprograma

⑤Se inicia el mini programa

​​​​​El proceso de representación de la página del subprograma

① Cargue el archivo de configuración .json de la página de análisis

②Cargue la plantilla .wxml y el estilo .wxss de la página

③Ejecute el archivo .js de la página y llame a Page() para crear una instancia de página

④ Representación de página completada

 Clasificación de componentes en mini programas.

Los componentes del miniprograma también los proporciona el entorno host, y los desarrolladores pueden crear rápidamente hermosas estructuras de páginas basadas en los componentes. Oficialmente, los componentes de los mini programas se dividen en 9 categorías, a saber:

①Ver contenedor

②Contenido básico

③Componente de formulario

④Componente de navegación

⑤Componentes multimedia

⑥ componente del mapa del mapa

⑦componente de lienzo lienzo

⑧Capacidades abiertas

⑨Accesibilidad

 Componentes de contenedor de vista de uso común

①ver

lÁrea de visión normal

l es similar a div en HTML y es un elemento a nivel de bloque

l Comúnmente utilizado para lograr el efecto de diseño de la página.

②vista de desplazamiento

lÁrea de vista desplazable

lComúnmente utilizado para lograr efectos de lista de desplazamiento

③swiper y swiper-item

l componente de contenedor de carrusel y componente de elemento de carrusel

 6. Trabajo colaborativo y proceso de desarrollo de pequeños programas.

1. Estructura organizativa de los miembros del proyecto.

 La gestión de miembros del mini programa se refleja en la gestión por parte del administrador de los miembros del proyecto del mini programa y de los miembros con experiencia:

①Miembros del proyecto:

l significa los miembros involucrados en el desarrollo y operación del Mini Programa

l Puede iniciar sesión en el fondo de la administración de subprogramas

lLos administradores pueden agregar, eliminar miembros del proyecto y establecer las funciones de los miembros del proyecto.

②Miembros con experiencia:

l indica los miembros que participaron en la experiencia de prueba interna del mini programa

lPuedes utilizar la versión de prueba del miniprograma, pero no eres miembro del proyecto.

l Los administradores y miembros del proyecto pueden agregar y eliminar miembros de experiencia.

Descripción del permiso del desarrollador

① Permisos de desarrollador: puede utilizar herramientas de desarrollo de miniprogramas y desarrollo de código para funciones de miniprogramas

② Permisos de experiencia: puede utilizar la versión de prueba del mini programa

③ Permisos de inicio de sesión: puede iniciar sesión en el fondo de administración del mini programa sin la confirmación del administrador.

④ Configuración de desarrollo: configure el nombre de dominio del servidor del mini programa, envíe mensajes y escanee el código QR del enlace normal para abrir el mini programa.

⑤ Tencent Cloud Management: configuraciones relacionadas con el desarrollo de la nube

  2. Proceso de desarrollo de programas pequeños.

 3. Diferentes versiones en el proceso de desarrollo de software.

En el proceso de desarrollo de software, se producirán diferentes versiones de software según diferentes nodos de tiempo, tales como:

① Mientras los desarrolladores escriben el código, realizan autopruebas del código del proyecto (versión de desarrollo)

② Hasta que el programa alcance un estado estable y experimentable, el desarrollador entregará la versión de experiencia al gerente de producto y a los evaluadores para que prueben la experiencia.

③Después de corregir finalmente los errores en el programa, publique la versión oficial para que la utilicen usuarios externos.

 4. Versión mini del programa

 5. Lanzamiento y lanzamiento de mini programas.

       El lanzamiento y el lanzamiento de un programa pequeño generalmente pasan por tres pasos: cargar el código -> enviar para revisión -> lanzar.

7. Configuración del Mini Programa

1. Archivos de configuración global y elementos de configuración comunes.

El archivo app.json en el directorio raíz del subprograma es el archivo de configuración global del subprograma. Los elementos de configuración más utilizados son los siguientes:

① páginas

l Registre la ruta de almacenamiento de todas las páginas del subprograma actual

② ventana

l Establecer globalmente la apariencia de la ventana del subprograma

③ Pestaña de barra

lEstablezca el efecto TabBar en la parte inferior del subprograma.

④ estilo

l Si se debe habilitar la nueva versión del estilo del componente

 Elementos de configuración de uso común para nodos de ventana

 2. La relación entre la configuración de la página y la configuración global.

En el subprograma

Si algunas páginas de subprogramas desean tener un rendimiento de ventana especial, en este momento, el "archivo de configuración .json a nivel de página" puede cumplir con este requisito.

Nota: Cuando la configuración de la página entra en conflicto con la configuración global, según el principio más cercano, el efecto final está sujeto a la configuración de la página.

 Elementos de configuración de uso común en la configuración de la página.

 

 8. El ciclo de vida de los applets

El ciclo de vida se refiere a la etapa completa de un objeto desde la creación -> ejecución -> destrucción, enfatizando un período de tiempo. Por ejemplo:

l Nació Zhang San, lo que significa el comienzo del ciclo de vida de esta persona.

l Zhang San falleció, lo que significa el final del ciclo de vida de esta persona.

l La vida de Zhang San en el medio es el ciclo de vida de Zhang San.

Podemos resumir el proceso de ejecución de cada pequeño programa en un ciclo de vida:

lEl inicio del subprograma indica el comienzo del ciclo de vida.

l El cierre del subprograma significa el final del ciclo de vida.

lEl proceso de ejecución del subprograma intermedio es el ciclo de vida del subprograma.

En los mini programas, el ciclo de vida se divide en dos categorías, a saber:

① Ciclo de vida de la aplicación

lSe refiere especialmente al proceso del miniprograma desde inicio->ejecutar->destrucción

② Ciclo de vida de la página

lSe refiere especialmente al proceso de carga -> renderizado -> destrucción de cada página en el mini programa.

Entre ellos, el rango del ciclo de vida de la página es menor y el rango del ciclo de vida de la aplicación es mayor, como se muestra en la figura:

 

Función de ciclo de vida: es una función incorporada proporcionada por el marco del mini programa, que se ejecutará automáticamente en orden junto con el ciclo de vida.

El papel de la función del ciclo de vida: permite a los programadores realizar determinadas operaciones en un momento específico. Por ejemplo, cuando la página se acaba de cargar, los datos de la página se pueden inicializar en la función de ciclo de vida onLoad.

Nota: El ciclo de vida enfatiza el período de tiempo y la función del ciclo de vida enfatiza el punto de tiempo.

Nueve, ciclo de vida del componente.

1. Todas las funciones del ciclo de vida de los componentes.

2. La función principal del ciclo de vida del componente. 

En el componente del subprograma, hay tres funciones de ciclo de vida más : creado , adjunto y desconectado . Sus respectivas características son las siguientes:

① Cuando se acaba de crear la instancia del componente, se activará la función de ciclo de vida creada.

No puedo llamar a setData en este momento

Por lo general, esta función de ciclo de vida solo debe usarse para agregar algunos campos de atributos personalizados al componente.

② Una vez que el componente se inicializa completamente y ingresa al árbol de nodos de la página, se activará la función de ciclo de vida adjunta.

l En este punto, estos datos se han inicializado.

lEste ciclo de vida es muy útil, la mayor parte del trabajo de inicialización se puede realizar en este momento (como enviar una solicitud para obtener datos iniciales)

③ Después de que el componente abandone el árbol de nodos de la página, se activará la función de ciclo de vida independiente.

lAl salir de una página, se activará la función de ciclo de vida independiente de cada componente personalizado en la página.

l Es conveniente realizar algunos trabajos de limpieza en este momento.

10. Subcontratación

        El subpaquete se refiere a dividir un proyecto de programa pequeño completo en diferentes subpaquetes según los requisitos, empaquetarlos en diferentes subpaquetes durante la construcción y cargarlos según sea necesario cuando los usuarios los usen.

Los beneficios de subcontratar programas pequeños son los siguientes:
●Puede optimizar el tiempo de descarga del programa pequeño por primera vez.
●Puede desacoplarse y colaborar mejor cuando varios equipos se desarrollan juntos.

 Antes de la subcontratación, todas las páginas y recursos del proyecto del Mini Programa se empaquetaron juntos, lo que hizo que todo el proyecto fuera demasiado grande y afectara el tiempo de descarga para el primer inicio del Mini Programa.

 

Después de la subcontratación, el proyecto del miniprograma consta de 1 paquete principal + múltiples subcontratos:

​​​​​​​

Paquete principal: generalmente solo contiene la página de inicio o la página TabBar del proyecto, así como algunos recursos públicos que todos los subpaquetes deben usar.

l Subcontratación: solo incluye páginas y recursos privados relacionados con la subcontratación actual

Reglas de carga de subpaquetes

①Cuando se inicia el subprograma, el paquete principal se descargará de forma predeterminada y se iniciarán las páginas del paquete principal. La página
    tabBar debe colocarse en el paquete principal.
②Cuando el usuario ingresa a una página en el subpaquete, el cliente descargue el subpaquete correspondiente Visualización después de completar
    ●Las páginas que no son de barra de pestañas se pueden dividir en diferentes subcontratos según diferentes funciones y descargarse a pedido.

 Límite de volumen de subcontratación

Actualmente, existen dos restricciones sobre el tamaño de los subpaquetes de un programa pequeño:
    El tamaño de todos los subpaquetes de todo el programa pequeño no excede los 16 M (paquete principal + todos los subpaquetes)
    El tamaño de un único subpaquete/paquete principal no puede exceder los 2 M

 Utilice la subcontratación

1.Método de configuración

 2. Principios de embalaje

①Se subempaquetará un programa pequeño de acuerdo con la configuración de los subpaquetes, y los directorios distintos de los subpaquetes se empaquetarán en el paquete principal ②El
paquete principal también puede tener sus propias páginas (es decir, el campo de páginas más externo)
③La página tabBar debe estar en el paquete principal④
Los subpaquetes no se pueden anidar entre sí

3. Principios de cotización

① El paquete principal no puede hacer referencia a recursos privados en el subpaquete.
Los subcontratos no pueden hacer referencia a los recursos privados de cada uno.
③ Los subcontratos pueden hacer referencia a recursos públicos en el paquete principal.

 

subcontratación independiente

1. La diferencia entre subcontratación independiente y subcontratación ordinaria 

La principal diferencia: si depende del paquete principal para ejecutarse.
Los subpaquetes ordinarios deben depender del paquete principal para ejecutarse.
Los subpaquetes independientes pueden ejecutarse de forma independiente sin descargar el paquete principal.

2. Escenarios de aplicación

 Los desarrolladores pueden configurar determinadas páginas con cierta independencia funcional en subpaquetes independientes según sea necesario. Los motivos son los siguientes:
●Cuando el subprograma comienza desde la página del subpaquete normal, primero debe descargar el paquete principal.
●El subpaquete independiente puede ejecutarse sin depender del paquete principal, lo que puede mejorar en gran medida la velocidad de inicio de la página del subpaquete.

Nota: Puede haber varios subcontratos independientes en un miniprograma.

3. Principios de cotización

Los subpaquetes independientes, los subpaquetes comunes y el paquete principal están aislados entre sí y no pueden hacer referencia a los recursos de cada uno. Por ejemplo:
① El paquete principal no puede hacer referencia a recursos privados en subpaquetes independientes
② Los subpaquetes independientes no pueden hacer referencia a los recursos privados de cada uno Recursos
③ No se puede hacer referencia a recursos privados entre la subcontratación independiente y la subcontratación ordinaria
④ Atención especial: los recursos públicos del paquete principal no se pueden hacer referencia en la subcontratación independiente

Predescarga subcontratada

        La descarga previa de subpaquetes se refiere a: al ingresar a una determinada página del subprograma, el marco descarga automáticamente los subpaquetes que pueden ser necesarios, mejorando así la velocidad de inicio al ingresar a páginas de subpaquetes posteriores.

1. Configurar la predescarga subcontratada

2. Restricciones a la predescarga subcontratada

 Escribe al final:

        ¡Hay demasiados detalles relacionados con algunos componentes, navegación, transferencia de parámetros, comunicación, etc.! ~¡Y es mejor leer los documentos abiertos para esta parte, así que no tomaré notas aquí!