electron学习笔记2

1.Electron 应用部署

为了使用 Electron 部署你的应用程序，你存放应用程序的文件夹需要叫做 app 并且需要放在 Electron 的资源文件夹下（在 Linux 和 Windows 中是指 resources/）就像这样：

electron/resources/app
├── package.json
├── main.js
└── index.html

然后运行 Electron.app （或者 Linux 中的 electron，Windows 中的 electron.exe）,接着 Electron 就会以你的应用程序的方式启动。electron 文件夹将被部署并可以分发给最终的使用者。

2.将你的应用程序打包成一个文件

除了通过拷贝所有的资源文件来分发你的应用程序之外，你可以可以通过打包你的应用程序为一个 asar 库文件以避免暴露你的源代码。

为了使用一个 asar 库文件代替 app 文件夹，你需要修改这个库文件的名字为 app.asar ，然后将其放到 Electron 的资源文件夹下，然后 Electron 就会试图读取这个库文件并从中启动。如下所示：

electron/resources/
└── app.asar

3.第一个electron程序运行

根据官方文档：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
我们使用使用脚手架创建，首先对文件夹进行初始化 npm 包。

mkdir my-electron-app && cd my-electron-app
npm init

init初始化命令会提示您在项目初始化配置中设置一些值为本教程的目的，有几条规则需要遵循

1.entry point 应为 main.js.
2.author 与 description 可为任意值，但对于应用打包是必填项。

pakcage.json文件夹如下：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",

}

然后，将 electron 包安装到应用的开发依赖中。

$ npm install --save-dev electron

最后，您希望能够执行 Electron 如下所示，在您的 package.json配置文件中的scripts字段下增加一条start命令：

{
  "scripts": {
    "start": "electron ."
  }
}

1.主程序运行

任何 Electron 应用程序的入口都是 main 文件。

这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程(稍后详细介绍)。

执行期间，Electron 将依据应用中 package.json配置下main字段中配置的值查找此文件，您应该已在应用脚手架步骤中配置。

要初始化这个main文件，需要在您项目的根目录下创建一个名为main.js的空文件。

2.创建页面

在可以为我们的应用创建窗口前，我们需要先创建加载进该窗口的内容。在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。

此教程中，您将采用本地HTML的方式。在您的项目根目录下创建一个名为index.html的文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <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>.
  </body>
</html>

3.在窗口中打开页面

现在您有了一个页面，将它加载进应用窗口中。要做到这一点，你需要两个Electron模块：

1.app 模块，它控制应用程序的事件生命周期。
2.BrowserWindow 模块，它创建和管理应用程序窗口。

因为主进程运行着Node.js，您可以在文件头部将他们导入作为公共JS模块：

const { app, BrowserWindow } = require('electron')

然后，添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

接着，调用createWindow()函数来打开您的窗口。

在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。您可以通过使用 app.whenReady() API来监听此事件。在whenReady()成功后调用createWindow()。

app.whenReady().then(() => {
  createWindow()
})

之后运行 npm start

运行图为：

posted @ 2021-10-16 17:42 providence2320 阅读(87) 评论(0) 编辑收藏举报

刷新页面返回顶部

providence2320

electron学习笔记2