[Mini programa] Uso básico del desarrollo por componentes (1)

Uso básico del desarrollo de componentes de programas pequeños

Idea de división en componentes de programa pequeño

Uso de definiciones de ranuras de componentes

Cuando se acaba de lanzar el applet, no admitía la creación de componentes, lo que también fue criticado :

Pero desde la versión 1.6.3, el applet comenzó a admitir el desarrollo de componentes personalizados, lo que también hace que sea más conveniente para nosotros usar la creación de componentes en el programa.

La aplicación del pensamiento de fragmentación :

Con la idea de la componenteización, la aprovecharemos al máximo en el desarrollo posterior.

Divida la página en componentes pequeños y reutilizables tanto como sea posible.

Esto hace que nuestro código sea más fácil de organizar y administrar, y más escalable.

Por lo tanto, los componentes son un capítulo muy importante en el desarrollo de pequeños programas en la actualidad, y debes estudiarlos cuidadosamente ( pero la idea de componenteización de pequeños programas es básicamente la misma que la idea de componenteización de Vue ) .

---

El proceso de personalización de componentes.

Al igual que las páginas, los componentes personalizados constan de 4 archivos json wxml wxss js .

De acuerdo con mis hábitos personales, primero crearemos una carpeta de componentes en el directorio raíz y almacenaremos los componentes públicos que personalizaremos más adelante en este archivo;

Un componente personalizado común contendrá los cuatro archivos correspondientes;

Pasos para personalizar los componentes :

1. Primero, debe declarar un componente personalizado en el archivo json (establezca el campo del componente en verdadero, y este conjunto de archivos se puede configurar como un componente personalizado)

2. Escribir la plantilla propia de nuestro propio componente en wxml

<!--components/section-info/section-info.wxml-->
<view class="section">
	<view class="title">我是标题</view>
	<view class="content">我是内容: 哈哈哈哈</view>
</view>

3. Escriba los estilos relevantes que pertenecen a nuestro componente en wxss

/* components/section-info/section-info.wxss */
.title {
    
    
	color: skyblue;
	font-size: 40rpx;
	font-weight: 700;
}

.content {
    
    
	color: #333;
	font-size: 30rpx;
}

4. En el archivo js, ​​puede definir datos o lógica relacionada dentro del componente ( no se usa por ahora )

Después de definir el componente, podemos usar el componente personalizado

usingComponentsNecesitamos configurar las propiedades del archivo json de la página en la página donde queremos usar el componente personalizado

usingComponentsLa propiedad corresponde a un objeto, la clave representa el nombre del componente que se utilizará y el valor representa la ruta del componente que se utilizará

• Por ejemplo, si quiero usar componentes personalizados en la página de índice, necesito configurarlo en el archivo json de la página de índice.

Una vez completada la configuración, puede usar el componente personalizado en el archivo wxml de la página de configuración

<section-info />
<section-info />
<section-info />
<section-info />

Notas :

Los componentes personalizados también pueden hacer referencia a otros componentes personalizados, y el método de referencia es similar a la forma en que las páginas hacen referencia a los componentes personalizados (usando usingComponentscampos).

El nombre del directorio raíz del proyecto donde se encuentran las páginas y los componentes personalizados no puede tener el prefijo "wx-", de lo contrario, se informará de un error.

Si un componente declarado en usingComponents de app.json es un componente global, todas las páginas y componentes pueden usar este componente directamente sin registrarlo por separado en la página.

Detalles de implementación de estilo de componente

Tema 1: ¿El estilo dentro del componente afecta el estilo fuera del componente?

Conclusión 1: el estilo de clase en el componente solo tiene efecto en los nodos en el componente wxml y no tiene efecto en la página de la página que hace referencia al componente.

• Todavía usamos los componentes escritos arriba para probar

Conclusión 2: el selector de ID, el selector de atributos y el selector de etiquetas no se pueden usar en el componente (se pueden usar en la página ), intente usar el selector de clase

Tema 2: Influencia de los estilos externos en los estilos de los componentes

Conclusión 1: El estilo de la clase que se usa externamente solo es válido para la clase del wxml externo y no tiene efecto dentro del componente.

Conclusión 2: el selector de ID y el selector de atributos utilizados externamente no afectarán al componente

Conclusión 3: el selector de etiquetas se usa externamente, lo que afectará al componente ( por lo que no se recomienda el selector de etiquetas )

Tema 3: Cómo hacer que las clases se afecten entre sí

En el objeto Component, puede pasar una propiedad de opciones, que tiene una propiedad styleIsolation en la propiedad de opciones.

styleIsolation tiene tres valores:

• aislado significa habilitar el aislamiento de estilo, dentro y fuera del componente personalizado, los estilos especificados por clase no se afectarán entre sí (valor predeterminado) ;

• apply-shared significa que el estilo wxss de la página afectará al componente personalizado, pero el estilo especificado en el componente personalizado wxss no afectará a la página;

• compartido significa que el estilo wxss de la página afectará al componente personalizado, y el estilo especificado en el componente personalizado wxss también afectará a la página y otras configuraciones ( ambos se afectan entre sí )

// components/section-info/section-info.js
Component({
    
    
	options: {
    
    
		styleIsolation: "shared"
	}
})