Realize the jump function between applets under the mpvue framework (jump between applets and applets, jump and pass parameters between applets)

When developing small programs, sometimes our small programs need to jump to other small programs. This official method also provides us with methods. There are three points to pay attention to in this method wx.navigateToMiniProgram(Object object). This event must be manually clicked by the user to trigger, and the jump must be triggered by the user clicking OK. A small program cannot jump to more than 10 small programs.

The specific configuration can be viewed from the official document
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/miniprogram-navigate/wx.navigateToMiniProgram.html

The following describes how to use this function in the mpvue framework.
If I personally realize the function of jumping between small programs, I usually use a separate js to extract it. Because it may be used in more than one place, and it is not just a small program.

create a new skip.jsfile

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

Import the above method on the page that needs to use the applet jump function

  //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);
        }
      });
    },
}

Finally, you need app.jsonto configure navigateToMiniProgramAppIdListparameters in the file, which is an array object, and configure the AppID of other applets you want to jump to. So far, the configured jump applets cannot exceed 10个.

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

The whole function can be realized here.

The personal level is limited. If you have any questions, please leave a message for guidance. It is only for learning and reference.

There is no limit to learning! Work hard, encourage each other!

Guess you like

Origin blog.csdn.net/qq_37131884/article/details/105189703