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": [
         "......",
         "......",
         "......"
    ]

到這裏就可以實現整個功能了。

個人水平有限,有問題歡迎大家留言指導,僅供學習和參考。

學海無涯!努力二字,共勉!

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