卓尔高考网

Electron——Electron的安装和简单使用

篇首语:本文由小编为大家整理,主要介绍了Electron——Electron的安装和简单使用相关的知识,希望对你有一定的参考价值。

NS.jSZhUoEr。COM

转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/120140142
本文出自【我是干勾鱼的博客】

1 安装node.js

可以参考Mac环境下安装Node.js。

2 安装npm

安装NPM。

3 安装electron

安装electron。

npm install --save-dev electron

报错:

$ npm install --save-dev electron> core-js@3.17.2 postinstall /Users/yuhaidong/studying/electron/my-electron-app/node_modules/core-js> node -e "try{require("./postinstall")}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling javascript standard library!The project needs your help! Please consider supporting of core-js:> https://opencollective.com/core-js > https://patreon.com/zloirock > https://paypal.me/zloirock > bitcoin: bc1qlea7544qtsmj2rayg0lthvza9fau63ux0fstcz Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)> electron@14.0.0 postinstall /Users/yuhaidong/studying/electron/my-electron-app/node_modules/electron> node install.jsRequestError: read ETIMEDOUT    at ClientRequest.> (/Users/yuhaidong/studying/electron/my-electron-app/node_modules/got/source/request-as-event-emitter.js:178:14)    at Object.onceWrapper (events.js:483:26)    at ClientRequest.emit (events.js:388:22)    at ClientRequest.origin.emit (/Users/yuhaidong/studying/electron/my-electron-app/node_modules/@szmarczak/http-timer/source/index.js:37:11)    at TLSSocket.socketErrorListener (_http_client.js:475:9)    at TLSSocket.emit (events.js:376:20)    at emitErrorNT (internal/streams/destroy.js:106:8)    at emitErrorCloseNT (internal/streams/destroy.js:74:3)    at processTicksAndRejections (internal/process/task_queues.js:82:21)npm WARN my-electron-app@1.0.0 No repository field.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! electron@14.0.0 postinstall: `node install.js`npm ERR! Exit status 1npm ERR! npm ERR! Failed at the electron@14.0.0 postinstall script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:npm ERR!     /Users/yuhaidong/.npm/_logs/2021-09-06T08_40_31_889Z-debug.log

NS.jSZhUoEr。COM

参考解决Electron下载安装失败的问题

npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142npm WARN deprecated har-validator@5.1.5: this library is no longer supportednpm WARN checkPermissions Missing write access to /usr/local/lib/node_modulesnpm ERR! code EACCESnpm ERR! syscall accessnpm ERR! path /usr/local/lib/node_modulesnpm ERR! errno -13npm ERR! Error: EACCES: permission denied, access "/usr/local/lib/node_modules"npm ERR!  [Error: EACCES: permission denied, access "/usr/local/lib/node_modules"] {npm ERR!   errno: -13,npm ERR!   code: "EACCES",npm ERR!   syscall: "access",npm ERR!   path: "/usr/local/lib/node_modules"npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR!     /Users/yuhaidong/.npm/_logs/2021-09-06T09_13_42_741Z-debug.log

Mac下命令权限问题,加入sudo:

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

结果如下:

NS.jSZhUoEr。COM

$ npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142npm WARN deprecated har-validator@5.1.5: this library is no longer supportednpm WARN checkPermissions Missing write access to /usr/local/lib/node_modulesnpm ERR! code EACCESnpm ERR! syscall accessnpm ERR! path /usr/local/lib/node_modulesnpm ERR! errno -13npm ERR! Error: EACCES: permission denied, access "/usr/local/lib/node_modules"npm ERR!  [Error: EACCES: permission denied, access "/usr/local/lib/node_modules"] {npm ERR!   errno: -13,npm ERR!   code: "EACCES",npm ERR!   syscall: "access",npm ERR!   path: "/usr/local/lib/node_modules"npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR!     /Users/yuhaidong/.npm/_logs/2021-09-06T09_13_42_741Z-debug.logdashuaigedeMacBook:my-electron-app yuhaidong$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.orgPassword:npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142npm WARN deprecated har-validator@5.1.5: this library is no longer supported⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext⸨       ░░░░░░░░░░░⸩ ⠦ extract:any-promise: sill extract any-promise@^1.3.0 ext/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm+ cnpm@7.0.0added 712 packages from 969 contributors in 72.296s

4 npm初始化

执行:

npm init

配置内容如下:

{  "name": "my-electron-app",  "version": "1.0.0",  "description": "Hello World!",  "main": "main.js",  "scripts": {    "start": "electron .",    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "Jane Doe",  "license": "MIT",  "devDependencies": {    "electron": "^14.0.0"  }}

5 创建文件

main.js

NS.jSZhUoEr。COM

// main.js// Modules to control application life and create native browser windowconst { app, BrowserWindow } = require("electron")const path = require("path")function createWindow () {  // Create the browser window.  const mainWindow = new BrowserWindow({    width: 800,    height: 600,    webPreferences: {      preload: path.join(__dirname, "preload.js")    }  })  // and load the index.html of the app.  mainWindow.loadFile("index.html")  // Open the DevTools.  // mainWindow.webContents.openDevTools()}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// 部分 API 在 ready 事件触发后才能使用。app.whenReady().then(() => {  createWindow()  app.on("activate", function () {    // On macOS it"s common to re-create a window in the app when the    // dock icon is clicked and there are no other windows open.    if (BrowserWindow.getAllWindows().length === 0) createWindow()  })})// Quit when all windows are closed, except on macOS. There, it"s common// for applications and their menu bar to stay active until the user quits// explicitly with Cmd + Q.app.on("window-all-closed", function () {  if (process.platform !== "darwin") app.quit()})// In this file you can include the rest of your app"s specific main process// code. 也可以拆分成几个文件,然后用 require 导入。

preload.js

// preload.js// All of the Node.js APIs are available in the preload process.// 它拥有与Chrome扩展一样的沙盒。window.addEventListener("DOMContentLoaded", () => {  const replaceText = (selector, text) => {    const element = document.getElementById(selector)    if (element) element.innerText = text  }  for (const dependency of ["chrome", "node", "electron"]) {    replaceText(`${dependency}-version`, process.versions[dependency])  }})

index.html

DOCTYPE html><html>  <head>    <meta charset="UTF-8">        <meta http-equiv="Content-Security-Policy" content="default-src "self"; script-src "self"">    <meta http-equiv="X-Content-Security-Policy" content="default-src "self"; script-src "self"">    <title>Hello World!title>  head>  <body>    <h1>Hello World!h1>    We are using Node.js <span id="node-version">span>,    Chromium <span id="chrome-version">span>,    and Electron <span id="electron-version">span>.        <script src="./renderer.js">script>  body>html>

6 执行命令

执行命令:

npm start

弹出桌面界面:

如果要打开调试模式,则加入代码:

mainWindow.webContents.openDevTools()

NS.jSZhUoEr。COM

即可,如图:

快捷键在macOS下是command + option + I,Windows下是Ctrl + Shift + I。

7 参考:

解决Electron下载安装失败的问题

npm和cnpm

Electron从零开始——介绍

Electron 文档

Electron从零开始——介绍

Mac环境下安装Node.js

打开调试模式

Electron 应用调试指南

以上是关于Electron——Electron的安装和简单使用的主要内容,如果未能解决你的问题,请参考以下文章

您可能还会对下面的文章感兴趣: