当“uniapp-微信小程序”遇上“uniapp-微信小程序”

403 阅读1分钟

当“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",
    });
},