引入
demo項目地址
很多場景下我們都希望通過url快速喚醒應(yīng)用，例如百度網(wǎng)盤，在網(wǎng)頁中喚醒應(yīng)用，并傳遞下載鏈接，在electron中要實現(xiàn)這樣的效果，就需要針對不同的平臺做對應(yīng)的處理。
實現(xiàn)效果
實現(xiàn)步驟
1.主進(jìn)程中補(bǔ)充調(diào)整代碼
- windows中需要注冊協(xié)議，指定被喚醒時如何處理url
- windows當(dāng)頁面被喚醒后，需要監(jiān)聽second-instance 事件，即啟動第二個實例的事件，這里我們直接控制應(yīng)用單實例，當(dāng)url企圖打開第二個實例的時候，我們聚焦第一個實例，并處理url參數(shù)
- mac中會監(jiān)聽open-url事件，我們只需在此事件中處理對應(yīng)的url地址即可
electron\main\index.ts
//*************** 應(yīng)用喚醒相關(guān) ********************/
// 注冊協(xié)議
const PROTOCOL = "bcxlelectrondemo";
/**添加注冊表信息 用于瀏覽器啟動客戶端 */
function registerScheme() {
const args = [];
if (!app.isPackaged) {
// 如果是開發(fā)階段，需要把我們的腳本的絕對路徑加入?yún)?shù)中
args.push(join(process.argv[1]));
}
// 加一個 `--` 以確保后面的參數(shù)不被 Electron 處理
args.push("--");
app.setAsDefaultProtocolClient(PROTOCOL, process.execPath, args);
handleArgv(process.argv);
}
// 處理瀏覽器打開應(yīng)用的啟動參數(shù)信息
function handleArgv(argv: string[]) {
const prefix = `${PROTOCOL}:`;
// 開發(fā)階段，跳過前兩個參數(shù)（`electron.exe .`）
// 打包后，跳過第一個參數(shù)（`myapp.exe`）
const offset = app.isPackaged ? 1 : 2;
const url = argv.find((arg, i) => i >= offset && arg.startsWith(prefix));
if (url) handleUrl(url);
}
// 房間號
let roomCode = "";
// 處理url打開應(yīng)用的請求
function handleUrl(url: string) {
// bcxlelectrondemo://joinRoom?roomCode=123
const urlObj = new URL(url);
const { searchParams } = urlObj;
roomCode = searchParams.get("roomCode") || "";
if (win && win.webContents) {
win?.webContents.send("launch-app", roomCode);
}
}
// 返回房間號，主要用于mac主動獲取，因為mac在執(zhí)行handleUrl操作時，可能頁面窗口還未初始化完成
ipcMain.on("get-roomCode", (e) => {
e.returnValue = roomCode;
});
// 注冊協(xié)議，用于瀏覽器打開應(yīng)用
registerScheme();
// macOS 下通過協(xié)議URL啟動時，主實例會通過 open-url 事件接收這個 URL
app.on('open-url', (event, urlStr) => {
handleUrl(urlStr);
});
//*************** 應(yīng)用喚醒相關(guān) ********************/
2.在src目錄下創(chuàng)建scripts目錄，然后新建一個appInit.ts文件，我們監(jiān)聽來自出主進(jìn)程的初始化通知
- src\scripts\appInit.ts
import { ipcRenderer } from "electron";
// 監(jiān)聽初始化
ipcRenderer.on("launch-app", (_, roomCode) => {
console.log("收到來自url的房間號：", roomCode);
});
測試代碼
我們在渲染進(jìn)程中補(bǔ)充代碼，主動獲取房間號文章來源：http://www.zghlxwxcb.cn/news/detail-595593.html
- 因為應(yīng)用通過url喚醒時，可能頁面窗口還未初始化完成，這時win是null，收不到“l(fā)aunch-app”的監(jiān)聽
- src\components\HelloWorld.vue
<template>
<el-button @click="getRoomCodeByUrl">獲取url中傳來的房間號</el-button>
</template>
<script>
// 通過瀏覽器喚醒應(yīng)用的url獲取房間號
function getRoomCodeByUrl() {
const roomCode = ipcRenderer.sendSync("get-roomCode");
myUtils.message(`房間號為：${roomCode}`, "success");
}
</script>
注意：安裝后必須打開一次應(yīng)用【應(yīng)用會在注冊表添加信息】，才能通過url進(jìn)行喚醒文章來源地址http://www.zghlxwxcb.cn/news/detail-595593.html
到了這里，關(guān)于electron+vue3全家桶+vite項目搭建【23】url喚醒應(yīng)用，并傳遞參數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
