Electron的基础学习

最新推荐文章于 2024-07-09 11:54:31 发布

爱健身的程序员sa

最新推荐文章于 2024-07-09 11:54:31 发布

阅读量137

点赞数

分类专栏： electron 文章标签： electron 学习 npm

本文链接：https://blog.csdn.net/sassssiii/article/details/129279321

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

创建一个Electron项目

注：我安装的是最新版本的node.js和npm，但是老版本的node.js运行也没有出现错误

1.初始化文件夹

npm init

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

pakage.json文件

  {
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "mumu",
  "license": "MIT",
  }

2.安装electron依赖

npm i --save-dev electron

3.安装完后我们写好一个html页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

4.主进程的运行

任何Electron应用程序的入口都是main文件。这个文件控制了主进程，这是运行在一个node环境中的，负责控制项目的生命周期，显示原生界面，执行特殊操作并管理渲染器进程，并且我们需要创建一个main文件

const { app, BrowserWindow } = require('electron')
const path = require('path')
// 创建一个window进程
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences:{
            preload:path.join(__dirname,'preload.js')
        }
    })

    win.loadFile('index.html')
}

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

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow
    })
})

// 监听所有的关闭事件
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

上面的属性我们下面一一介绍：

app模块，他控制整个应用程序的事件生命周期的，我认为就是调用事件监听的。
BrowserWindow模块，他创建和管理应用程序窗口，应该是类似一个对象
上面的createWindow函数，就是将BrowserWindow实例化，然后去调用他里面的方法loadFile(),去渲染页面对象中实例化里面的高度和宽度其实就是应用程序的宽高。
- 函数中的预加载脚本传入 webPreferences.preload 选项中，我们就可以将脚本在渲染页面之前进行加载。
app.whenReady()
- 在electron中，只有app模块的ready事件被激发后才能创建浏览器窗口。你可以通过使用app.whenReady() Api来监听此事件。在whenReady() 成功后调用 createWindow()函数
- activate事件，当应用被激活时发出。各种操作都可以触发此事件, 例如首次启动应用程序、尝试在应用程序已运行时或单击应用程序的坞站或任务栏图标时重新激活它。
- 如果说没有浏览器窗口打开他的话，会重新创建窗口
process.platform 判断他的平台如果不是mac就通过app.quit()退出

preload.js文件

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])
  }
})

注：目前node.js中的process.platform,目前electron只支持3个平台，第一个是(window)win32，第二个是（Linux）linux，第三个是darwin(macOS)