HTML+CSS+JavaScript开发跨平台应用程序Electron框架

最新推荐文章于 2024-07-25 20:29:35 发布

Spider@囚童

最新推荐文章于 2024-07-25 20:29:35 发布

阅读量949

点赞数 9

文章标签： node.js electron

本文链接：https://blog.csdn.net/qq2877885856/article/details/139162271

版权

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux
官方文档：Electron

由 Electron 构建的应用

在这里插入图片描述

框架需求依赖

Node.js建议您使用最新的LTS版本。
注意因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

创建你的应用程序

Electron 应用程序遵循与其他 Node.js 项目相同的结构。首先我们创建一个文件夹并且初始化npm包
在init初始化命令会提示您在项目初始化配置中设置一些值。请遵守下面的规则来初始化配置
entry point 应为 main.js. author 与 description 可为任意值，但对于应用打包是必填项。

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

完成上面操作后我们就可以输入指令下载Electron包npm install --save-dev electron
在package.js中我们在加上一句start命令能让您在开发模式下打开您的应用

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

现在我们运行npm start是会出现报错的

运行主进程

任何 Electron 应用程序的入口都是 main 文件。这个文件控制了主进程，它运行在一个完整的Node.js环境中，负责控制您应用的生命周期，显示原生界面，执行特殊操作并管理渲染器进程
在你的目录下创建main.js文件
注意：如果您此时再次运行start命令，您的应用将不再抛出任何错误！然而，它不会做任何事因为我们还没有在main.js中添加任何代码。

创建页面

在您的项目根目录下创建index.html文件
在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。

<!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>

现在我们在main.js中引入两个模块app, BrowserWindow

//main.js
const { app, BrowserWindow } = require('electron')
//添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}
//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
//您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。
app.whenReady().then(() => {
  createWindow()
  //监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
   app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

注意：此时，您的应用程序应当成功打开显示您页面的窗口！

通过预加载脚本从渲染器访问Node.js

在您的项目根目录下创建 preload.js 文件

//preload.js
//访问 Node.js process.versions 对象
//运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。
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])
  }
})

在你现有的 BrowserWindow 构造器中将preload.js文件引入入 webPreferences.preload 选项。

//main.js
const { app, BrowserWindow } = require('electron')
//添加一个createWindow()方法来将index.html加载进一个新的BrowserWindow实例。
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    //__dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
    //path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串。
     webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}
//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 
//您可以通过使用 app.whenReady() API来监听此事件。 在whenReady()成功后调用createWindow()。
app.whenReady().then(() => {
  createWindow()
  //监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
   app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

最后一步

对于与您的网页内容的任何交互，您想要将脚本添加到您的渲染器进程中。由于渲染器运行在正常的 Web 环境中，因此您可以在 index.html 文件关闭标签之前添加一个

<script src="./renderer.js"></script>

renderer.js 中包含的代码可以在接下来使用与前端开发相同的 JavaScript API 和工具。例如使用 webpack 打包并最小化您的代码，或者使用 Vue等框架来管理您的用户界面。

本文按照官方文档进行了一个简单上手的应用程序开发感兴趣的可以点个关注下次发一下使用Electron做一个自动化登录的应用程序

Spider@囚童

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript开发跨平台应用程序Electron框架

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux
复制链接

扫一扫