Applet de WeChat: el uso de la ranura (uso de múltiples ranuras)

 Uno, crea componentes

Cree una carpeta de componentes en el proyecto raíz y luego cree sus componentes en ella. Aquí debemos prestar atención a la elección al crear la página de componentes: Crear componente

 

En segundo lugar, el uso de plantillas de componentes y ranuras.

La plantilla de componente está escrita de la misma forma que la plantilla de página. El árbol de nodos generado después de que la plantilla del componente se combina con los datos del componente se insertará en la posición de referencia del componente.

Se puede proporcionar un <slot> nodo en la plantilla de componente  para transportar los nodos secundarios proporcionados cuando se hace referencia al componente

1. El uso de la ranura

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <detailM>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </detailM>
</view>

El nombre y la ruta del componente deben agregarse al archivo json de la página que hace referencia al componente 

Aquí se puede encontrar que el contenido que insertamos en la ranura del componente en la página detail / index.wxml se ha insertado en el componente.

 

 2. Utilice componentes para pasar valores

página detail / index.wxml, introduzca el componente <detailM> </detailM>, establezca un texto de parámetro para pasar el contenido dentro del componente y una matriz de arr

<view>
  <detailM text="goodsTxt页面数据" arrlist="{
   
   {arr}}">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </detailM>
</view>

El subcomponente recibe datos: 

<view class="wrapper">
<view>{
   
   {text}}</view>
<view wx:for="{
   
   {arrlist}}">{
   
   {item}}</view>
<view>这里是组件的内部节点</view>
<slot></slot>
</view>

Las propiedades reciben la parte js del subcomponente, seguida del tipo de parámetro 

Efecto de página: 

 

Nota: Este enlace de datos solo puede pasar datos compatibles con JSON. A partir de la versión 2.0.9 de la biblioteca básica   , también puede incluir funciones en los datos (pero estas funciones no se pueden llamar directamente en WXML y solo se pueden pasar a componentes secundarios)

 3. La ranura del componente wxml, utilizada por varias ranuras.

Se pueden incluir nodos en el wxml del  slot componente para llevar la estructura wxml proporcionada por el usuario del componente.

De forma predeterminada, solo puede haber una ranura en el wxml de un componente. Cuando necesite usar múltiples ranuras, puede declarar habilitarlo en el componente js.

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
}

En este momento, puede usar múltiples ranuras en el wxml de este componente name para distinguir entre diferentes  .

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

Cuando lo use, use  slot atributos para insertar nodos en diferentes ranuras.

<!-- 引用组件的页面模板 -->
<view>
  <detailM>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </detailM>
</view>

4. Estilo de componente

wxss El estilo del archivo correspondiente  al componente solo es válido para los nodos del componente wxml. Al escribir estilos de componentes, debe prestar atención a los siguientes puntos:

• Los componentes y las páginas que hacen referencia a los componentes no pueden utilizar el selector de id ( #a), el selector de atributos ( [a]) y el selector de nombre de etiqueta; utilice el selector de clases en su lugar.
• El uso de selectores descendientes ( .a .b) en componentes y páginas que hacen referencia a componentes puede causar un comportamiento inesperado en algunos casos extremos. Evite usarlos en caso de encuentros.
• El selector de elementos secundarios ( .a>.b) solo se puede usar  view entre un componente y sus nodos secundarios, y puede causar situaciones inesperadas para otros componentes.
• Los estilos heredados, como  font ,  color se heredarán del exterior del componente al interior del componente.
• A excepción de los estilos heredados,  app.wxss los estilos y el estilo de la página donde se encuentra el componente no son válidos para los componentes personalizados (a menos que se cambie la opción de aislamiento del estilo del componente).

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

Además, el componente puede especificar el estilo predeterminado del nodo donde está ubicado, usando el  :host selector (necesita incluir  el soporte de la herramienta de desarrollo de la biblioteca básica  1.7.2 o superior).

Ejemplo de código:

 :host {
  color: red;
}

 

Aquí hay solo una lista simple del uso de algunas ranuras de subprogramas de WeChat. Para obtener más información, consulte el documento oficial: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml- wxss.html