mpvue框架下实现小程序之间的跳转功能(小程序与小程序的跳转,小程序之间跳转传参)

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

具体的配置可以从去官方文档里面看下
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": [
         "......",
         "......",
         "......"
    ]

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

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

学海无涯!努力二字,共勉!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章