Electron学习开发之（1）--第一个应用

最新推荐文章于 2024-05-24 09:13:21 发布

Mr.Lanson

最新推荐文章于 2024-05-24 09:13:21 发布

阅读量1.5k

点赞数

分类专栏： Electron Node.js 文章标签： Electron NodeJS

本文链接：https://blog.csdn.net/solar_Lan/article/details/79726596

版权

Node.js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Electron

6 篇文章 0 订阅

订阅专栏

打造你的第一个Electron应用

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。

这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

注意 : 此示例还有可用的仓库, 您可以本文最后的链接中获取。

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

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

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

npm init

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

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

注意：如果 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 ."
    }
  }

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

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

安装 Electron

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

npm install --save-dev electron

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

开发一个简易的 Electron

Electron应用程序在JavaScript中开发与Node.js开发中使用相同的原理和方法。 Electron中的所有API和功能都可以通过electron访问，这可以像其他任何Node.js模块一样使用：

const electron = require('electron')

electron暴露了命名空间中的特征。作为例子，应用程序的生命周期通过electron.app管理，windows可以使用electron.BrowserWindow类创建。一个简单的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)

main.js应该创建窗口并处理应用程序可能遇到的所有系统事件。上述示例的更完整版本可能会打开开发人员工具，处理正在关闭的窗口，或者如果用户单击Dock中的应用图标，则可以在macOS上重新创建窗口。

  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', function () {
      // 取消引用 window 对象，如果你的应用支持多窗口的话，
      // 通常会把多个 window 对象存放在一个数组里面，
      // 与此同时，你应该删除相应的元素。
      win = null
    })
  }
  
  // Electron 会在初始化后并准备
  // 创建浏览器窗口时，调用这个函数。
  // 部分 API 在 ready 事件触发后才能使用。
  app.on('ready', createWindow)
  
  // 当全部窗口关闭时退出。
  app.on('window-all-closed', function () {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
  
  app.on('activate', function () {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (win === null) {
      createWindow()
    }
  })
  
  // 在这文件，你可以续写应用剩下主进程代码。
  // 也可以拆分成几个文件，然后用 require 导入。

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
      We are using Node.js <script>document.write(process.versions.node)</script>,
      Chromium <script>document.write(process.versions.chrome)</script>,
      and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

启动你的应用

一旦创建了初始main.js，index.html和package.json文件，就可以通过从应用程序目录运行npm start来尝试应用程序。

Trying this Example

Clone and run the code in this tutorial by using the electron/electron-quick-start repository.

Note: Running this requires Git.

# 克隆这仓库
  $ git clone https://github.com/Afantor/Electron-demo
  # 进入仓库
  $ cd Electron-demo
  # 安装依赖库
  $ npm install
  # 运行应用
  $ npm start

For a list of boilerplates and tools to kick-start your development process, see the Boilerplates and CLIs documentation.

Mr.Lanson

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Electron学习开发之（1）--第一个应用

打造你的第一个Electron应用Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你...
复制链接

扫一扫