Jump and pass parameters between applets and applets

Jump and pass parameters between applets:
applet A jumps to applet B and passes parameters; applet B returns to applet A and passes parameters; applet A receives the parameters returned by applet B and jumps to Go to the specified page

insert image description here

1. A applet jumps to B applet and passes parameters

Add a jump event to the Mini Program page, and use the uni.navigateToMiniProgram method to jump to the Mini Program

There are two ways for A applet to pass parameters to B applet:
1. Route splicing to pass parameters
2. Use the extraData attribute to pass parameters

insert image description here

code:

uni.navigateToMiniProgram({
    
    
			appId: 'wxf99918d7c56a1XXX',
			path: '/pages/payment/payment?orderSource=1' + '&appSource=1' + '&orderNo=' + this.orderNo + '&accessToken=' + this.accessToken + '&operNo=' + this.operNo, //跳转目标页面+携带参数
			extraData: {
    
    
				'orderSource': '1', //荣数标记位 ,1荣数
				'appSource': '1', // 应用来源， 1小程序
				'orderNo': this.orderNo,
				'accessToken': this.accessToken,
				'operNo': this.operNo,
			},
			envVersion: 'trial',
			success(res) {
    
    
				// 打开成功
			}
			// appId: 需要跳转的小程序APPID（ 必填， string）,
			// path: 需要跳转到小程序的对应页面（ 非必填， 跳转到默认页面， string）,
			// extraData: 携带的参数（ 非必填， object）,
			// envVersion: 要打开的小程序版本， 有效值： develop（ 开发版）， trial（ 体验版），
			// release（ 正式版）（ 非必填， 默认正式版， string）,
			// success: 接口调用成功的回调函数（ 非必填，function）,
			// fail： 接口调用失败的回调函数（ 非必填，function）,
			// complete： 接口调用结束的回调函数（ 调用成功、 失败都会执行）（ 非必填，function）
		})

2. Small program B receives small program A and passes parameters

1. Routing splicing and passing parameter
B applet receives parameters in the onLoad method

onLoad(options) {
    
    
  // options 参数包含了跳转时携带的参数
  const orderSource = options.orderSource;
  const appSource = options.appSource;
  const orderNo = options.orderNo;
  // 处理参数的逻辑
  console.log(orderSource, appSource, orderNo);
}

2. Use the extraData attribute to pass parameters, and the receiving parameter method of the B applet
receives parameters in the onShow method in app.vue, and stores the parameters in the state management
insert image description here

onShow(options) {
    
    
	console.log('小程序A参数', options)
	const orderSource = options.orderSource;
  	const appSource = options.appSource;
  	const orderNo = options.orderNo;
},

2. Mini Program B returns to Mini Program A and passes parameters

Add in applet B to use uni.navigateBackMiniProgram to return to applet A
You can add this method in the B applet click event, or onUload()

uni.navigateBackMiniProgram({
    
    
  extraData: {
    
    
    'data1': 'test' // 小程序B返回小程序A并传参
  },
  success(res) {
    
    
    // 返回成功
  }
})

3. Mini Program A receives the parameters returned by Mini Program B and jumps to the specified page

Method: Receive parameters in the onShow of App.vue, you can save the received parameters for state management, and at the same time get the returned page route, you can judge which applet B needs to jump to after returning to applet A according to the page route or return field page
insert image description here

insert image description here

code:

onShow(options) {
    
    
	console.log('收银台参数', options)
	if (options.path == 'pages/my/payment') {
    
    
		uni.redirectTo({
    
    
			url: '/pages/my/rongshu'
		})
	}
},