[2] Micro puntos de habilidad canal Applet - componentes personalizados - ciclo de vida del componente, el método, el paso de parámetros, clase de estilo

I. Resumen: A través de un componente personalizado llamado la bandera de componentes personalizados para introducir el estilo, el paso de parámetros, utilice ciclo de vida de los componentes, métodos de ensamblaje

componente bandera es la función de un banner superior en la parte superior de la página, dentro del texto y haga clic en el salto página se pasa como un parámetro

 

esta referencia

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

En segundo lugar, los puntos técnicos:

1. tiempos de vida de los componentes del ciclo de vida

2. Las propiedades de los componentes prototipos propiedad

3. Los métodos de procedimiento de montaje

4. Uso de las clases de estilos de montaje

En tercer lugar, se inició el proyecto

　　Conectado a un texto, todavía usamos proyecto llamado 'componente de desarrollo' de los componentes de la carpeta del proyecto siguientes archivos se crean a continuación

 

 La carpeta bandera es el cuerpo de nuestros componentes

A continuación, rellene la carpeta siguiente en el archivo de banner.json

 

 Que es un componente

Rellena los siguientes archivos banner.js

 

 A continuación tres nuevas propiedades es el contenido principal del artículo, los métodos de componentes, componentes de propiedades prototipo, el ciclo de vida de los componentes

Deje una propiedad prototipo llamado texto para la definición del componente, queremos identificar el programa bandera del texto

 

 La figura, ya que el prototipo en la propiedad de los componentes de entrada tiene que ser convertida de una cadena, es necesario especificar explícitamente el tipo, el valor es el valor de su valor por defecto. Hay otros métodos de declarar atributos, puede hacerse referencia los documentos oficiales

En banner.wxml, nos directamente al texto que se muestra

 

 En app.json, el componente de referencia global

 

Luego usamos componentes en index.wxml, nota que el uso de la propiedad prototipo aquí.

  ,

 Se puede ver, nuestros valores de las propiedades definidas en los componentes son introducidos a la asamblea cuando no se pasa se establece en el valor predeterminado, y parte de los datos internos de la propiedad prototipo es también un componente, también se pueden hacer de enlace de datos, a continuación, podemos ver que, puede obtener su valor de manera this.data.XXXX

Posteriormente, hay que definir los componentes de clase de estilo, escribimos el siguiente código en banner.wxss

.Banner { 

  display : flexión ; 
  flex-dirección : columna ; 
  justificar contenido : centro ; 
  align-artículos : centro ; 

  background-color : rojo ; 
  de color : blanco ; 

  anchura : 100% ; 
  altura : 100rpx ; 
  posición : fijo ; 
  top : 0px ; 
  izquierda : 0px ; 
　　
z-index: 1;

}

A continuación, la raíz banner.wxml estilo de encuadernación

 

Guardar, podemos observar que la página ha llegado a ser tales, nuestro estilo básico hará el trabajo

 

A continuación, añadimos un componente en una propiedad prototipo, para indicar el camino para ir a la página y se unen a un método caso del grifo,

 

Cuando el usuario no llena dónde, dónde va a ser una cadena vacía '', por lo que adjuntamos métodos de ciclo de vida para determinar dónde el estado de montaje. Si es '' el camino que le dio la página actual

 

 

 El código completo es el siguiente

Componente ({ 
  datos: {}, 
  métodos: { 
    Goto: función () { 
      wx.navigateTo ({ 
        url: este .data.where, 
      }) 
    } 
  }, 
  Properties: { 
    texto: { 
      type: String, 
      valor: "热烈欢迎" 
    }, 
    donde: String 
  }, 
  tiempos de vida: { 
    adjunto: función () { 
      páginas const = getCurrentPages () 
      página const = páginas [pages.length-1 ]
       si ( este .data.where == '' )
       esta.setData ({ 
        donde: ` / $ {}` page.route
       }) 
    } 
  } 
})

 

Haga clic en nuestro componente bandera, se puede ver la página se dirige a la página actual

Si fijamos la propiedad donde, por ejemplo, sólo el proyecto predeterminado proporciona una página de registros para nosotros. Buscamos enrutadas a esta página

 

 Haga clic en el banner, se puede ver los registros de entrada con éxito

 

 componentes exitosos de la bandera