渲染进程加载Electron
方式1
浏览器端无法加载electron,那么,我们可以使用preload预加载将需要的接口暴露出来。
创建一个preload.js
文件,放在入口文件main.js
的同级目录下。
1 | global.electron = require('electron'); |
修改main.js
文件
在入口文件中添加preload配置项,将preload.js
作为预加载文件。预加载的时候还是可以使用nodejs里的api
1 | mainWindow = new BrowserWindow({ |
在组件中如下使用即可。
1 | const electron = window.electron; |
方式2
1 | const { app, dialog } = window.require("electron").remote; |
主进程和渲染进程数据共享
主进程
1 | global.sharedObject = { |
设置值
1 | global.sharedObject.show_tongji = 1; |
取值
1 | let show_tongji = global.sharedObject.show_tongji; |
渲染进程
1 | const remote = window.require('electron').remote; |
取值
1 | let show_tongji = remote.getGlobal('sharedObject').show_tongji; |
赋值
1 | remote.getGlobal('sharedObject').show_tongji = 1; |
基本配置
区分开发和生产环境
1 | const isDevelopment = !app.isPackaged; |
高DPI支持
1 | if (process.platform === 'win32') { |
禁用硬件加速
非常重要 在一些集成显卡的电脑上,默认开启的硬件加速会导致应用看不到界面。
关闭硬件加速
1 | app.disableHardwareAcceleration() |
webview
HTML
1 | <webview :src="url" |
JS
1 | let isreload = false; |
CSS
1 | .myweb { |
初始化Win
1 | new BrowserWindow({ |
注意
窗口初始化要开启
webviewTag
样式
display: flex;
保证内部充满
webview
调用其方法要等页面dom-ready
窗口
窗口透明
1 | const { BrowserWindow } = require('electron'); |
注意
frame设置为false是为了用无边窗口
transparent设置为true是使用窗口的透明效果
backgroundColor为一个透明的颜色,是因为BrowserWindow默认的背景颜色是白色,设置透明之后,才能够真正地看到透明的效果。
如果这个属性不设置会导致在有的电脑上是透明的有的不是,必须要设置。
系统配置
如果发现经过上述设置之后,窗口仍然不能透明的话,可能和Windows的设置有关
在Win7下,需要开启aero功能,在Win10下,需要开启颜色->透明效果
不显示菜单栏
1 | const electron = require('electron') |
窗口状态
1 | const { BrowserWindow } = require('electron'); |
窗口显示和隐藏
窗口显示
1 | if (win && !win.isDestroyed()) { |
窗口隐藏
1 | if (win && !win.isDestroyed()) { |
窗口托栏图标闪烁
1 | win.flashFrame(true); |
窗口位置
1 | const win = window.require("electron").remote.getCurrentWindow(); |
窗口居中
1 | win.center(); |
窗口大小
1 | win.setContentSize(160, 120); |
注意
如果设置窗口变小 直接调用
setSize
是不生效的,要调用setContentSize
修改内部尺寸才能改变窗口大小。
获取窗口句柄
1 | const win = window.require("electron").remote.getCurrentWindow(); |
禁用右键菜单
1 | function preventDragbarContext(win) { |
标题栏或者设置css的 -webkit-app-region: drag;
的元素,当接收到右键的时候进行拦截,先设置窗口禁用,然后定时恢复。
特殊处理
1 | app.disableDomainBlockingFor3DAPIs(); // 关闭3D api, 提高兼容性 |
最大化最小化/显示隐藏/获得焦点
API
1 | // 渲染进程获取窗口 |
示例
1 | if (win && !win.isDestroyed()) { |
双击最大化问题
Electron无边框模式下-webkit-app-region: drag;
双击最大化的问题
废话不多说 使用以下api即可解决:
1 | mainWindow.setMenu(null); |
或者创建窗口设置属性
1 | maximizable: false, |
防止窗口加载闪烁
1 | const { BrowserWindow } = require('electron') |
防止透明窗口显示闪烁
main.js中添加
1 | app.commandLine.appendSwitch('wm-window-animations-disabled'); |
创建无边框窗口
1 | const { BrowserWindow } = require('electron') |
禁止缩放
1 | new BrowserWindow({ |
事件穿透
点击穿透窗口
1 | const { BrowserWindow } = require('electron') |
转发
忽略鼠标消息会使网页无视鼠标移动,这意味着鼠标移动事件不会被发出。 在 Windows 操作系统上,可以使用可选参数将鼠标移动消息转发到网页,从而允许发出诸如 mouseleave
之类的事件:
1 | const win = require('electron').remote.getCurrentWindow() |
这将使网页在 el
上点击时穿透,在它外面时恢复正常。
渲染进程关闭窗口
1 | const remote = require('electron').remote; |
应用关闭
1 | const {app} = require('electron').remote; |
窗口 不在任务栏显示
1 | homeWin.setSkipTaskbar(true) |
true 表示不显示,false 表示显示。
获取焦点闪烁
1 | win.once('focus', () => win.flashFrame(false)) |
注意
别忘了调用
win.flashFramework(false)
来关闭闪烁。 在上面的示例中, 当窗口进入焦点时会调用它, 但您可能会使用超时或其他一些事件来禁用它。
点击任务栏不隐藏
1 | let homeWin = new BrowserWindow({ |
只设置simpleFullscreen: true,
和homeWin.setAlwaysOnTop(true, "pop-up-menu");
的话,虽然窗口全屏了,但是一点击任务栏上的图标,界面就隐藏了,所以一定要添加上
1 | homeWin.setFullScreen(true); |
可能你会说直接隐藏任务栏图标不就行了
1 | homeWin.setSkipTaskbar(true) |
但是这样配置会导致任务栏会遮挡窗口,就算设置窗口置顶也没用,暂时没找到解决方法。
可拖拽和不可拖拽
1 | body{ |
常用方式
如果窗口设置的可拖拽,那么按钮或需要触发点击的就取消拖拽,否则事件无法触发。
禁用文本选择
1 | .titlebar { |
自定义滚动条
1 | ::-webkit-scrollbar { /*滚动条整体样式*/ |
取消input选中样式
1 | outline: none; |
设置checkbox选中背景色
1 | <input type="checkbox" id="remeberpwd"/> <label for="remeberpwd">记住密码</label> |
样式
1 | input[type=checkbox]{ |
禁止图片拖动
1 | img { |
禁用Console警告信息
cross-env是一款跨平台设置和使用环境变量的脚本
1 | npm install --save-dev cross-env |
禁用
1 | cross-env ELECTRON_DISABLE_SECURITY_WARNINGS=true |
比如原来我的启动命令为
1 | "scripts": { |
就改为
1 | "scripts": { |
隐藏掉这些警告信息,仅仅是个掩耳盗铃的行为,并不值得推荐使用。一定要看看警告是否能解决,不能解决又有强迫症的可以这样做。
Dev-Tools
安装本地Dev-Tools插件
官方文档:https://www.electronjs.org/docs/api/browser-window#browserwindowadddevtoolsextensionpath-deprecated
插件下载地址
链接:https://pan.baidu.com/s/19BzaBnZsWZxN_thHHvSYBw
提取码:psvm
Electron不同版本的API不一样
早期版本
1 | const isDevelopment = !app.isPackaged; |
新版本
1 | const isDevelopment = !app.isPackaged; |
打开devtools
1 | mainWindow.webContents.openDevTools(); |
默认状态下,开发者工具的位置是上一次工具打开的位置(左边,右边,下边都有可能。取决于上一次的状态,但不会是分离状态,也没有处于顶部的状态)。
界面右侧打开
1 | mainWindow.webContents.openDevTools({mode:'right'}); |
界面底部打开
1 | mainWindow.webContents.openDevTools({mode:'bottom'}); |
界面左侧打开
1 | mainWindow.webContents.openDevTools({mode:'left'}); |
分离状态打开
1 | mainWindow.webContents.openDevTools({mode:'detach'}); |
DIV可拖动
1 | drag_user_camera() { |
图片置灰
1 | .userhead.gray { |
预处理脚本
1 | // 添加preload.js |