electron入门心得

最新推荐文章于 2023-11-23 11:39:00 发布

Leaves_Yu

最新推荐文章于 2023-11-23 11:39:00 发布

阅读量517

点赞数

分类专栏：随笔

随笔专栏收录该内容

20 篇文章 2 订阅

订阅专栏

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。应用启动的入口是一个与 Node.js 模块相同的 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

your-app/
  ├── package.json
  ├── main.js
  └── index.htmlCopy

为你的新Electron应用创建一个新的空文件夹。打开你的命令行工具，然后从该文件夹运行npm init

npm initCopy

npm 会帮助你创建一个基本的 package.json 文件。其中的 main 字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。如下片段是一个 package.json 的示例：

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js"
  }Copy

注意：如果 main 字段没有在 package.json 中出现，那么 Electron 将会尝试加载 index.js 文件（就像 Node.js 自身那样）。如果你实际开发的是一个简单的 Node 应用，那么你需要添加一个 start 脚本来指引 node 去执行当前的 package：

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "start": "node ."
    }
  }Copy

把这个 Node 应用转换成一个 Electron 应用也是非常简单的，我们只不过是把 node 运行时替换成了 electron运行时。

{
    "name": "your-app",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
      "start": "electron ."
    }
  }Copy

EN

安装 Electron

现在，您需要安装electron。我们推荐的安装方法是把它作为您 app 中的开发依赖项，这使您可以在不同的 app 中使用不同的 Electron 版本。在您的app所在文件夹中运行下面的命令：

npm install --save-dev electronCopy

除此之外，也有其他安装 Electron 的途径。请咨询安装指南来了解如何用代理、镜像和自定义缓存。

EN

开发一个简易的 Electron

Electron apps 是使用与 Node.js 开发中相同的原理和方法在 JavaScript 中开发的。 All APIs and features found in Electron are accessible through the electron module, which can be required like any other Node.js module:

const electron = require('electron')Copy

The electron module exposes features in namespaces. As examples, the lifecycle of the application is managed through electron.app, windows can be created using the electron.BrowserWindow class. 一个简单的main.js文件可能仅等待应用程序准备就绪后打开一个窗口：

const {app, BrowserWindow} = require('electron')
  const path = require('path')
  const url = require('url')
  
  function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 800, height: 600})
  
    // 然后加载应用的 index.html。
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  }
  
  app.on('ready', createWindow)Copy

The main.js should create windows and handle all the system events your application might encounter. A more complete version of the above example might open developer tools, handle the window being closed, or re-create windows on macOS if the user clicks on the app's icon in the dock.

const {app, BrowserWindow} = require('electron')
  const path = require('path')
  const url = require('url')
  
  // 保持一个对于 window 对象的全局引用，如果你不这样做，
  // 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
  let win
  
  function createWindow () {
    // 创建浏览器窗口。
    win = new BrowserWindow({width: 800, height: 600})
  
    // 然后加载应用的 index.html。
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
    }))
  
    // 打开开发者工具。
    win.webContents.openDevTools()
  
    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
      // 取消引用 window 对象，如果你的应用支持多窗口的话，
      // 通常会把多个 window 对象存放在一个数组里面，
      // 与此同时，你应该删除相应的元素。
      win = null
    })
  }
  
  // Electron 会在初始化后并准备
  // 创建浏览器窗口时，调用这个函数。
  // 部分 API 在 ready 事件触发后才能使用。
  app.on('ready', createWindow)
  
  // 当全部窗口关闭时退出。
  app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
      createWindow()
    }
  })
  
  // 在这文件，你可以续写应用剩下主进程代码。
  // 也可以拆分成几个文件，然后用 require 导入。Copy

最后，你想展示的 index.html：

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Hello World!</title>
    </head>
    <body>
      <h1>Hello World!</h1>
      We are using node <script>document.write(process.versions.node)</script>,
      Chrome <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.
    </body>
  </html>Copy

EN

启动你的应用

Once you've created your initial main.js, index.html, and package.json files, you can try your app by running npm start from your application's directory.

打包你的应用

输入 npm install electron-packager -g 全局安装我们的打包神器

npm install electron-packager -g

安装好打包神器后，输入 electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules 即可开始打包

electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules

这个命令什么意思？蓝色部分可自行修改：

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --version版本号 --overwrite --ignore=node_modules

Leaves_Yu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
electron入门心得

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。应用启动的入口是一个与 Node.js 模块相同的 package.json 文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：your-app/ ├── package.json ├── main.js └── index.htmlCopy为你的新Elect...
复制链接

扫一扫