uni-app中uni.navigateToMiniProgram实现两个小程序互相跳转

uni-app中uni.navigateToMiniProgram实现两个小程序互相跳转
在安卓中 uni.navigateToMiniProgram 跳转到另一个小程序，再从另一个小程序通过 uni.navigateToMiniProgram 再回到原来的小程序，返回的时候不会显示询问弹窗。而苹果返回的时候为什么会出现弹窗，有没有大佬解释一下

2 回复

微信小程序吗？可以去微信社区问下官方人员

更多关于uni-app中uni.navigateToMiniProgram实现两个小程序互相跳转的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，通过uni.navigateToMiniProgram方法可以实现从一个小程序跳转到另一个小程序。这个功能在跨小程序合作或功能集成时非常有用。以下是如何在两个小程序之间实现互相跳转的代码案例。

1. 发起跳转的小程序（A小程序）

首先，在A小程序中，我们需要调用uni.navigateToMiniProgram方法。假设我们有一个按钮，点击后跳转到B小程序。

// A小程序 - pages/index/index.vue
<template>
  <view>
    <button @click="navigateToB">跳转到B小程序</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToB() {
      uni.navigateToMiniProgram({
        appId: 'wxb123456789abcdef', // B小程序的appId
        path: 'pages/index/index',   // B小程序中的页面路径
        extraData: {
          foo: 'bar'                 // 传递给B小程序的数据
        },
        envVersion: 'release',       // 正式版，如果是开发版则填'develop'，体验版填'trial'
        success(res) {
          console.log('跳转成功', res);
        },
        fail(err) {
          console.error('跳转失败', err);
        }
      });
    }
  }
}
</script>

2. 接收跳转的小程序（B小程序）

在B小程序中，我们需要在app.json文件中声明接受来自其他小程序的跳转，并在目标页面中接收传递的数据。

// B小程序 - app.json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "B小程序"
  },
  "miniProgramRoot": "./", // 必须声明此字段，允许被其他小程序打开
  "navigateFromMiniProgramWhitelist": [ // 白名单，允许哪些小程序跳转过来
    "wxa123456789abcdef" // A小程序的appId
  ]
}

在B小程序的目标页面中，我们可以通过onShow或onLoad生命周期函数获取传递过来的数据。

// B小程序 - pages/index/index.js
Page({
  onLoad(options) {
    console.log('接收到的数据', options.extraData); // 输出：{ foo: 'bar' }
  }
});

注意事项

  • 确保两个小程序都已经发布，并且appId正确无误。
  • 跳转功能需要用户手动触发，不能自动跳转。
  • navigateToMiniProgram方法需要用户授权，用户在首次使用时需要点击确认。
  • 跳转路径path需要是在B小程序app.json中声明的页面路径。

通过上述代码，你就可以在uni-app中实现两个小程序之间的互相跳转功能。

回到顶部