在開發小程序的時候,有時候我們的小程序需要跳轉到其他的小程序裏面去,這個官方也提供了方法給我們,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": [
"......",
"......",
"......"
]
到這裏就可以實現整個功能了。
個人水平有限,有問題歡迎大家留言指導,僅供學習和參考。
學海無涯!努力二字,共勉!