小程序与小程序之间相互跳转、传值、接收参数、navigator、navigateToMiniProgram

闲来无事垂钓

已于 2023-02-15 13:27:17 修改

阅读量1.5w

点赞数 12

CC 4.0 BY-SA版权

分类专栏：微信小程序学习笔记文章标签：微信小程序之间跳转小程序相互跳转小程序接收小程序传参 extra-data navigator

于 2021-07-26 18:09:04 首次发布

本文链接：https://blog.csdn.net/qq_39109182/article/details/119115154

微信小程序学习笔记专栏收录该内容

40 篇文章

订阅专栏

小程序之间相互跳转的2种方法，以及接收另一个小程序传参

一、通过标签 navigator 直接跳转

二、通过事件触发 wx.navigateToMiniProgram 跳转

三、小程序接收另一个小程序传参

一、通过标签 navigator 直接跳转

<navigator target="miniProgram" open-type="navigate" app-id="要跳转的小程序APPID" path="要跳转的小程序页面" version="开发版/体验版/正式版" extra-data="给要跳转的小程序传的参数">
    点击跳转都其他小程序
</navigator>

例如小程序A 和小程序B， A要唤起B小程序

关于 extra-data 的写法，如果格式写得不对会出现 extra-data="null"的情况，可以写死或动态值

1、直接写死在页面上 extra-data="{{ {name: test} }}"

2、在data中定义页面获取 extra-data="{{wxExtraData}}"

<!-- A 小程序-->  
<!-- 注 <navigator>标签不能放在 <text>标签里 -->  
<!-- path 的路径上也可以放参数  -->  
<view>
    <navigator open-type="navigate" target="miniProgram"  app-id="B小程序的appid" path="pages/index?name=test222"  extra-data="{{ {id: 3} }}" version="develop">跳转到B小程序</navigator>
    <navigator open-type="navigate" target="miniProgram" app-id="B小程序的appid" path="pages/index?name=test222" extra-data="{{wxExtraData}}" version="develop" >跳转到B小程序</navigator>
</view>

//A小程序 点击跳转的页面的 .js文件中
data:{
    ExtraData:{
        name:"test",
        id:1
    }
}

注意：app-id="这里面千万别有空格，否则不报错还无法跳转"

关于 target、open-type、path、extra-data、version以及其他参数详细见文档：navigator | 微信开放文档

二、通过事件触发 wx.navigateToMiniProgram 跳转

wx.navigateToMiniProgram({
    appId: '要唤起的小程序的appid',
    path: '',//要打开B小程序的页面
    extraData: { },//需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据
    envVersion: 'develop',//打开的对应小程序环境：开发develop、体验trial、生产release 
    success(res) {
        console.log('打开成功',res)
    }
})

例如：

<!-- A小程序页面 -->
<view bindtap="testTo">点击跳转到 B 小程序</view>

// A小程序 .js
testTo(options){
    wx.navigateToMiniProgram({
        appId: 'xxxx',
        path: 'pages/index?name=第2个',//要打开B小程序的页面，这里是index
        extraData: { //给B小程序传的参数
          name: '第二种跳转方法',
          id:1,
          age:[18,19]
        },
        envVersion: 'develop',//打开的对应小程序环境：开发、体验、生产 ，这里是开发版
        success(res) {
          console.log('打开成功',res)
        }
     })
}

关于 wx.navigateToMiniProgram 详见官方文档：wx.navigateToMiniProgram(Object object) | 微信开放文档

wx.navigateToMiniProgram(Object object) | 微信开放文档

三、小程序接收另一个小程序传参

方式一和方式二跳转接收参数都一样

B小程序接收A传递过来的值，直接在onShow或者onLaunch中获取

注意：onLaunch 应用程序启动时触发一次，之后小程序进入后台在此打开不会触发，可根据自己的场景选择具体用哪个

//B小程序 app.js 中
onShow(options) {
    console.log('index.js onShow====',options)
}
onLaunch(options) {
    console.log('app.js onLaunch====',options)
}

①、在 path 路径上拼接的参数在 query下

②、在 extra-data 中传的参数在 referrerInfo 下

B小程序运行打印结果如下

①、第一种方式打印结果