electron从入门到入门

最新推荐文章于 2024-06-27 11:45:00 发布

AIGC小陈

最新推荐文章于 2024-06-27 11:45:00 发布

阅读量1.9k

点赞数 4

文章标签： electron 前端 javascript

本文链接：https://blog.csdn.net/weixin_53312997/article/details/124964792

版权

前言

最近公司要做windows客户端，但是公司还缺少C#的开发人员🎫，网上很早就有了electron实现windows客户端，于是就需要前端的同事通过electron来实现一款应用替代C# winform 窗体🎨。

什么是electron?

官网解释：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，每一个窗体就是对应的一个html页面

快速入门

官网也提供了快速入门的方案，相关代码如下。

#克隆这个仓库
git 克隆 https://github.com/electron/electron-quick-start
#进入仓库
cd electron-quick-start
#安装依赖
npm 安装
#运行应用程序
npm start

不出意外的情况下，你就会弹出如下窗口💚

自己实现`hello World`

全局安装`Electron`

# 如果安装失败可以使用cnpm或者改用淘宝源进行安装(可以全局安装也可以局部安装)
npm install -g electron

初始化项目

新建一个文件夹尽量使用英文，在该目录下执行

npm init --yes

创建入口文件也就是主进程文件（下文会提什么是主进程）要与`package.json`中`main`对应的文件名一致

/*
 * @Author: drinkwd
 * @Date: 2022-04-11 17:38:08
 * @LastEditors: drinkwd
 * @LastEditTime: 2022-04-12 14:25:18
 * @Description: 主进程入口
 */
const {app, BrowserWindow } = require('electron')
let mainWindow = null // 主窗口
// app代表electron的引用，BrowserWindow代表窗体
// 当app准本就绪之后创建一个800*600的窗体
app.whenReady().then(() => {
  // 创建窗体
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
  })
  // 加载渲染进程文件
  mainWindow.loadFile('index.html')
  // 监听窗口关闭回调，减少资源占用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})

创建渲染进程文件（下文会提什么是渲染进程）

<!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>
    hello World
  </body>
</html>

查看效果

npm start # 不出意外的话会出现一个hello World窗体

如果报这个Cannot find module 'fs/promises'错误，需要升级一下nodejs的版本

Electron中主进程与渲染进程的关系

一般一个程序只有一个主进程也就是package.json中对应的入口文件💨。
渲染进程就是在主进程中加载的html文件，一个程序可以有多个渲染进程，并由主进程读取控制💫。

这个时候在回过头看上面的代码是不是眼前一亮，更加清晰明了🍺。

基础案例

注：不同版本的electron有些语法可能会有区别，如果有效果没有生效，先查看版本在进行排错，可能会减少很多坑。

案例1 读取文件内容

# file.txt
file中的文件内容测试

在index.html的body中加入相关元素，触发读取事件，展示读取内容

<body>
    <button id="btn">
      读取文件
    </button>
    <!--展示读取内容-->
    <div id="content"></div>
    <script src="render/index.js"></script>
  </body>

编写读取代码，在根目录下新建目录及文件render->index.js

var fs = require("fs")
window.onload = function(){
  var btn = this.document.querySelector('#btn')
  var content = this.document.querySelector('#content')
  btn.onclick = functi

最低0.47元/天解锁文章

AIGC小陈

关注

4
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
electron从入门到入门

前言最近公司要做windows客户端，但是公司还缺少C#的开发人员🎫，网上很早就有了electron实现windows客户端，于是就需要前端的同事通过electron来实现一款应用替代C# winform 窗体🎨。什么是electron?官网解释：使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序，每一个窗体就是对应的一个html页面快速入门官网也提供了快速入门的方案，相关代码如下。#克隆这个仓库git 克隆 https://github.com/electron/
复制链接

扫一扫