mpvue框架下实现小程序之间的跳转功能（小程序与小程序的跳转，小程序之间跳转传参）

阳光穿透心脏的1/2处 2023-07-19 05:56 74阅读 0赞

在开发小程序的时候，有时候我们的小程序需要跳转到其他的小程序里面去，这个官方也提供了方法给我们，`wx.navigateToMiniProgram(Object object)`方法，这个方法有三个要注意的点。这个事件必须用户手动点击才能触发，必须用户点击确定才能触发跳转，一个小程序不能跳转超过10个以上的小程序。

具体的配置可以从去官方文档里面看下  
[https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html][https_developers.weixin.qq.com_miniprogram_dev_api_open-api_miniprogram-navigate_wx.navigateToMiniProgram.html]

下面介绍在mpvue框架中怎么使用这个功能。  
我个人实现小程序之间跳转这个功能的话，一般会单独使用一个js抽离出来。因为可能不止一个地方需要用到，而且不止只跳一个小程序。

新建一个`skip.js`文件

export function toMiniProgram (type) { 
        var path = '',
            appid = '';
        switch (type) { 
            case '1':
                appid = '第一个小程序的AppID';
                path = '跳转的路径'
                break;
            case '2':
                appid = '第二个小程序的AppID';
                path = '跳转的路径';
                break;
        }
        return {  path, appid };
    }

在需要使用小程序跳转功能的页面导入上面的方法

//html触发方式
     <view @tap="goMiniProgram('xyh-rights','你想传递给其他小程序的参数')"> 小程序跳转 </view>
    
      //导入方法
     import {  toMiniProgram } from "你放的实际路径/skip";
    
    methods = { 
    	//小程序跳转
        goMiniProgram(type, data = { }) { 
          let {  path, appid } = toMiniProgram (type, 1);
          console.log(path, appid);
          console.log("传值", data);
          wx.navigateToMiniProgram({ 
            appId: appid, //要打开的小程序 appId
            path: path, // 打开的页面路径，如果为空则打开首页。path 中 ? 后面的部分会成为 query，在小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数或小游戏的 wx.onShow 回调函数、wx.getLaunchOptionsSync 中可以获取到 query 数据。
            extraData: data, //需要传递给目标小程序的数据，目标小程序可在 App.onLaunch，App.onShow 中获取到这份数据。
            envVersion: "trial", //你要跳转的是体验版还是开发版，小程序体验版和开发之间是可以互相跳转的，你可以从体验版跳转到开发版，也可以从开发版跳转到体验版。如果当前小程序是正式版，则打开的小程序必定是正式版。
            success(res) { 
              console.log("res成功的回调", res);
            },
            fail(res) { 
    		  console.log("res失败的回调", res);
            }
          });
        },
    }

最后还要在`app.json`文件里面要配置`navigateToMiniProgramAppIdList`参数，它是一个数组对象，在里面配置你要跳转的其它小程序的AppID，截止到目前为止，配置的跳转小程序不能超过`10个`。

"navigateToMiniProgramAppIdList": [
             "......",
             "......",
             "......"
        ]

到这里就可以实现整个功能了。

个人水平有限，有问题欢迎大家留言指导，仅供学习和参考。

学海无涯！努力二字，共勉！

[https_developers.weixin.qq.com_miniprogram_dev_api_open-api_miniprogram-navigate_wx.navigateToMiniProgram.html]: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html