uniapp 페이지 간에 매개변수를 전달하는 여러 방법

uniapp 페이지 간에 매개변수를 전달하는 여러 방법

Uniapp에서 전달하는 매개 변수는 주로 다음 세 가지 유형으로 나뉩니다.

1. 상위 페이지 → 하위 페이지(단방향)
2. 상위 페이지 ← 하위 페이지(단방향)
3. 상위 페이지 ↔ 하위 페이지(양방향)

이 기사에서는 이 세 가지 매개 변수에 초점을 맞추고 사용 방법과 사용 중에 발생한 문제 및 해결 방법을 공유합니다.

1. 상위페이지 → 하위페이지(단방향)

uni.navigateTo: URL 프로그램 매개변수 전송

가장 일반적으로 사용되는 가장 간단한 매개 변수 점프 및 운반 API이므로 여기서는 자세히 설명하지 않습니다. 더 알고 싶은 친구는 공식 문서로 이동하여 배울 수 있습니다. 여기에서는 매개 변수만 공유합니다.

공식 문서: uni.navigateTo(OBJECT)

정적 매개변수 수행

//在起始页面跳转到test.vue页面并传递参数
//作用场景，需要提供固定传参状态的页面，一般和动态参数一起使用
uni.navigateTo({
    
    
	url: 'test?id=1&name=uniapp'
});

동적 매개변수 수행

//在起始页面跳转到test.vue页面并传递参数
let uniapp = {
    
    
    uniappItem: 0,
};
//当传递的参数是对象时，必须先转化为JSON格式
uni.navigateTo({
    
    
	url: 'test?id=1&name=' + JSON.stringify(uniapp),
});

페이지 수신

// 在test.vue页面接受参数
export default {
    
    
	onLoad: function (option) {
    
     //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

<navigator> 태그 매개변수 전달

URL은 길이 제한이 있어 문자열이 너무 길면 전송에 실패합니다.대신 폼 통신 및 글로벌 변수를 사용할 수 있습니다. 또한 파라미터에 공백과 같은 특수 문자가 있는 경우 파라미터를 인코딩해야 합니다 다음은 encodeURIComponent파라미터를 이용하여 인코딩하는 예입니다.

레이블 매개변수

//此处的 :URL 是动态载入，参数是变量;
//当使用了 :URl 却使用了静态地址，有可能不生效，同样如果使用了变量却没有用 :URL 也会有问题
<navigator :url="'/pages/test/test?item='+ encodeURIComponent(JSON.stringify(item))">
</navigator>

페이지 수신

// 在test.vue页面接受参数
onLoad: function (option) {
    
    
	const item = JSON.parse(decodeURIComponent(option.item));
}

2. 상위페이지 ← 하위페이지(단방향)

일반적으로 uni.navigateTo 매개 변수 전송은 페이지 전송을 만족시킬 수 있지만 상위 수준 페이지를 업데이트해야 하는 경우 uni.emit() 및 uni.emit() 및 uni를 사용해야 합니다.페이지 간 통신을 위한$em$$i$$t$$($$)$$및$$un$$i$$.on$$(\; )$$.$

이 방법은 일반적으로 하위 페이지(또는 컴포넌트)에서 데이터를 변경하고 상위 페이지에 새로 고침을 알리거나 다른 작업을 수행할 때 사용되며, 몰라도 상관 없습니다.

uni.$on(eventName, callback): 이벤트 수신

상위 페이지에서 하위 페이지의 호출을 모니터링 uni.$emit()하도록 . 여기서 eventName은 이벤트 이름이고 두 번째 매개변수는 함수를 수신한 후 트리거되는 콜백 함수입니다. 리스닝 이벤트가 끝나면 리스닝 이벤트를 제거해야 합니다. 그렇지 않으면 반복 모니터링 문제가 발생합니다.

// 我的页面  
onLoad(){
    
      
    // 监听事件  
    uni.$on('login',(usnerinfo)=>{
    
      
        this.usnerinfo = usnerinfo;  
    })  
},  
onUnload() {
    
      
    // 移除监听事件  
    uni.$off('login');  
},

트리거 이벤트

전달된 매개변수는 개체의 속성이어야 합니다.

uni.$emit('login', {
    
      
	avatarUrl: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/nav_menu/10.jpg',  
	token: 'user123456',  
	userName: 'unier',  
	login: true  
});

3. 상위페이지 ↔ 하위페이지(양방향)

일반적으로 단방향 전송은 표시할 매개변수 전달 및 하위 수준 페이지로 상태 변경, 업데이트해야 하는 데이터 또는 상위 수준으로 다시 호출해야 하는 기능과 같은 비즈니스 요구를 이미 충족할 수 있습니다. 페이지.

그러나 밀접하게 관련된 두 페이지를 만나면 단방향 전송은 비즈니스 요구를 충족할 수 없으며 매개변수를 전달하고 이벤트를 하위 수준 페이지로 모니터링하는 것이 특히 번거로울 것입니다. uniapp에서는 위의 두 가지 전달 방법을 결합하여 양방향 전달을 달성하는 방법을 제공합니다.uni.navigateTo({ event:{} })

상위 페이지의 코드

// 在起始页面跳转到test.vue页面，并监听test.vue发送过来的事件数据
uni.navigateTo({
    
    
  url: 'pages/test?id=1',
  // 调用通信事件对象
  events: {
    
    
    // 获取下级页面参数：
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    // 注意看下级页面中所对应的函数名，你可以定义多个方法去管理传递的参数
    acceptDataFromOpenedPage: function(data) {
    
    
      // 对数据做处理
      console.log(data)
    },
    someEvent: function(data) {
    
    
      // 对数据做处理
      console.log(data)
    }
  },
  // 发送通信方法
  success: function(res) {
    
    
    // 通过eventChannel向被打开页面传送数据
    // 其中含有两个参数，第一个是接收的函数名，第二个则是需要携带的参数
    res.eventChannel.emit('acceptDataFromOpenerPage', {
    
     data: 'data from starter page' })
  }
})

하위 페이지 코드

// 在test.vue页面，向起始页通过事件传递数据
// 此方法不是一定要在 onLoad 内调用，哪里需要哪里调
onLoad: function(option) {
    
    
  // 此处声明只是为了显示看起来简洁一点
  const eventChannel = this.getOpenerEventChannel();
  // emit 代表的就是向上一个页面传递需要更新的数据
  eventChannel.emit('acceptDataFromOpenedPage', {
    
    data: 'data from test page'});
  eventChannel.emit('someEvent', {
    
    data: 'data from test page for someEvent'});
  // 接收上个页面传递的数据
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    
    
    // 对数据做处理
    console.log(data)
  })
}