小程序与小程序之间相互跳转并传参

本文详细介绍了小程序A如何跳转到小程序B并传参,包括路由拼接和使用extraData属性两种方式。同时,阐述了小程序B如何接收参数以及如何通过uni.navigateBackMiniProgram返回小程序A并传参。最后,展示了小程序A如何在onShow中接收B返回的参数并据此跳转到指定页面。
摘要由CSDN通过智能技术生成

小程序与小程序之间的跳转及传参:
小程序A跳转小程序B并传参;小程序B返回小程序A并传参;小程序A接收小程序B返回的参数,并跳转指定页面


在这里插入图片描述

一、A小程序跳转B小程序并传参

在小程序页面中方法添加跳转事件,使用uni.navigateToMiniProgram方法跳转小程序

A小程序给B小程序传参有2种方式:
1、路由拼接传参
2、使用extraData属性传参

在这里插入图片描述

在这里插入图片描述

代码:

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)
		})

二、小程序B接收小程序A并传参

1、路由拼接传参
B小程序在onLoad方法中接收参数

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

2、使用extraData属性传参,B小程序的接收参数方法
在app.vue中的onShow方法中接收参数,并将参数存储到状态管理中
在这里插入图片描述

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

二、小程序B返回小程序A并传参

在小程序B中添加使用uni.navigateBackMiniProgram返回小程序A
可以在B小程序点击事件,或者onUload()中添加该方法

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

三、小程序A接收小程序B返回的参数,并跳转指定页面

方法:在App.vue的onShow中接收参数,可以将接收参数存状态管理,同时能拿到返回的页面路由,可以根据页面路由或返回字段判断B小程序返回A小程序后,需要跳到哪个页面
在这里插入图片描述

在这里插入图片描述

代码:

onShow(options) {
	console.log('收银台参数', options)
	if (options.path == 'pages/my/payment') {
		uni.redirectTo({
			url: '/pages/my/rongshu'
		})
	}
},
  • 4
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

smileAgain-lg

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值