CN113312048B

CN113312048B - 基于electron唤起本地工具的实现方法及系统

Info

Publication number: CN113312048B
Application number: CN202110647420.9A
Authority: CN
Inventors: 贺茂林; 魏金雷; 徐士强; 高传集
Original assignee: Inspur Cloud Information Technology Co Ltd
Current assignee: Inspur Cloud Information Technology Co Ltd
Priority date: 2021-06-10
Filing date: 2021-06-10
Publication date: 2022-12-27
Anticipated expiration: 2041-06-10
Also published as: CN113312048A

Abstract

本发明公开了基于electron唤起本地工具的实现方法及系统，属于桌面应用制作技术领域，本发明要解决的技术问题为如何在web客户端唤起本地工具，采用的技术方案为：该方法是使用electron作为桌面应用开发的载体，使用chromium作为UI界面的绘图库，javascript作为业务逻辑的编程语言，配置需要唤起的本地应用及应用启动路径，使用nodejs编写后台应用运行起http服务，在web客户端通过http请求来实现调用配置的本地应用；具体如下：建立http通信服务；配置桌面应用的前台显示；存储Electron应用程序数据并加密用户数据；管理桌面托盘；打包应用程序；安装并调用应用程序唤起本地服务。

Description

基于electron唤起本地工具的实现方法及系统

技术领域

本发明涉及桌面应用制作技术领域，具体地说是一种基于electron唤起本地工具的实现方法及系统。

背景技术

随着WEB2.0的时代来临，互联网从C/S架构(客服端/服务端结构)转变为B/S架构(浏览器/服务器结构)，后者相比于前者更加方便快捷，因此浏览器便成为了访问网站的窗口。很多时候，需要在一个web页面(即html中)调用客户端本地的应用程序，包括系统的应用程序和自己编写的应用程序。

目前，B/S架构(浏览器/服务器结构)应用越来越多，客户的需求也不断在提升，经常可以碰到需要在网页中打开客户本地应用的情况，例如一个网页端的堡垒机系统，用户在运维自己的虚机时希望通过本地的Xshell、PuTTY等工具去运维，这时就需要用户在登录web客户端时，通过http请求把web客户端的配置下发到本地的工具中，并且打开本地的应用，但是由于浏览器安全策略的限制，无法直接打开用户本地应用。

发明内容

本发明的技术任务是提供一种基于electron唤起本地工具的实现方法及系统，来解决如何在web客户端唤起本地工具的问题。

本发明的技术任务是按以下方式实现的，一种基于electron唤起本地工具的实现方法，该方法是使用electron作为桌面应用开发的载体，使用chromium作为UI界面的绘图库，javascript作为业务逻辑的编程语言，配置需要唤起的本地应用及应用启动路径，使用nodejs编写后台应用运行起http服务，在web客户端通过http请求来实现调用配置的本地应用；具体如下：

建立http通信服务；

配置桌面应用的前台显示；

存储Electron应用程序数据并加密用户数据；

管理桌面托盘；

打包应用程序；

安装并调用应用程序唤起本地服务。

作为优选，建立http通信服务具体如下：

使用express实现本地node服务器，启动http服务；

在页面通过http发送请求，在web客户端下达打开本地应用的命令或操作；

在express中编写对外暴露http请求接口，接收到请求时，根据参数拼接成具体命令；

适配具体的web客户端，使用nodejs来执行拼接的命令，用以实现打开本地服务；

配置桌面应用的前台显示具体如下：

使用vue及elementUI实现桌面应用的前台界面显示；

用户在前台界面上配置需要打开的本地应用及应用路径，并进行保存。

作为优选，存储Electron应用程序数据并加密用户数据具体如下：

通过electron-store保存Electron应用程序或模块的简单数据，实现本地存储功能；

将用户配置的应用路径及应用名称存储至本地，避免下次打开数据丢失；

使用encryptionKey对数据进行加密，保证用户数据的安全性。

作为优选，管理桌面托盘具体如下：

使用tray来实现桌面托盘管理，并规定托盘菜单及菜单事件；

使用notification来实现应用系统的桌面消息通知；

使用nsis来确认桌面快捷图标；

将通过http通信打开本地服务的应用打包至electron中；

在electron主进程中，打开express的http服务，添加系统托盘及读取用户之前的配置信息并展示在用户的桌面应用的前台界面上。

作为优选，打包应用程序具体如下：

使用electron-builder将实现的electron应用打包成可执行的相应操作系统的应用文件，提供给用户安装；

在打包时编写NSIS脚本，通过修改用户注册表，实现自定义协议；具体为：判断用户是否安装但并未运行应用程序：

若是，则在web客户端页面通过自定义打开应用程序，再直接通过请求调用应用程序内的http请求接口来打开本地服务，节省用户的操作；

配置NSIS脚本，实现用户安装时选择安装目录、配置用户使用管理员权限安装、配置安装图标及背景图片。

更优地，安装并调用应用程序唤起本地服务具体如下：

在web客户端调用本地服务时进行判断是否安装应用程序：

若未运行应用程序，则通过弹窗提示用户打开或安装应用程序；

若用户已经运行应用程序，则通过自定义协议打开及运行应用程序，再通过http调用唤起本地服务；

应用程序接收到http请求时，判断用户是否已经配置本地应用：

若用户已经配置本地应用，则直接打开本地应用，返回web客户端打开成功，并把从http请求中接收到参数传递到本地应用中；

若用户未配置本地应用，则返回web客户端错误信息，并提示用户需要对本地应用进行配置。

一种基于electron唤起本地工具的系统，该系统包括，

通信功能模块，用于建立http通信服务；

配置模块，用于使用vue及elementUI实现桌面应用的前台界面显示；用户在前台界面上配置需要打开的本地应用及应用路径，并进行保存；

存储模块，用于存储Electron应用程序数据并加密用户数据；

管理模块，用于使用tray来实现桌面托盘管理，并规定托盘菜单及菜单事件，使用notification来实现应用系统的桌面消息通知，使用nsis来确认桌面快捷图标，并将通过http通信打开本地服务的应用打包至electron中，在electron主进程中，打开express的http服务，添加系统托盘及读取用户之前的配置信息并展示在用户的桌面应用的前台界面上；

打包模块，用于使用electron-builder将实现的electron应用打包成可执行的相应操作系统的应用文件，提供给用户安装；

调用模块，用于安装并调用唤起本地服务。

作为优选，所述通信功能模块包括，

启动子模块，用于使用express实现本地node服务器，启动http服务，在页面通过http发送请求，在web客户端下达打开本地应用的命令或操作；

拼接子模块，用于在express中编写对外暴露http请求接口，接收到请求时，根据参数拼接成具体命令；

执行子模块，用于适配具体的web客户端，使用nodejs来执行拼接的命令，用以实现打开本地服务；

所述存储模块包括，

保存子模块，用于通过electron-store保存Electron应用程序或模块的简单数据，实现本地存储功能；

配置子模块，用于将用户配置的应用路径及应用名称存储至本地，避免下次打开数据丢失；

加密子模块，用于使用encryptionKey对数据进行加密，保证用户数据的安全性。

作为优选，该系统安装使用过程具体如下：

(1)、判断web客户端是否安装或已安装未启动应用程序：

①、若未安装应用程序，则弹窗提示请求安装应用程序并提供下载链接，安装应用程序；其中，安装应用程序包括如下情况：

(a)、使用管理员权限进行安装，以便更改用户注册表信息，使用自定义协议打开应用程序；

(b)、未使用管理员权限进行安装，则需要手动运行应用程序，方可进行本地服务唤起；

②、若未启动应用程序，则使用自定义协议打开应用程序；

(2)、在web客户端发起对本地应用唤起的http请求；

(3)、判断应用程序是否运行：

①、若是，则执行步骤(4)；

②、若否，则跳转至步骤(2)；

(4)、判断用户是否配置需要打开的本地应用及本地应用的启动程序路径：

①、若是，则执行步骤(5)；

②、若否，则提示用户在应用程序中配置需要打开的本地应用及本地应用的启动程序路径，并跳转至步骤(2)；

(5)、点击启动应用按钮或相应启动操作，即可打开本地应用并传递参数。

一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行时，实现如上述的基于electron唤起本地工具的实现方法。

本发明的基于electron唤起本地工具的实现方法及系统具有以下优点：

(一)本发明在绕过浏览器的安全策略，通过本地安装应用程序，在应用程序内配置所要打开的程序地址来唤起本地服务，解决了在浏览器上用户鼠标操作唤起本地工具的问题；

(二)本发明使用electron作为桌面应用开发的载体，使用chromium作为UI界面的绘图库，javascript作为业务逻辑的编程语言，使用nodejs编写后台应用运行起http服务，极大的方便了用户的开发工作；

(三)electron是一个时下流行的桌面客户端开发技术，使用chromium作为UI界面的绘图库，javascript作为业务逻辑的编程语言，它的出现使开发人员可以使用熟悉的web技术开发桌面客户端软件，它自带了chrome调试控制台，开发人员很容易在运行阶段，打开调试器，调试页面逻辑。

附图说明

下面结合附图对本发明进一步说明。

附图1为基于electron唤起本地工具的实现方法的流程框图；

附图2为基于electron唤起本地工具的系统的安装使用过程的流程框图。

具体实施方式

参照说明书附图和具体实施例对本发明的基于electron唤起本地工具的实现方法及系统作以下详细地说明。

在本发明的描述中，需要理解的是，术语“上”、“下”、“前”、“后”、“左”、“右”、“竖直”“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本发明和简化描述。而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为本发明的限制。此外，术语“第一”、“第二”、“第三”仅用于描述目的，而不能理解为指示或暗示相对重要性。

在本发明的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接连接，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本发明中的具体含义。

实施例：

本发明的基于electron唤起本地工具的实现方法，该方法是使用electron作为桌面应用开发的载体，使用chromium作为UI界面的绘图库，javascript作为业务逻辑的编程语言，配置需要唤起的本地应用及应用启动路径，使用nodejs编写后台应用运行起http服务，在web客户端通过http请求来实现调用配置的本地应用；如附图1所示，具体如下：

S1、建立http通信服务；

S2、配置桌面应用的前台显示；

S3、存储Electron应用程序数据并加密用户数据；

S4、管理桌面托盘；

S5、打包应用程序；

S6、安装并调用应用程序唤起本地服务。

本实施例中步骤S1的建立http通信服务具体如下：

S101、使用express实现本地node服务器，启动http服务；

S102、在页面通过http发送请求，在web客户端下达打开本地应用的命令或操作；同时为了用户体验，使用http请求可以监听成功或者失败，方便后续做相应的业务处理，另外使用http的post请求传递参数较多，而且可以进行加密传递，防止数据泄露；

S103、在express中编写对外暴露http请求接口，接收到请求时，根据参数拼接成具体命令；

S104、适配具体的web客户端，使用nodejs来执行拼接的命令，用以实现打开本地服务；

本实施例中步骤S2的配置桌面应用的前台显示具体如下：

S201、使用vue及elementUI实现桌面应用的前台界面显示；

S202、用户在前台界面上配置需要打开的本地应用及应用路径，并进行保存。

本实施例中步骤S3的存储Electron应用程序数据并加密用户数据具体如下：

S301、通过electron-store保存Electron应用程序或模块的简单数据，实现本地存储功能；

S302、将用户配置的应用路径及应用名称存储至本地，避免下次打开数据丢失；

S303、使用encryptionKey对数据进行加密，保证用户数据的安全性。

本实施例中步骤S4的管理桌面托盘具体如下：

S401、使用tray来实现桌面托盘管理，并规定托盘菜单及菜单事件；

S402、使用notification来实现应用系统的桌面消息通知；

S403、使用nsis来确认桌面快捷图标；

将通过http通信打开本地服务的应用打包至electron中；

S404、在electron主进程中，打开express的http服务，添加系统托盘及读取用户之前的配置信息并展示在用户的桌面应用的前台界面上。

本实施例中步骤S5的打包应用程序具体如下：

S501、使用electron-builder将实现的electron应用打包成可执行的相应操作系统的应用文件，提供给用户安装；

S502、为避免用户安装后没有启动应用程序，在打包时编写NSIS脚本，通过修改用户注册表，实现自定义协议；具体为：判断用户是否安装但并未运行应用程序：

S503、配置NSIS脚本，实现用户安装时选择安装目录、配置用户使用管理员权限安装、配置安装图标及背景图片。

本实施例中步骤S6的安装并调用应用程序唤起本地服务具体如下：

S601、在web客户端调用本地服务时进行判断是否安装应用程序：

①、若未运行应用程序，则通过弹窗提示用户打开或安装应用程序；

②、若用户已经运行应用程序，则通过自定义协议打开及运行应用程序，再通过http调用唤起本地服务；

S602、应用程序接收到http请求时，判断用户是否已经配置本地应用：

①、若用户已经配置本地应用，则直接打开本地应用，返回web客户端打开成功，并把从http请求中接收到参数传递到本地应用中；

②、若用户未配置本地应用，则返回web客户端错误信息，并提示用户需要对本地应用进行配置。

实施例2：

本发明的基于electron唤起本地工具的系统，该系统包括，

通信功能模块，用于建立http通信服务；

存储模块，用于存储Electron应用程序数据并加密用户数据；

调用模块，用于安装并调用唤起本地服务。

本实施例中的通信功能模块包括，

执行子模块，用于适配具体的web客户端，使用nodejs来执行拼接的命令，用以实现打开本地服务。

本实施例中的存储模块包括，

如附图2所示，该系统安装使用过程具体如下：

(1)、判断web客户端是否安装或已安装未启动应用程序：

②、若未启动应用程序，则使用自定义协议打开应用程序；

(2)、在web客户端发起对本地应用唤起的http请求；

(3)、判断应用程序是否运行：

①、若是，则执行步骤(4)；

②、若否，则跳转至步骤(2)；

①、若是，则执行步骤(5)；

实施例3：

本发明实施例还提供了一种计算机可读存储介质，其中存储有多条指令，指令由处理器加载，使处理器执行本发明任一实施例中的基于electron唤起本地工具的实现方法。具体地，可以提供配有存储介质的系统或者装置，在该存储介质上存储着实现上述实施例中任一实施例的功能的软件程序代码，且使该系统或者装置的计算机(或CPU或MPU)读出并执行存储在存储介质中的程序代码。

在这种情况下，从存储介质读取的程序代码本身可实现上述实施例中任何一项实施例的功能，因此程序代码和存储程序代码的存储介质构成了本发明的一部分。

用于提供程序代码的存储介质实施例包括软盘、硬盘、磁光盘、光盘(如CD-ROM、CD-R、CD-RW、DVD-ROM、DVD-R基于electron唤起本地工具的实现方法及系统M、DVD-RW、DVD+RW)、磁带、非易失性存储卡和ROM。可选择地，可以由通信网络从服务器计算机上下载程序代码。

此外，应该清楚的是，不仅可以通过执行计算机所读出的程序代码，而且可以通过基于程序代码的指令使计算机上操作的操作系统等来完成部分或者全部的实际操作，从而实现上述实施例中任意一项实施例的功能。

此外，可以理解的是，将由存储介质读出的程序代码写到插入计算机内的扩展板中所设置的存储器中或者写到与计算机相连接的扩展单元中设置的存储器中，随后基于程序代码的指令使安装在扩展板或者扩展单元上的CPU等来执行部分和全部实际操作，从而实现上述实施例中任一实施例的功能。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims

1.一种基于electron唤起本地工具的实现方法，其特征在于，该方法是使用electron作为桌面应用开发的载体，使用chromium作为UI界面的绘图库，javascript作为业务逻辑的编程语言，配置需要唤起的本地应用及应用启动路径，使用nodejs编写后台应用运行起http服务，在web客户端通过http请求来实现调用配置的本地应用；具体如下：

建立http通信服务；具体如下：

使用express实现本地node服务器，启动http服务；

配置桌面应用的前台显示具体如下：

使用vue及elementUI实现桌面应用的前台界面显示；

用户在前台界面上配置需要打开的本地应用及应用路径，并进行保存；

配置桌面应用的前台显示；

存储Electron应用程序数据并加密用户数据；具体如下：

通过electron-store保存Electron应用程序或模块的数据，实现本地存储功能；

将用户配置的应用路径及应用名称存储至本地；

使用encryptionKey对数据进行加密；

管理桌面托盘；具体如下：

使用tray来实现桌面托盘管理，并规定托盘菜单及菜单事件；

使用notification来实现应用系统的桌面消息通知；

使用nsis来确认桌面快捷图标；

将通过http通信打开本地服务的应用打包至electron中；

在electron主进程中，打开express的http服务，添加系统托盘及读取用户之前的配置信息并展示在用户的桌面应用的前台界面上；

打包应用程序；具体如下：

在打包时编写NSIS脚本，通过修改用户注册表，实现自定义协议；

配置NSIS脚本，实现用户安装时选择安装目录、配置用户使用管理员权限安装、配置安装图标及背景图片；

安装并调用应用程序唤起本地服务；具体如下：

在web客户端调用本地服务时进行判断是否安装应用程序：

2.一种基于electron唤起本地工具的系统，其特征在于，该系统包括，

通信功能模块，用于建立http通信服务；通信功能模块包括，

存储模块，用于存储Electron应用程序数据并加密用户数据；存储模块包括，

配置子模块，用于将用户配置的应用路径及应用名称存储至本地；

加密子模块，用于使用encryptionKey对数据进行加密；

调用模块，用于安装并调用唤起本地服务；

该系统安装使用过程具体如下：

(1)、判断web客户端是否安装或已安装未启动应用程序：

②、若未启动应用程序，则使用自定义协议打开应用程序；

(2)、在web客户端发起对本地应用唤起的http请求；

(3)、判断应用程序是否运行：

①、若是，则执行步骤(4)；

②、若否，则跳转至步骤(2)；

①、若是，则执行步骤(5)；

3.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行时，实现如权利要求1所述的基于electron唤起本地工具的实现方法。