VUE前端项目浏览器打开唤醒电脑应用程序(注册表协议,和node两种)

我们是在国产化申威龙芯上搞的,唤醒exe应用程序我这边首先是两个思路,1是使用nonde,在vue中使用node进行打开,.2是使用添加注册表协议然后来唤醒;

asar文件操作

vue使用electron打包一些事项

一.使用添加注册表协议达到唤醒exe程序

我们项目实在国产化龙芯申威上的,也都是linux系统中定义协议

创建一个vscodes.desktop.(名字自定义都行,跟里面内容对照起来,我要打开vscode),里面编辑内容

[Desktop Entry]
Name=vscodes
Exec=/opt/apps/com.visualstudio,code.uos/files/code-oss/bin/code-oss
Type=Application
Terminal=false
MimeType=x-scheme-handler/vscodes;

MimeType=x-scheme-handler/vscodes是协议信息，vscodes为协议名字
Exec=/opt/apps/com.visualstudio,code.uos/files/code-oss/bin/code-oss，exec是调用的程序路径地址

2.进行注册协议到系统(root管理员权限下)

1.先把文件复制到 /usr/share/applications/  下

2.更新协议信息

update-desktop-database /usr/share/applications/

3.注册协议到系统

xdg-mime default vscodes.desktop x-scheme-handler/vscodes

3.在前端项目中调用

在项目中直接window.open(vscodes://192.168.1.10),在哪里调用就看自己项目需求

 window.open("vscodes://localhost");  //前面就是注册协议的名称,后面就是电脑ip,因为是本机就localhost就行

二  是vue中使用node  的  require("child_process");(electron中使用node)

说一下前提,浏览器本身是不支持node这样写法,会报错require找不到,我们项目是使用electron打包后桌面程序的,所以也就是vue项目在electron中使用node

1.window.openVslocalApp只是我写到window的方法,方便在vue项目中直接window调用;里面是node调用本地程序;写好之后vue项目打包dist

window.openVslocalApp = function (e) {
  // window.open("vscodes://192.168.1.10");
  // return;
  const { spawn } = require("child_process");
  // 调用本地应用程序
  const localApp = spawn(
    "/opt/apps/com.visualstudio,code.uos/files/code-oss/bin/code-oss"
  );

  // 监听应用程序的输出
  localApp.stdout.on("data", (data) => {
    console.log(`stdout: ${data}`);
  });

  // 监听应用程序的错误输出
  localApp.stderr.on("data", (data) => {
    console.error(`stderr: ${data}`);
  });

  // 监听应用程序的退出事件
  localApp.on("close", (code) => {
    console.log(`子进程退出，退出码 ${code}`);
  });
};

2.使用electron(可以参考我的上一篇electron使用事项)

我们用的国产化申威龙芯,在自己搞electron还得在打包适配对于我们太麻烦了,就直接在龙芯申威社区下载electron,把里面配置项目文件改了就行

Electron | 龙芯开源社区 (loongnix.cn)

安装他们步骤安装好后主要找到electron里面resources里default_app.asar包里面就是放的展示项目,(asar操作看我另一个文档asar命令)

3.把前端dist包放入里面

4.修改electron的default_app.js中配置,不然node语法不支持

5.修改main.js引入路径,原本是index.html,改为知道前端包dist路径里面

6.修改后重新打成asar包,把原本electron里面的替换掉重新运行打开