本文目录一览：

electron隐藏鼠标

将自己项目打包好的dist文件中的index.html和其他文件放入electron-quick-start(根目录)文件夹中，重新start一下项目集成到了electron中，下一步就是打包生成我们需要的桌面端exe文件。electron中默认带有顶部菜单栏，有时候我们的应用不需要。可以在main.js中设置，隐藏菜单Electron实战：入门、进阶与性能优化》国内首本全面讲解Electron技术栈和运行原理的原创图书。以实战为导向，讲解了如何用Electron结合现代前端技术来开发桌面应用。书中不仅全面介绍了Electron入门需要掌握的功能和原理，而且还针对Electron开发中的重点和难点进行了重点讲解，旨在帮助读者实现快速进阶。本书遵循渐进式的原则逐步传递知识给读者，书中以Electron知识为主线并对现代前端知识进行了有序的整合，对易发问题从深层原理的角度进行讲解，对普适需求以实践的方式进行讲解，同时还介绍了Electron生态内的大量组件和项目。在做Electron Windows 桌面应用时候，做鼠标悬浮到托盘图标上时显示一个悬浮框（例如做消息提醒），但因为Windows没有提供托盘mouse-enter/mouse-lee，无法直接做这个功能，考虑到还有mouse-move，弄个间接的方式实现。mouse-move，当触发时，即也相当触发mouse-enter。开始定时（100ms）获取托盘位置和鼠标位置，判断鼠标是否还在托盘图标里，当已不在时，触发mouse-lee并停止定时查询。当mouse-enter时，显示悬浮窗口到托盘上方，当mouse-enter，隐藏悬浮窗口。因为是无边框窗口，所以原先的导航栏都没有了，需要我们自定义这些按钮。UI我就不具体介绍了，大家自己看一下就好，我们只讲效果实现。自定义按钮我们是放在了src-renderer-layout-layout文件中的v- 组件中。 因为标题需要需要拖拽，所以我们给它加上样式但是设置了drag之后，可以看到就不能通过鼠标进行大小缩放了，边框上不会出现缩放箭头，所以需要处理下，我们不再对整个进行drag设置，而是仅仅设置在几个需要拖动的区域，但是不能设置高度为，否则还是不显示缩放箭头，所以我设置了v-spacer的高度为90%。核心代码如下，代码比较简单，也不用ipc通知mainWindow了，直接remote模块做的了。有个坑，就是browserWindow.isMaximized()这个判断并不是很好使，不信你可以自己试一下，和你预期有别。我这里只能用页面判断了，但也不是特别好使，特别是开发过程中热重载的时候。有解决方案的同志可以回复下。双击顶部的工具栏，我们可以看到窗口能化，但是这样影响我们页面的化判断，所以需要去掉它，而且右键也能显示出原始窗体菜单，并不好看。网络上其他的解决方案我搜到两个，一是鼠标移动，这个方案会出现闪烁问题，不。另一个是使用electron-drag，不过需要rebuild你的代码，而且也有一些限制，怪麻烦的，就算了默认提供了文件、编辑、视图、窗口和帮助五个主菜单以及主菜单的子菜单，实际上这些默认的菜单，往往需要我们重新定义。我们在创建窗口的时候，设置frame为false，就是隐藏默认的标题栏和菜单。

electron右键菜单（electron 窗口）electron右键菜单（electron 窗口）


electron右键菜单（electron 窗口）


如果只想隐藏菜单呢，就是通过设置autoHideMenuBar：true，但是在用户打开窗口后，按一下Alt键，默认菜单就恢复。在这样的情况下，我们可以自定义一个系统菜单来覆盖electron默认的菜单定义自己的菜单，需要使用electron内置的Menu模块，通过Menu.buildFromTemplate方法来创建菜单对象，通过Menu.setApplicationMenu方法来给窗口设置系统菜单。

所设置的菜单对象的label属性，表示是显示的文本，可以通过设置click属性，给对应的菜单添加点击。还有一个属性是role，属性可选值为paste、undo、redo、cut、copy、delete、selectAll、reload、minimize、close、quit等等。但是设置role后，click属性就失效了这样当我们在页面上点击鼠标右键的时候，就会触发window上的oncontextmenu，同时获取到鼠标的位置，然后在该位置上显示对应的菜单。如果使用这样的方法子Electron应用内创建右键菜单，这些菜单只能显示在窗口页面内部，不能悬浮在窗口之上，那么就会导致右键显示的菜单，可能只显示一部分，出现滚动条。这样体验效果并不理想。系统右键菜单思路是在主进程接收到渲染进程的右键点击后，Electron窗口内将显示悬浮在窗口上的系统菜单。例如，先创建菜单对象，还是使用Electron内置的Menu模块：很多应用需要常驻在用户的作系统内，但是用户又不想应用一直显示在屏幕上，也就是关掉所有的应用窗口，应用程序也一直处于运行状态，比如微信、qq等等。这样让用户可以随时激活应用。算是electron-vue的阶段调研。但是演示的时候却被各种否定，窗体比较大，而且设计不合理，布局方式不合理，等等等。由于在此之前没有做过这种客户端的形式，所以设计也是无从说起。

这样就可以去掉外层窗体，并且不可以进行放大缩小。但是这也导致一个问题，如果你选择不使用electron自带的frame，那么就默认你是放弃了frame的拖拽功能，所以这里需要我们自己去实现拖拽功能。无窗体的拖拽功能在开发应用的过程中，想要使得窗口在普通大小可以拖动，经常会设置该css属性：-webkit-app-region: drag; 来实现。

在窗口的最外层，即登录页面的根上设置该属性为drag，这样的话就可以实现窗口的拖拽，但是也会产生一个问题，一般会在最外层设置这个属性，那么在窗体的任意位置都可以进行拖拽。那我们的表单怎么办呢？如果设置在最外层，那当我们的鼠标移动到输入框，按钮等作上时，就会发现，不能获取到焦点，不能输入，也不能点击，这就很麻烦了。而关于-webkit-app-region的属性设置也可以找到对应的解决办法，那就是在需要或者需要输入的地方设置该属性不能拖拽，即-webkit-app-region: no-drag;于是，我就想到只要给表单一个div或者在表单的最外层设置这个属性为no-drag不就行了么？而事实并非如此，不明白有的表单项却不行，比如按钮，CheckBox，radio等这些，在我这里好像不能用。如果在form表单最外层不起作用，那只能退而求其次，每一项都这么设置。

electron开发桌面程序问题

前言：研究electron自动更新的时候，在electron的文档auto-updater中，提到了在几个平台mac，linux，windows下electron的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。创建nuget包我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows（需要有vitualstudio。2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe放进去，在文件夹放入我们未打包的electron应用，如下图：4.在my-build根目录中，打开命令行执行nugetspec如下图：生成spec包初始文件5.编辑器打开Package.nuspec，按照自己项目的需要编辑这个文件，如下图：这里需要注意：根据Squirrel文档说明，targetfolder属性需要设置为lib/net45，否则并没有用；标签用来制定未来的exe的icon。5.用下面的命令创建一个nuget包，nugetpackPackage.nuspec如下图：之后在目录中会出现这个包命名规则就是..nupkg创建安装程序把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：squirrel--releasify..nupkg这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES文件和安装文件Setup.exe。如下图：如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。注意上面这条squirrel命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的文件。使用Squirrel--可以查看帮助发布应用和安装应用把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。最终应用会被安装在C:UsersAdministratorAppDataLocal[appname]文件夹中，注意Squirrel的日志文件也存在目录中，调试安装问题的时候非常有用。双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在C:UsersAdministratorAppDataLocalSquirrelTemp里面可以看到安装日志。如下图：安装之后打开C:UsersAdministratorAppDataLocal目录，可以看到app安装在这里，如下图：自动创建快捷方式进入我们安装之后的文件夹，命令行进入C:UsersAdministratorAppDataLocal[yourappname]，执行Update.exe--，可以看到不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe--createshortcuectronelectron.exe-i[youricotoute]app.ico所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel的就好了。如下图：我顺便把程序卸载时，删除快捷方式的也写了进去。还有程序的更新和删除，但是这两个，我还没有进行测试。更新应用其实我一直很想做增量更新，在这里我的更新方法有两个，是在程序的入口添加js，发送请求到，拉取更改文件进行本地替换，但是如果是node_module依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都到了这个文件夹里面，如下图：如果后续我们的程序要进行更新，首先我们需要把更改的文件直接替换到这个文件夹。2.打开Package.nuspec，编辑version标签3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。创建自定义安装包在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。下载安装ResourceHacker2.打开这个项目目录，在electron.exe上面右键出现菜单，点击OpenusingRescourceHacker。3.ResourceHacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，ReplaceIcon，如下图：然后选择自己想要替换的.ico文件就好4.这其实并不够，我们还需要更换exe里面的版本信息，打开VersionInfo，把FileDescription和ProductName改成我们自己的项目名称，把SquirrelAwareVersion也更改一下，毕竟是版本号。5.做完这些之后，我们需要按照之前的步骤，在命令行中输入nugetpackPackage.nuspec重新生成nuget包，然后再使用squirrel--releasify..nupkg命令创建安装文件。6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！

webview 的右键菜单

邮件-客户端内打开邮件系统，文本要支持鼠标右键-

一、需求

1.客户端内打开邮件系统，需要在 webview 元素上使用自定义 contextmenus ：文本要支持鼠标右键-

二、页面功能说明

1.electron 开发的程序中一个浏览外部网页的一个子组件。

2.webview 的右键菜单在Renderer Process模块中的实现方式。

3.使用 content-menu 的来进行处理，该会使用electron 创建一个menu并显示。

4.在系统剪贴板上执行和粘贴作，在Linux上，还有一个selection剪贴板。要作它，您需要传递selection给每个方法。

三、实现

1.RendererProcess 实现 —— 使用content-menu的来进行处理，该会使用electron 创建一个menu并显示

2.菜单创建

electron怎么关闭框架的右键菜单？

我还是直接贴代码吧，const Menu = require("menu");

作者：lebornjose

链接：

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

// Create the Application's main menu

    let template = [{

        label: "Application",

        submenu: [

            { label: "About Application", selector: "orderFrontStandardAboutPanel:" },

            { type: "separator" },

            { label: "Quit", accelerator: "Command+Q", click: function() { app.quit(); }}

        ]}, {

        label: keysBinding["Edit"],

        submenu: [

            { label: keysBinding["Undo"], accelerator: "CmdOrCtrl+Z", selector: "undo:" },

            { label: keysBinding["Redo"], accelerator: "Shift+CmdOrCtrl+Z", selector: "redo:" },

            { type: "separator" },

            { label: keysBinding["Cut"], accelerator: "CmdOrCtrl+X", selector: "cut:" },

            { label: keysBinding["Copy"], accelerator: "CmdOrCtrl+C", selector: "copy:" },

            { label: keysBinding["Paste"], accelerator: "CmdOrCtrl+V", selector: "paste:" },

            { label: keysBinding["Select All"], accelerator: "CmdOrCtrl+A", selector: "selectAll:" }

        ]}

    ];//注册菜单 Menu.setApplicationMenu(Menu.buildFromTemplate(template));

electron 的无边框拖动问题

作系统原生的窗口样式中规中矩，看久了却难免会有些厌烦。所以在使用 electron 创建桌面应用的时候，有时候我们希望能完全掌控窗口的样式，而隐藏掉系统提供的窗口边框和标题栏等。

通过在创建窗口的时候，指定{frame:false}或{titleBarStyle: 'hidden'}(macOS only)即可达到隐藏边框的效果，甚至可以通过 {transparent:true}来指定窗口透明，创建异形的窗口呈现。具体可见文档，这里不再赘述。

一个值得一提的问题是窗口的拖动。因为没有标题栏，所以需要自行实现窗口的拖动区域，否则就没法移动窗口位置了。可能的实现方案有下面几种：

方案一： -webkit-app-region: drag;

文档里有详细说明：

默认情况下, 无框窗口是 non-draggable 的。 应用程序需要指定 `-webkit-app-region: drag` 在 CSS 中告诉Electron哪个区域是可拖拽的 (像 OS 的标准标题栏), 并且应用程序也可以使用 `-webkit-app-region: no-drag` 来排除 draggable region 中的 non-draggable 区域。 请注意, 当前只支持矩形形状。

要使整个窗口可拖拽, 您可以添加 `-webkit-app-region: drag` 作为 `body` 的样式:

body /body

请注意, 如果您已使整个窗口draggable, 则必须将按钮标记为 non-draggable, 否则用户将无法单击它们:

button { -webkit-app-region: no-drag; }

如果你设置自定义标题栏为 draggable, 你也需要标题栏中所有的按钮都设为 non-draggable。

试下来拖拽效果很完美。但是，文档后面提到了这种方法较为致命的一个问题：

在某些平台上, 可拖拽区域将被视为 non-client frame, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。

不仅右键菜单，设置了这个样式的元素几乎无法响应所有的鼠标，包括点击、拖拽等。如果需要拖拽整个窗口，就相当尴尬了。