Resumen de la comunicación de la página uniApp, cómo transferir valores entre páginas

Revisión pasada

uniapp sube al foso para registrar uni.$on ¿Por qué no se pueden modificar los datos en data?

página del boletín

escena

Cuando saltamos de una página a otra, esperamos que los parámetros de la página a saltar se generen dinámicamente y puedan ser reutilizados. Por ejemplo, cuando estamos comprando en Taobao, hacemos clic en un producto e ingresamos a la página de detalles del producto. La relación correspondiente entre el producto y la página de detalles del producto requiere que la página comercial pase los parámetros de información del producto a la página de detalles del producto.

Y a veces incluso queremos pasar múltiples mensajes de comunicación. De esta forma, la página redirigida puede proporcionar una función de copia más diferenciada.

Plan de comunicación

número de serie	Método de comunicación	nombre del método	ventaja	defecto	escena aplicable
1	caché de página	uni.setStorage(OBJETO) uni.getStorage(OBJETO)	Caché global, todavía existe la próxima vez que lo abra, de fácil acceso, el oficial viene con un método de almacenamiento en caché síncrono y asíncrono	No apto para comunicación de páginas, caché de baja frecuencia. Debido a que el número es demasiado grande, es difícil de manejar	Variables dinámicas globales, como nombre de usuario, nivel de usuario, autoridad de usuario, etc.
2	Vue variables globales	vue.prototype.key=	Establecer una vez, usar globalmente	caché de la misma página	método empaquetado
3	comunicación de enrutamiento	uni.navegar a(OBJETO)	Agregue ?key=value a la url para establecer la variable saltando y tome la variable en onLoad. fácil de usar	Debe convertir el objeto en los parámetros correspondientes de la URL usted mismo, y la profundidad del objeto solo puede ser una capa, y la longitud de la URL es limitada	Pase de página de salto variable simple
4	página del boletín	uni.$emit(nombreEvento,OBJETO) uni.$on(nombreEvento,devolución de llamada)	Al usar la clave para la comunicación, puede comunicarse varias veces en lugar de empaquetar juntos, lo cual es conveniente para la iteración comercial	Problema de gestión de valor clave, se comunicará con el global, fácil de activar otras páginas por error	boletín mundial, boletín de la página
5	canal de comunicación, comunicación de eventos	EventChannel.emit(string eventName, any args)	Darse cuenta de la comunicación en el éxito del salto de enrutamiento	Solo comunicación de 1 a 1 página, no comunicación global	Boletín de página de salto

Resumen del plan de comunicación

Clasificación General de las Comunicaciones	Número de serie del método de comunicación	Funciones de comunicación
comunicación directa	3,4,5	Comunicación directa página por valor, adecuada para comunicación local y activación de página
comunicación indirecta	1,2	Adecuado para variables estáticas globales modificando y leyendo variables globales

La diferencia entre uni.$emit y EventChannel.$emit

	uni.$emitir	EventChannel.$emit
de padre a hijo	devolución de llamada en éxito	devolución de llamada en éxito
padre del niño	Cualquier posición	devolución de llamada en caso
alcance	global hasta que se destruya	Parcial, finaliza cuando se destruye la página
declaración	conciso	un poco complicado
Precaución	Si el oyente registrado por uni.on necesita ser destruido cuando la página sale	no hay necesidad de prestar atención

Cómo pasar de padre a hijo

Leí el método de padre a hijo durante mucho tiempo antes de encontrar el método de padre a hijo en el documento oficial.

Diagrama de secuencia de salto de página

PensardesencadenarDebe activarse después de la declaración, por lo que debemos activarlo en la función de devolución de llamada.

código real

//A页面
uni.navigateTo({
    
    
	url: url,
	success(res) {
    
    
		console.log('回调函数')
		uni.$emit('test',{
    
     value:'页面通讯测试' })//页面通讯
		res.eventChannel.emit('test_data', {
    
    value:'通道通讯测试'})//通道通讯
	}
})

//B页面

onLoad() {
    
    
	console.log('页面跳转成功')
	uni.$once('test',res=>{
    
    
		console.log('通讯成功！')
		console.log(res)
	})
	const eventChannel =this.getOpenerEventChannel()
	eventChannel.on('test_data',res=>{
    
    
		console.log(res)
		
	})
}

Uso recomendado de uni.$on y eventChannel.on

Los dos son en realidad similares en uso, y ambos pueden lograr el papel de padre a hijo, de hijo a padre. Pero debido al alcance, las variables eventetChannel en diferentes páginas pueden tener el mismo nombre, eventChannel es más adecuado para padre a hijo, uni.$on es adecuado para hijo a padre