01_electron入门

最新推荐文章于 2024-04-23 13:55:08 发布

职业法师头铁

最新推荐文章于 2024-04-23 13:55:08 发布

阅读量841

点赞数 24

分类专栏： electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/qq_45475497/article/details/136559557

版权

electron 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于毕业论文可能需要用 electron，所以 Linux 驱动学习慢了下来。

一、安装 node.js

进入 node.js 官网：Node.js (nodejs.org)

咱们就是用稳定版，安装包除了安装路径自己选择外，一直点 Next。

安装完成后需要配置环境，推荐看这篇文章：Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客

一切完成后，按下 WIN+R，输入cmd，进入终端。输入以下命令，成功后会出现版本号：

二、electron 环境搭建

首先创建一个文件夹，你喜欢创建哪都可以，但是路径必须为全英文。

首先打开 Vscode，打开文件夹，在终端处输入：

npm init

会看到以下信息：

之后会生成一个 package.json 文件。

随后输入：

npm install electron --save-dev

但我这里出现了这样的问题：

这时候需要删除 .npmrc 文件，这个文件在 C:\Users\.npmrc，这个文件需要取消隐藏的项目：

第二个问题是这样：

这个是网络问题，我是直接用梯子下载的，所以重新安装了一遍就好了，安装成功是这样：

如何来验证是否安装成功，输入 npx electron -v，如果显示以下信息则安装成功。

或者输入 ./node_modules/.bin/electron -v 查看版本信息，但这时候又遇到一个问题，权限不够：

我借鉴了这篇文章无法加载文件xxx.ps1，因为在此系统上禁止运行脚本。_emsdk-main_qq_42541448的博客-CSDN博客，根据这个上面进行就可以完成。

接下来输入 ./node_modules/.bin/electron 命令就可以进入 Electron 界面了，如果能进入这个界面那安装的就没有问题了。

这个是项目中安装 electron 环境，在 cmd 中直接使用命令：npm install -g electron进行全局安装。

三、electron 下的 HelloWorld

首先先创建文件 index.html，这个是我们写的网页，UI 都写在 html 里。

<!DOCTYPE html>
<html lang="en">    <!-- html是跟元素;lang="en" 表示文档使用的语言是英文 -->
<head>
    <meta charset="UTF-8">  <!-- 文档使用的字符编码为 UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置了视口的宽度为设备宽度，并且初始缩放比例为1-->
    <title>Hello World</title>  <!-- 设置标题 -->
</head>
<body>
    Hello World 
</body>
</html>

之后创建主进程文件 main.js ，所有打开窗口的业务都要在这里面实现。

/* 
   var允许声明一个变量而不指定其具体类型
   app 模块，它控制应用程序的事件生命周期。
   BrowserWindow 模块，它创建和管理应用程序窗口
*/
const { app, BrowserWindow } = require('electron')  // 将elctron里面的app模块和BrowserWindow模块分别赋值给app和BrowserWindow
const path = require('node:path')

/* 创建 Electron 应用程序的窗口 */
const createWindow = () => {    // 箭头函数
    const win = new BrowserWindow({     // 创建win的窗口对象
        width: 500,
        height: 500,
        webPreference: {    // 创建的窗口设置WebPreferences，并指定了要预加载的JavaScript文件
            preload: path.join(__dirname, 'preload.js')
            /* __dirname 字符串指向当前正在执行脚本的路径 */
            /* path.join API 将多个路径联结在一起，创建一个跨平台的路径字符串 */
        }
    })
    win.loadFile('index.html')  // 加载一个 index.html 文件
}

/* 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口 */
app.whenReady().then(() => {        // 当检测到ready，创建窗口
    createWindow()

    app.on('activate', () =>{       // 应用程序激活时，触发activate事件
        if (BrowserWindow.getAllWindows().length === 0) createWindow()  // 获取当前打开的所有窗口，并判断窗口数量是否为0。如果当前没有打开的窗口，则调用createWindow()函数创建一个新窗口
    })
})

app.on('window-all-closed', () =>{      // 监听'window-all-closed'
    if (process.platform !== 'darwin') app.quit()   // 在所有窗口关闭时，如果当前平台不是 macOS，则退出应用程序
})

随后在终端输入 npm init --yes，这相当于就不用按这么多次 Enter 了。package.json 文件内容如下：

{
  "name": "01_helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",    // 新加的
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后创建 preload.js 文件：

/* 
  在窗口的DOM内容加载完成后，根据当前所使用的依赖的版本号，替换HTML文档中指定元素的文本内容
  所有的 Node.js API接口 都可以在 preload 进程中被调用
*/
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])
    }
  })

最后在终端输入 npm install，执行 npm start，就可以呈现下面的界面：