Resumen de puntos de conocimiento común del subprograma WX

1. Ventajas y desventajas del programa WX Mini

1. Ventajas

(1) Asistente de WeChat, fácil de promocionar. En WeChat, los miniprogramas tienen muchas entradas, como miniprogramas cercanos, códigos de miniprogramas, compartir, miniprogramas de descubrimiento y más de 50 entradas. Estas entradas ayudan a las empresas a obtener mejor tráfico para conversión y monetización.
(2) Fácil de usar. Cuando los usuarios usan mini programas, solo necesitan un clic para usarlos, lo que está más en línea con las necesidades de conveniencia y velocidad de los usuarios, por lo que el número de usuarios de mini programas continúa aumentando.
(3) La experiencia es buena y cercana a la experiencia de la aplicación nativa. En el ecosistema WeChat, los miniprogramas pueden acabar instantáneamente con las páginas H5 en términos de funcionalidad y experiencia. Las páginas H5 a menudo sufren retrasos, retrasos, carga lenta, permisos insuficientes, etc. Sin embargo, estos problemas no ocurren en los miniprogramas.
(4) Costos más bajos. Desde los costos de desarrollo hasta los costos de operación y promoción, el costo de los mini programas es solo una décima parte del de las APP, lo que es una gran ventaja tanto para los empresarios como para los comerciantes tradicionales.

2. Insuficiente

(1) El tamaño de un solo paquete está limitado a 2 M, lo que imposibilita el desarrollo de aplicaciones a gran escala. El método de subcontratación máximo es 20 M (este valor siempre cambia, consulte el sitio web oficial).
(2) Debe revisarse y guardarse como una aplicación, lo cual es más problemático que el lanzamiento de H5.
(3) Todo está restringido por WeChat. Por ejemplo, no se puede compartir directamente en Moments y no se permiten miniprogramas cuando se trata de puntos o transacciones virtuales.

2. Estructura del proyecto del subprograma WX

1.páginas:
(1) wxml: donde está escrita la estructura de la interfaz del mini programa
(2) wxss: donde está escrito el estilo del mini programa
(3) json: donde está escrita la configuración de la interfaz
(4) js: donde está la lógica de la interfaz escrito
2.utils: Dónde escribir clases de herramientas
3.app.js: Dónde crear instancias de programas
4.app.json: Dónde escribir la configuración global
5.app.wxss: Dónde escribir estilos globales
6.project.config.json : Archivo de configuración del proyecto

3. La diferencia entre js en mini programa, navegador y nodo

1.js en el navegador

(1)ES

(2)DOM

(3) lista de materiales

2. js en el nodo

(1)ES

（2）MNP

(3) Nativo

3.js en el subprograma wx

(1)ES

(2) Marco del miniprograma

(3) Mini API del programa

El archivo de entrada para la ejecución del mini programa es app.js. Y el orden de ejecución de los archivos se determinará en función del orden de los módulos requeridos.

4. ¿Cuál es la diferencia entre la representación de datos en miniprogramas y en navegadores?

1. Representación de un solo subproceso en el navegador

2. El entorno de ejecución en el miniprograma se divide en capa de renderizado y capa lógica: WXML y WXSS funcionan en la capa de renderizado y js funciona en la capa lógica.

Cuando se muestra en la página, use la expresión de interpolación { { }}

5. Describe brevemente el modelo de comunicación del mini programa.

La capa de renderizado y la capa lógica del miniprograma son administradas por dos subprocesos respectivamente:

La interfaz de la capa de renderizado utiliza WebView para renderizar;

La capa lógica utiliza subprocesos JsCore para ejecutar scripts JS.

Un programa pequeño tiene múltiples interfaces, por lo que hay múltiples subprocesos WebView en la capa de representación. La comunicación entre estos dos subprocesos se transmitirá a través del cliente WeChat (Nativo también se usará para referirse al cliente WeChat a continuación) y la capa lógica. enviará solicitudes de red. También se reenviará a través de Native.

6. Cómo optimizar la primera velocidad de carga del mini programa (carga de subpaquete)

1. ¿Qué es la carga de subpaquetes?

En algunos casos, los desarrolladores necesitan dividir el programa pequeño en diferentes subpaquetes, empaquetarlos en diferentes subpaquetes durante la compilación y cargarlos según demanda cuando los usuarios los utilicen. El contenido del paquete principal se cargará cuando acceda al miniprograma por primera vez, y el contenido del subpaquete solo se cargará cuando acceda a la interfaz del subpaquete.

2. ¿Por qué recurrir a la subcontratación?

(1) El tamaño de un único paquete de miniprograma está limitado a 2 M y se puede ampliar a un máximo de 20 M mediante subpaquetes (al crear una aplicación grande)

(2) Optimice la velocidad de carga del miniprograma por primera vez. Los contenidos que no necesitan cargarse por primera vez se pueden colocar en subpaquetes, lo que puede mejorar el rendimiento del miniprograma (cuando los requisitos de rendimiento son relativamente alto)

3. Cómo utilizar la subcontratación

(1) Estructura del directorio

(2) Configuración (solo necesita configurarlo en app.json)

{ 
"pages":[ "pages/index", "pages/logs" ],
 "subpackages": [ 
    { 
        "root": "packageA", 
        "pages": [ "pages/cat", "pages/dog" ] 
    }, 
    {   
        "root": "packageB", 
        "name": "pack2", 
        "pages": [ "pages/apple", "pages/banana"] 
    } 
] 
}

(3) Restricciones a la subcontratación

a. Los subpaquetes no pueden hacer referencia a los js de los demás.

B. El paquete principal no puede hacer referencia a js subempaquetados.

(4) Subcontratación independiente

Subcontratación que no depende del paquete principal

Al configurar la subcontratación, agregue la configuración independiente para declararla como subcontratación independiente.

(5) Precarga de subcontratación

Al enrutar a una determinada interfaz, es posible que deba cargar el contenido de un determinado subpaquete para mejorar la velocidad de acceso a este subpaquete.

Simplemente configúrelo en app.json

{    
    "pages": ["pages/index"],   
    "subpackages": [      
        {
            "root": "important",
            "pages": ["index"]
        },{
            "root": "sub1",
            "pages": ["index"],
        },{
            "name": "hello",
            "root": "path/to",
            "pages": ["index"]
        }, {
            "root": "sub3",
            "pages": ["index"]
        },{
            "root": "indep",
            "pages": ["index"],
            "independent": true
        }
    ],   
    "preloadRule": {      
        "pages/index": {
            "network": "all",
            "packages": ["important"]
        },      
        "sub1/index": {        
            "packages": ["hello", "sub3"]
        },      
        "sub3/index": {        
            "packages": ["path/to"]          
        },      
    "indep/index": {        
        "packages": ["__APP__"]      
     }    
  }
}

7. Cómo configurar la barra de pestañas y precauciones

1. Configure la barra de pestañas ( Cabe señalar que el ícono de la barra de pestañas no puede ser una dirección en línea y debe prepararse con anticipación y colocarse en el proyecto. En circunstancias normales, estos recursos estáticos solo se pueden colocar en la carpeta de activos )

2. Escríbalo en el archivo app.json en el directorio raíz. Tenga en cuenta que debe haber al menos dos en la lista y solo cinco como máximo.

3. Cada objeto de la lista tiene cuatro atributos.

(1) pagePath: la ruta a la página correspondiente

(2) texto: texto mostrado

(3) iconPath: la ruta de ubicación del icono cuando no está seleccionado

(4) selectedIconPath: la ruta de ubicación del icono cuando se selecciona

"tabBar": {
    "color":"",
    "selectedColor": "#f00",
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./assets/shouye.png",
      "selectedIconPath": "./assets/shouye1.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "log",
      "iconPath": "./assets/bianji.png",
      "selectedIconPath": "./assets/bianji1.png"
    },
    {
      "pagePath": "pages/home/home",
      "text": "我的",
      "iconPath": "./assets/grzl.png",
      "selectedIconPath": "./assets/grzl1.png"
    }
  ]
  }

8. Componentes (etiquetas) de uso común en wxml

La etiqueta de vista es la etiqueta más utilizada en nuestro proceso de desarrollo y es equivalente al div en HTML.

La etiqueta de texto también se usa comúnmente en nuestro desarrollo, lo que equivale a span en HTML.

La etiqueta de imagen es equivalente a img en nuestro HTML.

9. La diferencia entre wxss y css

En comparación con CSS, las características de las extensiones WXSS son:

1. Unidad de tamaño : rpx (píxel sensible): se puede adaptar según el ancho de la pantalla. El ancho de pantalla especificado es 750 rpx. Por ejemplo, en iPhone6, el ancho de la pantalla es 375 px y hay 750 píxeles físicos en total, entonces 750 rpx = 375 px = 750 píxeles físicos, 1 rpx = 0,5 px = 1 píxel físico

2. Importación de estilo : utilice @importla declaración para importar la hoja de estilo externa, @importseguida de la ruta relativa de la hoja de estilo externa que debe importarse y ;finalice la declaración con "."

Por ejemplo: objetos a importar

/** common.wxss **/
.small-p {
  padding:5px;
}

Ubicación de importación

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
内联样式

10. Enlace de eventos y paso de parámetros en el subprograma WeChat

1. Definición de evento: los eventos vinculantes en un mini programa pueden comenzar con bind y luego seguir el tipo de evento. Por ejemplo, bindtap vincula un evento de clic y el valor correspondiente es una cadena. Debe definir una función con el mismo nombre en el constructor de la página. Después de que se activa el evento, se ejecutará el contenido de la función correspondiente.

<view bindtap="handleTap">点击事件</view>
<view bind:tap="handleTap">另一种写法</view>


// pages/my/index.js
Page({
  handleTap(){
    console.log("执行了点击事件");
  }
})

2. Evite la propagación de eventos : además de la vinculación, la vinculación de eventos también se puede realizar mediante captura en el miniprograma. Los eventos vinculados mediante captura no activarán la propagación de eventos.

3. Captura de eventos : la activación de eventos se divide en dos etapas, la primera es la etapa de captura y la segunda es la etapa de burbujeo. De forma predeterminada, los eventos se activan en la fase de burbujeo. Si desea que el evento se active durante la fase de captura, puede vincular el evento mediante capture-bind

4. Paso de parámetros de eventos : al pasar parámetros de eventos en un mini programa, no puede escribir parámetros entre paréntesis como en los proyectos web tradicionales. En el subprograma, los parámetros necesarios para el evento deben definirse en la etiqueta mediante el método de datos.

<!-- data-参数名=’参数值’ -->
<view bindtap="handleTap" data-msg="我是事件的参数">点击事件</view>

Cuando se activa cada devolución de llamada de evento, se recibirá un objeto de evento, a través del cual se pueden obtener los parámetros pasados por la ruta.

handleTap(e){
console.log("执行了点击事件");
	// 通过currentTarget中的dataset属性可以获取时间参数
    console.log(e.currentTarget.dataset.msg);
}

11. Métodos de representación lógica y de lista

1. Representación lógica

En WXML, use wx:if ="{ {condition}}" para determinar si es necesario representar el bloque de código.

<view wx:if="{
   
   {condition}}"> True </view>

Utilice wx:elif y wx:else para agregar un bloque else:

<view wx:if="{
   
   {length > 5}}"> 1 </view>
<view wx:elif="{
   
   {length > 2}}"> 2 </view>
<view wx:else> 3 </view>

Como wx:if es un atributo de control, es necesario agregarlo a una etiqueta. Si desea juzgar varias etiquetas de componentes a la vez, puede usar una etiqueta <block/> para envolver múltiples componentes y usar el atributo de control wx:if en ella.

<block wx:if="{
   
   {true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

Además, el subprograma WeChat también puede realizar renderizado condicional a través del atributo oculto. wx:if eliminará el DOM correspondiente cuando no se cumpla la condición. El atributo oculto realiza una representación condicional configurando el atributo de visualización en ninguno.

<view hidden="{
   
   {condition}}">
隐藏
</view>

2. Representación de listas

Utilice la propiedad de control wx:for en un componente para vincular una matriz y representar repetidamente el componente utilizando los datos de cada elemento de la matriz. De forma predeterminada, el nombre de la variable de subíndice del elemento actual en la matriz por defecto es index, y el nombre de la variable del elemento actual en la matriz por defecto es item .

<!-- array 是一个数组 -->
<view wx:for="{
   
   {array}}">
  {
   
   {index}}: {
   
   {item.name}}
</view>

Utilice wx:for-item para especificar el nombre de la variable del elemento actual de la matriz y utilice wx:for-index para especificar el nombre de la variable del índice actual de la matriz . (Es necesario personalizar cuando se anidan bucles)

<view wx:for="{
   
   {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
   
   {idx}}: {
   
   {itemName.name}}
</view>

Nota: Utilice wx:key para especificar un identificador único para un elemento de la lista.

El valor de wx:key se proporciona de dos formas:

(1) Cadena, que representa una determinada propiedad del elemento en la matriz del bucle for. El valor de la propiedad debe ser la única cadena o número en la lista y no se puede cambiar dinámicamente.

(2) La palabra clave reservada this representa el elemento en sí en el bucle for. Esta representación requiere que el elemento en sí sea una cadena o número único.

El beneficio de establecer el valor clave : cuando los cambios en los datos hacen que la capa de renderizado se vuelva a renderizar, los componentes con la clave se corregirán. El marco se asegurará de que se reordenen en lugar de volver a crearse para garantizar que los componentes mantengan su propio estado y mejorar la lista. Eficiencia de renderizado

12. El ciclo de vida de App.js, el ciclo de vida de la página y el ciclo de vida de los componentes.

1.El ciclo de vida de app.js

onLaunch: cuando se complete la inicialización del mini programa, se activará onLaunch (solo se activa una vez a nivel global)

onShow: cuando el mini programa se inicia o ingresa a la pantalla de primer plano desde el fondo, se activará onShow.

onHide: cuando el mini programa pasa al fondo desde el primer plano, se activará onHide.

onError: cuando se produce un error de secuencia de comandos en el subprograma o falla la llamada a la API, se activará onError con información de error.

2. Ciclo de vida en la página.

onLoad: función de ciclo de vida: escucha la carga de la página y se activa antes que onShow y onReady

onReady: función de ciclo de vida: escuche la finalización de la representación inicial de la página

onShow: función de ciclo de vida: escuche la visualización de la página, active eventos antes que onReady

onHide: función de ciclo de vida: escucha la ocultación de páginas

onUnload: función de ciclo de vida: escucha la descarga de la página

3. Ciclo de vida de los componentes

ciclo vital	parámetro	describir	Versión mínima
creado	ninguno	Se ejecuta cuando se acaba de crear la instancia del componente.	1.6.3
adjunto	ninguno	Se ejecuta cuando la instancia del componente ingresa al árbol de nodos de la página	1.6.3
listo	ninguno	Ejecutado después de que el componente se presenta en la capa de vista.	1.6.3
movido	ninguno	Se ejecuta cuando la instancia del componente se mueve a otra ubicación en el árbol de nodos.	1.6.3
separado	ninguno	Se ejecuta cuando se elimina una instancia de componente del árbol de nodos de la página	1.6.3
error	`Object Error`	Se ejecuta cada vez que un método de componente arroja un error	2.4.1

13. Métodos de retroalimentación de interacción del usuario (carga, wx.showToast, wx.showModal)

1. Utilice el atributo de carga del componente del botón para mostrar una Carga delante del texto del botón.

2.wx.showToast muestra mensajes (generalmente utilizados junto con wx.hideToast)

wx.showToast（{
        title: '已发送',
        icon: 'success',
        duration: 1500
}）

//例如点击显示提示，在请求成功后通过wx.hideToast关闭提示

wx.hideToast()

3.wx.showModal cuadro de diálogo modal

wx.showModal({

      title: '标题',

      content: '告知当前状态，信息和解决方法',

      confirmText: '主操作',

      cancelText: '次要操作',

      success: function(res) {

        if (res.confirm) {

          console.log('用户点击主操作')

        } else if (res.cancel) {

          console.log('用户点击次要操作')

        }

      }

    })

14. Método de almacenamiento local en el subprograma WeChat

(1) Sincronización

1. Almacenamiento: wx.setStorageSync('lista', {edad:5})

2. Obtener: wx.getStorageSync('lista')

  //本地同步缓存

  syncSet(){

    console.log('这是同步缓存');

    wx.setStorageSync('sync', {content:'这是同步缓存'})

  },

  //本地同步获取

  syncGet(){

    console.log(wx.getStorageSync('sync'));

  },

(2) Asincrónico

1.Almacenamiento: wx.setStorage({})

2. Obtener: wx.getStorage({})

  //本地异步存储

  asyncSet(){

    wx.setStorage({

      key:'async',

      data:'这是异步存储的数据',

      success(){

        console.log('异步存储');

      }

    })

  },

  //本地异步获取

  asyncGet(){

    wx.getStorage({

      key:'async',

      success(res){

        console.log(res);

      }

    })

  },

15. Salto de página entre mini programas.

1.wx.navigateTo
conserva la página actual, solo puede abrir páginas que no sean de barra de pestañas y regresa a esta página cuando regresa.

wx.navigateTo({ url: 'dirección de ruta', })

2.wx.redirectTo
cierra y descarga la página actual y solo puede abrir páginas que no sean de barra de pestañas.

wx.redirectTo({ url: 'dirección de ruta' })

3.wx.switchTab
cierra todas las páginas que no son de barra de pestañas y solo puede abrir páginas de barra de pestañas.

wx.switchTab({ url: 'dirección de ruta' })

4.wx.reLaunch
cierra y descarga todas las páginas y puede abrir cualquier página

wx.reLaunch({ url: 'dirección de ruta' })

5.wx.navigateBack
vuelve a la página anterior. Puede especificar cuántas páginas devolver. Si se utiliza redirigir a, la página cerrada no se devolverá.

wx.navigateBack({ delta: 2 //Número de páginas devueltas, si delta es mayor que el número de páginas existentes, regrese a la página de inicio. } )

6.etiqueta del navegador

La dirección URL agregada a la etiqueta del navegador puede saltar a una página que no sea TabBar.
Si desea saltar a la página TabBar, puede agregar open-type='switchTab' y puede saltar a la página TabBar, que es esencialmente equivalente a la función wx.switchTab.

16. Pasar parámetros en la página del mini programa.

1. Transferencia de parámetros de salto de ruta

¿Se pueden pasar parámetros de salto de enrutamiento? Parámetros de empalme.

wx.switchTab({

      url: '../todolist/todolist?id=789',

   })

//或者navigator标签

<navigator url="../detail/detail?id=666">带参数去detail</navigator>

Después de saltar a la interfaz especificada, puede obtener los parámetros de salto de ruta desde el parámetro de opciones (en sí mismo un objeto) en el método onLoad de la página.

  onLoad(options) {

    console.log(options);

  },

2. Si desea pasar los parámetros de datos en la etiqueta, puede personalizar los atributos, obtener los parámetros a través de e en el evento correspondiente y luego unirlos en la ruta de salto del evento.

 //wxml中

 <button bindtap="navigateTo" data-num="10">wx.navigateTo</button>

//js中

navigateTo(e){

    console.log(e.target.dataset.num);

    wx.navigateTo({

      url: '/pages/detail/detail?id=999&num='+e.target.dataset.num,

    })

  },

17. Cómo usar y encapsular wx.request

1.Uso de http (wx.request)

        Dirección de la interfaz del servidor del desarrollador URL. Tenga en cuenta que el nombre de dominio debe configurarse aquí (tenga en cuenta que la configuración del proyecto y la información del nombre de dominio deben cambiarse, vaya a la administración del desarrollador del subprograma web, modifique y separe varios bloqueando (;)) los conjuntos de encabezados de parámetros de solicitud         de
        datos
el encabezado de la solicitud, que no se puede establecer en el encabezado Referer, encabezado predeterminado ['content-type'] =
        método 'application/json' (se requiere mayúscula) Valores válidos: OPCIONES, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        dataType formato de contenido del paquete de devolución json, si está configurado. Si es json, intentará realizar un análisis JSON exitoso de los datos devueltos
        y recibirá la función de devolución de llamada devuelta exitosamente por el servicio de desarrollador.
        fail La función de devolución de llamada que no puede llamar a la interfaz
        completa La función de devolución de llamada que finaliza cuando se completa la llamada a la interfaz (se ejecutará si la llamada es exitosa o fallida)

wx.request({

      url: 'https://showme.myhope365.com/api/cms/article/open/list',

      method: "POST",

      data: {

        pageNum: 1,

        pageSize: 10

      },

      header: {

        "content-type": "application/x-www-form-urlencoded"

      },

      success: res => {

        console.log(res.data.rows)

      }

})

2. Encapsulación de solicitudes http

efecto:

Agregar configuración de solicitud unificada
Puede agregar interceptores de solicitudes e interceptores de respuestas, y agregar algún procesamiento común antes de las solicitudes y respuestas.

function request(options) {

  // 请求拦截器

  //  ...

  // 1. 加一些统一的参数，或者配置

  if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {

    options.url = "https://showme.myhope365.com" + options.url

  }

// 默认的请求头

  let header = {

    "content-type": "application/x-www-form-urlencoded",

  };

  if (options.header) {

    header = {

      ...header,

      ...options.header

    }

  }

  return new Promise((reslove, reject) => {

    // 调用接口

    wx.request({

      // 默认的配置

      // 加载传入的配置

      ...options,

      header,

      success(res) {

        // 响应拦截器，所有接口获取数据之前，都会先执行这里

        //  1. 统一的错误处理

        if (res.statusCode != 200) {

          wx.showToast({

            title: '服务器异常，请联系管理员',

          })

        }

        reslove(res)

      },

      fail(err) {

        reject(err)

      }

    })

  })

}

export function get(url, options = {}) {

  return request({

    url,

    ...options

  })

}

export function post(url, data, options = {}) {

  return request({

    url,

    data,

    method: "POST",

    ...options

  })

}

18. Uso de componentes y slots en mini programas.

(1) Uso de componentes

1. Cree una nueva carpeta de componentes.

2. Cree una nueva carpeta para generar componentes.

Componente({ /**

* Lista de propiedades de componentes

*/

propiedades: { },

/**

*Datos iniciales del componente

*/

datos: { },

/**

* Lista de métodos de componentes

*/

métodos: { }

})

3. Agregue al archivo json el archivo que desea usar.

{

  "usandoComponentes": {

    "Nombre del componente": "Ruta del componente"

  }

}

(2) Uso de tragamonedas

(1) El texto escrito directamente en el componente se colocará en la ranura predeterminada

(2) De forma predeterminada, solo puede haber una ranura en el wxml de un componente. Cuando necesite utilizar varias ranuras, puede declararlas y habilitarlas en el componente js.

Component({ opciones: { multipleSlots: true // Habilitar soporte de múltiples ranuras en las opciones al definir el componente }, propiedades: { /* ... */ }, métodos: { /* ... */ } })

//En componente

<nombre de la ranura="antes"></ranura>

<view>Aquí están los detalles internos del componente</view>

<nombre de la ranura="después"></ranura>

//Dónde utilizar

<son1>Este es el texto colocado en el espacio predeterminado



<view slot="before">Aquí está el contenido insertado en el componente name="before"</view>



<view slot="after">Aquí está el contenido insertado en el componente name="after"</view>

</son1>

19. Cómo pasar parámetros entre componentes padre e hijo

1. Pasar de padre a hijo: agregue atributos personalizados a la etiqueta del componente secundario utilizada en el componente principal, acéptela a través de las propiedades en el componente secundario y luego úsela en el componente secundario.

//componente padre

<son1 canshu='kaixuan' >Este es el texto colocado en el espacio predeterminado



<view slot="before">Aquí está el contenido insertado en el componente name="before"</view>



<view slot="after">Aquí está el contenido insertado en el componente name="after"</view>

</son1>

//Subcomponente js

propiedades : {

canshu:{

tipo:[Número,Cadena],

valor: 'valor predeterminado'

}

},

//Subcomponente wxml

<view style="color: rojo;"> 父传子 { {canshu}}</view>

2. Pasar de hijo a padre: vincule un método al componente hijo, escriba el método en los métodos del componente hijo js, pase los parámetros a través de this.triggerEvent y luego use bind: en el componente padre para vincular un self a la etiqueta del componente secundario. Defina el evento. El tipo de evento debe ser consistente con el del componente secundario. Escriba el nombre del evento de manera casual, y luego podrá obtener y cambiar el valor del componente principal en el evento correspondiente del componente principal a úsalo.

(1) Vincule un método al subcomponente, escriba el método en los métodos del subcomponente js y pase los parámetros a través de this.triggerEvent

métodos: {

    //padre hijo

    al Padre(){

         this.triggerEvent('mievento','Datos pasados de hijo a padre')

    },

  }

(2) Luego use bind: en el componente principal para vincular un evento personalizado a la etiqueta del subcomponente. El tipo de evento debe ser consistente con el del subcomponente y el nombre del evento se puede escribir de manera informal.

<son1 bind:myevent='myevent' >Este es el texto colocado en el espacio predeterminado



<view slot="before">Aquí está el contenido insertado en el componente name="before"</view>



<view slot="after">Aquí está el contenido insertado en el componente name="after"</view>

</son1>

(3) Luego, en el evento correspondiente del componente principal, puede obtener y cambiar el valor del componente principal para usar.

//Obtener el valor pasado del hijo al padre

mievento(res){

consola.log(res);

this.setData({

fromSon:res.detalle

})

},

//Usar en el componente principal

<vista>{ {fromSon}}</vista>

20. Cómo utilizar el comportamiento

Behaviors registra un comportamiento y acepta un parámetro de tipo Objeto

módulo.exportaciones = Comportamiento({

creado(){

consola.log(1111);

},

})

Introducido en el js del componente a utilizar.

importar comportamiento desde "../../behavior/behavior"

Componente({

comportamientos:[Comportamiento],

...

}）

Tenga en cuenta que todo el ciclo de vida se completará, pero si la combinación tiene el mismo nombre que los datos del componente, lo siguiente sobrescribirá lo anterior.

Reglas de anulación y combinación para campos con el mismo nombre

Los componentes y sus referencias behavior pueden contener campos con el mismo nombre. Estos campos se procesan de la siguiente manera:

Si hay propiedades o métodos con el mismo nombre:
1. Si el componente en sí tiene esta propiedad o método, la propiedad o método del componente anulará behavior la propiedad o método del mismo nombre;
2. Si el componente en sí no tiene esta propiedad o método, la propiedad o método behaviors posterior behavior definido en el campo del componente anulará la propiedad o método anterior con el mismo nombre;
3. Sobre la base de 2, si hay referencias anidadas behavior , la regla es: 引用者 behavior anular 被引用的 behavior la propiedad o método del mismo nombre.
Si hay un campo de datos con el mismo nombre:
- Si los campos de datos con el mismo nombre son todos tipos de objetos, los objetos se fusionarán;
- En otros casos, los datos se sobrescribirán y las reglas de sobrescritura son: 引用者 behavior > 被引用的 behavior , 靠后的 behavior > 靠前的 behavior. (El que tiene mayor prioridad anula el que tiene menor prioridad y el más grande tiene la mayor prioridad)
Las funciones del ciclo de vida y los observadores no se cubrirán entre sí, pero se llamarán uno por uno en el momento de activación correspondiente:
- Para diferentes funciones del ciclo de vida, siga el orden de ejecución de las funciones del ciclo de vida de los componentes;
- Para el mismo tipo de funciones de ciclo de vida y los mismos observadores de campo, siga las siguientes reglas:
  - behavior Priorizar la ejecución sobre los componentes;
  - 被引用的 behavior Prioridad sobre 引用者 behavior la ejecución;
  - 靠前的 behavior Prioridad sobre 靠后的 behavior la ejecución;
- behavior Si un componente hace referencia al mismo varias veces, las funciones del ciclo de vida y los observadores que define no se ejecutarán repetidamente.

21. Uso de WebSocket

Para obtener más información, consulte mi artículo independiente vinculado a continuación:

(2 mensajes) El uso de WebSocket_eventualmente llegará, blog-blog CSDN https://blog.csdn.net/gkx19898993699/article/details/128023620?spm=1001.2014.3001.5502