03月
18

electron

发表于 • 字数统计 1.6k
文章目录
  1. Electron
    1. 运行
    2. Main Process 模块
      1. app
      2. BrowserWindow
        1. 实例 new BrowserWindow 的属性
      3. ipcMain

Electron

运行

  1. 报错 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    gyp ERR! find Python
    gyp ERR! find Python Python is not set from command line or npm configuration
    gyp ERR! find Python Python is not set from environment variable PYTHON
    gyp ERR! find Python checking if "python" can be used
    gyp ERR! find Python - "python" is not in PATH or produced an error
    gyp ERR! find Python checking if "python2" can be used
    gyp ERR! find Python - "python2" is not in PATH or produced an error
    gyp ERR! find Python checking if "python3" can be used
    gyp ERR! find Python - "python3" is not in PATH or produced an error
    gyp ERR! find Python checking if the py launcher can be used to find Python 2
    gyp ERR! find Python - "py.exe" is not in PATH or produced an error
    gyp ERR! find Python checking if Python is C:\Python27\python.exe
    gyp ERR! find Python - "C:\Python27\python.exe" could not be run

    解决方案 npm install --global --production windows-build-tools 将会自动安装 Python2.7 和 VS 2017 环境，在此之后需要配置一下 .npmrc 对应的版本以及本机的相关环境路径，网上有很多。

  2. 解决 if not defined npm_config_node_gyp

    1.

    1
    npm install -g node-gyp

    2.

    1
    npm config set node_gyp "node C:\Users\me\AppData\Roaming\npm\node_modules\node-gyp\bin\node-gyp.js"

  3. 使用electron项目经常会遇到NODE_MODULE_VERSION的错误，如下：

    1
    2
    3
    4
    5
    error:: Error: The module '<project>/node_modules/electron/node_modules/ref/build/Release/binding.node'
    was compiled against a different Node.js version using
    NODE_MODULE_VERSION 57. This version of Node.js requires
    NODE_MODULE_VERSION 54. Please try re-compiling or re-installing
    the module (for instance, using `npm rebuild` or`npm install`)

    解决方法

    1
    2
    npm i electron-rebuild -S
    ./node_modules/.bin/electron-rebuild

    查看Electron版本文档库中，发现有这么一句话：Change the NODE_MODULE_VERSION to 69

    问题原因终于找到了，但是怎么解决？问题分析到这种程度，可以得出两种解决方案：

    1） 选取Node版本与Electron版本的NODE_MODULE_VERSION一致。（由于没有找到electron各个版本对应的NODE_MODULE_VERSION,这里可以稍后研究一下）

    2）依据electron-rebuild的思路，把二者转换成一致。在rebuild的时候，指定一下abi的值不就可以了？查了一下这方面的资料，发现才真能指定abi的值。
    npm rebuild --runtime=electron --target=4.0.5 --disturl=https://atom.io/download/atom-shell --abi=69

    "install": "electron-rebuild -v 9.0.0 -f -w serialport" (可能有用的指令，在我项目中无效，指定了 9.0.0 的 serialport 版本)

    运行成功。同时解决了Node-Serialport串口读取，也能解决Node-ffi读取dll。

    查询 abi 地址 https://github.com/mapbox/node-pre-gyp/blob/master/lib/util/abi_crosswalk.json

  4. electron 原生模块打包问题（不依赖原生模块可以忽略）

    打包时，可能出现 404 报错

    1
    2
    3
    prebuild-install http request GET https://github.com/serialport/node-serialport/releases/download/@serialport/bindings@9.0.7/bindings-v9.0.7-electron-v87-win32-x64.tar.gz
    prebuild-install http 404 https://github.com/serialport/node-serialport/releases/download/@serialport/bindings@9.0.7/bindings-v9.0.7-electron-v87-win32-x64.tar.gz
    prebuild-install WARN install No prebuilt binaries found (target=12.0.0 runtime=electron arch=x64 libc= platform=win32)

    原因：electron 使用 electron-builder 打包时，默认 dependencies 下的依赖都会重新 rebuild，并且下载最新包，从网络上重新下载后打包时，由于原生模块与 electron 依赖的 Node 版本不一致，可能导致无法引入、下载 404、429 等问题(在我的项目中，由于 serialport 这个串口模块，依赖 Node 原生模块，打包时从 github 下载 @9.0.7 node=87，这个地址 404 了，暂时没有找到修改地址的办法)，在 package.json 的 build 中加入 "npmRebuild": false 后，将会跳过 dependencies 依赖打包，显示 skipped dependencies rebuild，使用本地的依赖，同时由于使用本地依赖，需要在 files 中将 node_modules 打包 "node_modules/**"

    完整 package.json 如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    {
      "name": "logistics",
      "version": "0.0.1",
      "main": "dist/main/build.js",
      "author": "",
      "license": "MIT",
      "scripts": {
        "dev": "npm run dev:all",
        "dev:all": "concurrently -n=vue,ele -c=green,blue \"npm run dev:vue\" \"npm run dev:ele\"",
        "dev:vue": "vite",
        "dev:ele": "node script/build --env=development --watch",
        "build:vue": "vite build",
        "build:ele": "node script/build --env=production",
        "build": "npm run build:vue && npm run build:ele && electron-builder"
      },
      "build": {
        "appId": "xxx@gmail.com",
        "electronDownload": {
          "mirror": "https://npm.taobao.org/mirrors/electron/"
        },
        "files": [
          "node_modules/**",
          "dist/main/**",
          "dist/render/**"
        ],
        "npmRebuild": false,
        "mac": {
          "artifactName": "${productName}_setup_${version}.${ext}",
          "target": [
            "dmg"
          ]
        },
        "win": {
          "target": [
            {
              "target": "nsis",
              "arch": [
                "x64"
              ]
            }
          ],
          "artifactName": "${productName}_setup_${version}.${ext}"
        },
        "nsis": {
          "oneClick": false,
          "perMachine": false,
          "allowToChangeInstallationDirectory": true,
          "deleteAppDataOnUninstall": false
        }
      },
      "dependencies": {
        "electron-is-dev": "^1.2.0",
        "electron-store": "^6.0.0",
        "element-plus": "latest",
        "serialport": "^9.0.7",
        "vue": "^3.0.5",
        "vue-router": "^4.0.0-beta.13"
      },
      "devDependencies": {
        "@rollup/plugin-alias": "^3.1.1",
        "@rollup/plugin-commonjs": "^15.0.0",
        "@rollup/plugin-json": "^4.1.0",
        "@rollup/plugin-node-resolve": "^9.0.0",
        "@vitejs/plugin-vue": "^1.0.4",
        "@vitejs/plugin-vue-jsx": "^1.1.2",
        "@vue/compiler-sfc": "^3.0.5",
        "chalk": "^4.1.0",
        "concurrently": "^5.3.0",
        "dotenv": "^8.2.0",
        "electron": "^11.0.0",
        "electron-builder": "^22.8.0",
        "electron-connect": "^0.6.3",
        "electron-rebuild": "^2.3.5",
        "minimist": "^1.2.5",
        "ora": "^5.0.0",
        "rollup-plugin-esbuild": "^2.4.2",
        "sass": "^1.26.10",
        "typescript": "^3.9.7",
        "vite": "latest",
        "wait-on": "^5.2.1"
      },
      "keywords": [
        "vite",
        "electron",
        "vue3",
        "rollup"
      ]
    }

  5. 引入 serialport 成功，调用 serialport 报错

    TypeError: Third argument must be a function 删除 node_modules 和 package-lock.json 重新 npm i

Main Process 模块

app

控制应用程序的生命周期。如标题一致，主进程模块。

app.isPackaged 返回一个布尔值，表示应用是否打包，可以用于区分开发环境与生产环境(可以 npm i electron-is-dev ，有类似的作用 const is_dev = require('electron-is-dev'))

app.exit() 所有窗口立即关闭，而不询问用户，并且 before-quit 和 will-quit 事件不会触发，可以传入一个 退出 code，默认为 0

app.whenReady() 返回一个 Promise（可以直接 app.whenReady().then(fn)），当Electron 初始化完成。 可用作检查 app.isReady() 的方便选择，假如应用程序尚未就绪，则订阅ready事件。

BrowserWindow

创建和控制浏览器窗口，可以开启多个。（这个对象存在于主进程，开启的窗口内容属于渲染进程）

实例 new BrowserWindow 的属性

新建一个实例 const win = new BrowserWindow()。

win.loadURL(url[, options]) url 可以是远程地址 (例如 http://),也可以是 file:// 协议的本地HTML文件的路径.

win.closable 返回一个布尔值，表示这个窗口是否可以被用户关闭。

win.webContents.toggleDevTools() 加载窗口时使用浏览器开发人员工具打开窗口

ipcMain

从主进程到渲染进程的异步通信。

ipcMain.handle(channel, listener)

  • channel String
  • listener Function<Promise\ | any>
    • event IpcMainInvokeEvent
    • ...args any[]

为一个 invokeable IPC 添加一个处理器。 每当一个渲染进程调用 ipcRenderer.invoke(channel, ...args) 时这个处理器就会被调用。

分享到：

评论完整模式加载中...如果长时间无法加载，请针对 disq.us | disquscdn.com | disqus.com 启用代理