当“uniapp-微信小程序”遇上“uniapp-微信小程序”
需求
- 微信小程序A打开小程序B,在小程序B中计算出结果,点击推荐科室,返回小程序A中科室排班页面。
- 小程序B中的接口需要小程序A传入appKey才可以使用。
1.小程序A打开小程序B,并传参
- 小程序A中使用
uni.navigateToMiniProgram方法,填写小程序B的appId和跳转路径path。 - 通过
uni.navigateToMiniProgram方法的extraData传参。
// 小程序A
uni.navigateToMiniProgram({
appId: "XXXXXXXXX",
path: "pages/index/index",
extraData: { appKey: "xxxxxx" },
});
2.小程序B接收传参
在小程序B的App.vue文件的onLaunch中接收,传参相关数据,在referrerInfo.extraData中,可存储相关数据,供后续使用。
// 小程序B App.vue
onLaunch: function (dataObj) {
// #ifdef MP-WEIXIN
const appKey = dataObj?.referrerInfo?.extraData?.appKey;
// #endif
}
3.小程序B返回小程序A,并传参
- 在小程序A中使用
uni.navigateBackMiniProgram方法,返回上一层小程序。 - 通过
uni.navigateBackMiniProgram方法的extraData传参。
// 小程序B res.vue
<script>
import jsWX from "weixin-js-sdk"; // 引入微信SDK
export default {
methods:{
handleClick(item){
// #ifdef MP-WEIXIN
uni.navigateBackMiniProgram({
extraData: {
from: "smartGuide",
backData: { appHisId: item.appHisId, officeName: item.officeName },
},
});
// #endif
}
}
}
</script>
4.小程序A接收传参
在小程序A的App.vue文件中接收,传参相关数据,在onShow方法res.referrerInfo.extraData中。
// 小程序A App.vue
onShow(res) {
// 1.是否从小程序返回
if (res.scene != "1038") return;
// 2.智能导诊返回科室数据处理
if (!res?.referrerInfo?.extraData) return;
const ExtraData = res.referrerInfo.extraData;
uni.navigateTo({
url: "/xxxx/xxxx/xxx",
});
},