Electron工程一些坑点及VSCode调试的简单配置 HOT

最后编辑于 2019-04-13 03:19:54

Electron
2 907
记录一些关于Electron开发时, 各个平台适配的一些坑点, 并记录一条配置在 vscode 中可进行断点调试.

自定义标题栏

frame: false: 主进程中设置窗体参数。去掉默认的标题栏

-webkit-app-region: drag: 渲染进程中设置css。对应的组件可以进行拖动了

  1. mainWindow = new BrowserWindow({
  2. height: 350,
  3. width: 550,
  4. useContentSize: true,
  5. resizable: isDev, // 是否可调整大小
  6. alwaysOnTop: !isDev, // 应用是否始终在所有顶层之上
  7. transparent: true, // 透明边框
  8. frame: false, // 不使用默认边框
  9. center: true
  10. })
  1. .u-header {
  2. -webkit-app-region: drag; /* as window header */
  3. }

标题栏按钮无效 – only windows

该bug只在windows平台上显示,mac上正常。在header组件中设置为drag,导致组件里的元素都无法点击。

解决方案:在需要点击的元素上添加no-drag。-webkit-app-region: no-drag; 详细看此 issue

自定义标题栏无法实现css hover – only windows

当设置了为drag时,在windows上会屏蔽所有的鼠标事件,所以hover不起作用。这是一个由操作系统导致的问题,故无法修复,相关issue
解决方案:去掉 -webkit-app-region: drag; 即可。

如果要同时保留可拖动并且hover上有变化,在windows暂时无法实现,需要对此进行取舍或改变交互设计。

打包后程序调试

解决方案:通过注册快捷键,调开web的开发者模式。

  1. globalShortcut.register('CommandOrControl+Shift+L', () => {
  2. let focusWin = BrowserWindow.getFocusedWindow()
  3. focusWin && focusWin.toggleDevTools()
  4. })

文本不可选择

解决方案:使用css -webkit-user-select: none;

  1. html {
  2. -webkit-tap-highlight-color: transparent;
  3. -webkit-text-size-adjust: 100%;
  4. height: 100%;
  5. -webkit-user-select: none; /* disable user select text */
  6. }

打包参数设置

electron-builder进行打包, 常用的设置:

  1. scripts: {
  2. /** 打包成windows系统 **/
  3. "build": "node .electron-vue/build.js && electron-builder --win",
  4. /** 打包成macos系统 **/
  5. "build:mac": "node .electron-vue/build.js && electron-builder --mac",
  6. },
  7. "build": {
  8. /** 最终可执行文件名称:${productName}-${version}.${ext} **/
  9. "productName": "sight-electron-app",
  10. "appId": "netease.sight.controller",
  11. /** 压缩形式,默认normal;store打包最快,适合测试;maximum打包体积最小,适合生产模式 **/
  12. "compression": "maximum",
  13. /** 是否将多个文件合并为tar风格的归档模式 **/
  14. "asar": true,
  15. "directories": {
  16. "output": "build" /** 打包结果目标地址 **/
  17. },
  18. "files": [
  19. "dist/electron/**/*" /** 需要打包的文件地址 **/
  20. ],
  21. /** 不同平台设置 **/
  22. "mac": {
  23. "icon": "build/icons/icon.icns"
  24. },
  25. "win": {
  26. "icon": "build/icons/icon.ico"
  27. },
  28. "linux": {
  29. "icon": "build/icons"
  30. }
  31. }

触摸板放大缩小 – only mac

在macOS系统中,触摸板的放大缩小手指指令,会导致electron程序内的webFrame内容也跟着放大缩小。

解决方案:在renderer进程中设置其缩放范围

  1. require('electron').webFrame.setZoomLevelLimits(1, 1);

web端唤起本地客户端

electron提供该API能力:

  1. app.setAsDefaultProtocolClient(protocol[, path, args]);

禁止多开窗口

多次双击window 的exe文件,会开启多个窗口;mac下默认开1个,但通过命令还是可以多开。

解决方案:判断单实例:app.makeSingleInstance(callback)

  1. /**
  2. * 防止应用多开。bugfix:sholudQuit总是返回true,故暂时注释以下代码
  3. * 当进程是第一个实例时,返回false。
  4. * 如果是第二个实例时,返回true,并且执行第一个实例的回调函数
  5. */
  6. const shouldQuit = app.makeSingleInstance((commandLine, workingDir) => {
  7. if (mainWindow) {
  8. mainWindow.isMinimized() && mainWindow.restore()
  9. mainWindow.focus()
  10. }
  11. })
  12. if (shouldQuit) {
  13. app.quit()
  14. }

日志监听

解决方案:electron-log + CrashReporter

  1. const log = require('electron-log')
  2. log.transports.file.level = 'info'
  3. log.transports.file.format = '{h}:{i}:{s}:{ms} {text}'
  4. log.transports.file.maxSize = 5 * 1024 * 1024
  5. log.transports.console.level = false

vscode 的相关配置

  1. {
  2. "version": "0.2.0",
  3. "configurations": [
  4. {
  5. "type": "node",
  6. "request": "launch",
  7. "name": "启动程序",
  8. "program": "${workspaceFolder}/main.js"
  9. },
  10. {
  11. "name": "Debug Main Process",
  12. "type": "node",
  13. "request": "launch",
  14. "cwd": "${workspaceFolder}",
  15. "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
  16. "windows": {
  17. "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
  18. },
  19. "args" : ["."]
  20. }
  21. ]
  22. }

更多参数

Predefined variables
The following predefined variables are supported:

  1. ${workspaceFolder} - the path of the folder opened in VS Code
  2. ${workspaceFolderBasename} - the name of the folder opened in VS Code without any slashes (/)
  3. ${file} - the current opened file
  4. ${relativeFile} - the current opened file relative to workspaceFolder
  5. ${fileBasename} - the current opened file's basename
  6. ${fileBasenameNoExtension} - the current opened file's basename with no file extension
  7. ${fileDirname} - the current opened file's dirname
  8. ${fileExtname} - the current opened file's extension
  9. ${cwd} - the task runner's current working directory on startup
  10. ${lineNumber} - the current selected line number in the active file
  11. ${selectedText} - the current selected text in the active file
  12. ${execPath} - the path to the running VS Code executable

相关链接


作者:Zyao89;转载请保留此行,谢谢;
原文网站:https://www.2o3t.cn
祝你好运,谢谢支持

相关推荐

分享一下

支持一下

文章目录

    TOP