web唤醒EXE程序『实现用户免登录流程』

---

前言

需求说明：
👉👉👉 在网页上点击启动exe, 同时传输必要的参数，实现客户端唤醒的同时实现用户自动登录。

---

项目环境：

/! WEB !/
vue：v2.6.11
vue-router: v3.2.0
vuex: v3.4.0

/! PC !/
vue-cli: v4.5.0
vue-cli-plugin-electron-builder: v2.0.0-rc.4

一、唤醒流程

二、实现方案

前提： 本文所述都是在window系统完成，仅供参考，如对您有所帮助，请关注❤️❤️❤️。

1. PC端注册自定义的伪协议(URL Scheme)

web想要唤醒本地exe，就需要用到URL Scheme协议：可以理解为用于实现浏览器跳转应用的协议。
本文使用electron-builder，使用nsis配置打包脚本，将自定义协议写入到windows下的注册表中。

# 协议脚本 installer.nsh
!macro customInstall
  DetailPrint "Register YOURNAME URI Handler"
  WriteRegStr HKCR "YOURNAME" "" "URL:VrPlatForm"
  WriteRegStr HKCR "YOURNAME" "URL Protocol" ""
  WriteRegStr HKCR "YOURNAME\shell" "" ""
  WriteRegStr HKCR "YOURNAME\shell\Open" "" ""
  WriteRegStr HKCR "YOURNAME\shell\Open\command" "" "$INSTDIR\${APP_EXECUTABLE_FILENAME} %1"
!macroend

!macro customUnInstall
  DeleteRegKey HKCR "YOURNAME"
!macroend

✨✨✨

将此nsis脚本配置到electron的打包项中，安装的时候协议就会自动写入注册表了

// vue.config.js 
// 根据实际情况可自行调整
module.exports = {
	...
	nsis: {
		 oneClick: false,
         perMachine: true,
         allowElevation: true,
         allowToChangeInstallationDirectory: true,
         // 是否在卸载时删除应用程序数据
         deleteAppDataOnUninstall: true,
         installerIcon: "./logo.ico",
         uninstallerIcon: "./logo.ico",
         installerHeaderIcon: "./logo.ico",
         createDesktopShortcut: true,
         createStartMenuShortcut: true,
         shortcutName: "YOUR NAME",
         include: "../installer.nsh"
	}
	...
}

👉👉👉更多NSIS设置参考文档👈👈👈

---

2. 启动客户端

// 直接在web页面内需要的地方以open url的方式，调用注册的协议名称即可
// 例：VRBOXVIT是你在installer.nsh脚本内设置的协议名称your name
window.location.href = "VRBOXVIT:?ut=xxx"
// 或者
window.location.href = "VRBOXVIT:url?ut=xxxxx"

// 上面第一种为缩写，协议名称后可以写完整url以及参数

---

3. 客户端接收参数并与渲染进程通讯

客户端在启动后，在主进程内接收参数，并发送给渲染进程，借以实现用户的自动登录流程

⁉️⁉️⁉️ 如何接受参数，并发送给渲染进程呢，请看下面 👇👇👇

// background.js vue-electron的的主进程
...
function createWindow() {
	win = new BrowserWindow({
        width: 1440,
        height: 820,
      	...
    })
    // 主进程监听是否web唤醒  
    win.webContent.on('did-finish-load',() => {
        // 主动触发second-instance,并传入参数统一处理
        app.emit('second-instance', null, process.argv)
    })
}

// 获取单实例锁: 防止启动多个客户端
const getTheLock = app.requestSingleInstanceLock();
if (!getTheLock) {
    // 如果获取失败，说明已经有实例在运行了，直接退出
    app.quit();
} else {
    // window唤醒-二次唤醒
    app.on('second-instance', (event, argv) => {
        // console.log(argv)
        // Windows 下通过协议URL启动时，URL会作为参数，所以需要在这个事件里处理
        if (process.platform === 'win32') {
            	/**
				* to do 处理web传递过来的参数
				* do some things
				*/
				// 向渲染进程中的web-start-app 发送相关参数
                win.webContent.send('web-start-app', argv)
                if(win.isMinimized()) win.restore()
                if(win.isVisible()) {
                    win.focus()
                } else {
                    win.show()
                    win.setSkipTaskbar(false)
                }
            }        
        }
    });
}
... 

// 在自己页面内监听 web-start-app即可
// vue component
window.ipcRenderer.on('web-start-app', (event, args) => {
	// do your do 
	// ...
})

---

😆😆😆至此，web唤醒exe应用，并实现用户免登录流程就已经完成了😆😆😆