本文主要讲解关于创业嘎嘎香 ，新手如何快速搭建 Electron 项目相关内容，让我们来一起学习下吧！
👈👈👈 欢迎点赞收藏关注哟
首先分享之前的所有文章 >>>> 😜😜😜 文章合集 : 🎁 juejin.cn/post/694164… Github : 👉 github.com/black-antCASE 备份 : 👉 gitee.com/antblack/ca…
一. 前言
桌面端一般通过 C++ , C++ 的桌面性能很高，但是对于个人开发来说，可以不要求那么高的成本。
而 Java 和 Python 在这一块还是太弱势了，生态不行，成品美观度也会差一些。
在考虑开发难度和效果方面，最后可以考虑通过 Node.js + Electron 来实现界面效果。
这一篇就来实现一个简单的 Node.js 客户端组件。
本文需要用到的基础知识
-
主进程 ： package.json 中 main 属性指定的进程，通常是 main.js
- 一个 Electron 总是
有且只有一个主进程 - 主进程可以创建 BrowserWindow 实例 ，每个实例对应一个渲染进程
- 一个 Electron 总是
-
渲染进程 ：
每个Electron 中的web 页面运行在它自己的渲染进程中- 渲染进程是基于 Chromium 的多进程架构
- 每个 BrowserWindow 销毁时 ，渲染进程也会被销毁
二. 环境搭建及初级使用
2.1 安装 Node.js
Node.js — Download Node.js® (nodejs.org)
这里可以非常方便的下载 Windows 相关的应用。
- 安装完成后执行命令查询结果 ：
node -v - 部分可选操作如下 ：
// 修改 npm 安装路径
npm config set prefix "D:codepluginnodejsnode_global"
npm config set cache "D:codepluginnodejsnode_cache"
// 修改 Windows 环境变量
修改 Windows 用户变量 ，设置为 node_global 的路径
// 安装国内源 （时间变动源可能会有变化，注意查找最新源）
npm install -g cnpm --registry=https://registry.npmmirror.com
2.2 安装 Electron
// S1 : 安装 electron
cnpm install -g electron
// S2 : 查看安装的版本
npx electron -v
// S3 : 启动 electron
npx electron
2.3 初级使用
搭建自己的第一个项目 ：
- S1 : 创建一个项目文件夹
- S2 : 文件夹运行
npm init命令 - S3 : 运行完成后会生成一个 package.json 配置 ，对其进行修改
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "应用描述",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Ant-Black",
"license": "ISC",
"devDependencies": {
"electron": "^29.1.6"
}
}
- S4 : 安装 electron 环境 :
cnpm install --save-dev electron - S5 : 运行当前项目 ：
cnpm start - S6 : 编辑 main.js 和 index.js
main.js
// 我们需要导入两个electron模块
const { app, BrowserWindow } = require('electron')
// 创建一个createWindow()函数，用于将index.html加载到新BrowserWindow实例中
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
let promise = win.loadFile('index.html');
}
// 调用这个createWindow()函数来打开你的窗口
app.whenReady().then(() => {
createWindow()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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>这是第一个 Electron 项目</h1>
</body>
</html>
基础运行效果
三. 完善项目细节
3.1 关于结构的引用
在使用 Electron 时和搭建一个 HTML 页面没有区别 ，结构上也可以按照相对路径进行引用 ：
3.2 常规 JS 的引用
也就是对组件进行 Event 事件 ，整体和 HTML 页面上的没有区别 ：
3.3 渲染线程到主线程的通信
- 在 main.js 里面加载 preload.js , 从而搭建一个桥梁
- 渲染线程通过调用 preload.js 里面的对象从而调用主线程
S1 : main.js 中定义加载 preload
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const path = require('path')
var currentWin = null;
// 进入首页 ，也就是最初建的页面
app.whenReady().then(() => {
// 创建一个 BrowserWindow 和 Login 页面绑定
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false
},
})
win.webContents.openDevTools()
win.loadFile("login.html");
currentWin = win;
})
// 发送消息
ipcMain.on('message', (event, message) => {
console.log(message)
});
S2 : preload.js 里面定义转发操作
const { ipcRenderer } = require('electron')
// 通过 S1 的 ipcMain 发起调用
window.sendMsg = function (message) {
ipcRenderer.send('message', message);
}
S3 : 页面中调用 window 操作
// 点击按钮
<button class="outline" id="send-message-button">Send Message to Main Process</button>
// 按钮触发 JS ，从而调用到 window , 转发到主进程
const sendMessageButton = document.getElementById('send-message-button');
sendMessageButton.addEventListener('click', () => {
window.sendMsg("Hello")
});
3.4 简单的页面跳转
- 走的还是通信那种方案
// 这里是在当前页面里面进行转换
ipcMain.on('page-change', (event, page) => {
currentWin.loadFile(page);
});
3.5 打开一个新窗口
- 核心就是 main.js 里面的一段创建页面的代码
var currentWin = null;
// 这里提供一个新的页面
ipcMain.on('page-create', (event, page) => {
// 每个 BrowserWindow 都是为了创建一个渲染线程
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: true,
contextIsolation: false
},
})
win.webContents.openDevTools()
currentWin.loadFile(page);
currentWin = win;
});
3.4 发起桌面端 API 的调用
这里就会稍微复杂点了 ，在 Electron 的页面里面 ，是不能任意调用 Electron API 的 。有些操作需要借助事件转发到主进程，由主进程触发 ：
S1 : 由 渲染进程触发 事件
<button class="outline" id="open-file-button">Open File</button>
const openFileButton = document.getElementById('open-file-button');
// 添加点击事件
openFileButton.addEventListener('click', () => {
window.openFile()
});
S2 : preload.js 中对事件进行转发
window.openUrl = function (url) {
ipcRenderer.send('open-url', url);
}
S3 :main.js 里面发起 API 操作
- windows 对象是一个定义在 preload.js 文件中的全局对象
- preload.js 在 main.js 中被加载
// 这里提供一个打开文件的函数
ipcMain.on('open-file', (event) => {
dialog.showOpenDialog(currentWin, {
properties: ['openFile']
}).then(result => {
console.log(result.canceled)
console.log(result.filePaths)
}).catch(err => {
console.log(err)
})
});
最终效果 ： 打开文件成功
Electron 可用 API
www.electronjs.org/zh/docs/lat…
总结
由于是学习过程中的记录 ，所以很简单 ，也不涉及到打包。
主要是打包后发现体积太大了，这一块可能需要深入的了解，此时写出来也没啥必要。
当然生产上肯定不会这么简单 ，结构也不会那么粗糙，不过我也没见过生产得用法，见谅
- 整个用法和 HTML 上没有区别，无非是借助 Electron API 发起的桌面端 API 的调用
-
性能有待考证，但是常规的功能应该没有问题 - 可用和 React , Vue 结合使用 ，意味着
支持复杂的项目 - 整个 Node.js 可以提供
生态的支持， 可扩展性极强，性能可能不会太好 - 成功的案例有很多 ，例如鼎鼎大名的
VSCode,Atom
20240514 补充 ：
看大家对 "创业" 这个话题关注度很高 ，既然聊到了 ，就来说说 为什么我会把他和创业绑定在一起 ？
说到创业 , 对于普通人而言 , 不存在什么远大的志向，要开辟一片什么天地什么 , 原因无非是那么几个 ： 年龄到了 / 钱不够了 / 路走窄了
而对于个人开发者 , 创业也不是开家公司什么的, 没那个成本和能力, 能做的其实很少.
有哪些方向？
- 方向一 ： 依赖平台贩卖技术
- 最常见就是写插件 , IDE 插件 , Excel 插件 。
- 问题 ：之前尝试过写过 IDE , 但是写的不好, 不敢收钱. 而且感觉就算写好了,也不想向别人收钱.
- 方向二 ： 流量变现
- 比较常见的就是写直接的博客 , 上面发布广告。
- 问题 ： 成本太高了, 送的腾讯云 5M 卡得一批 ，搭数据库搭网站成本一年下来也要大几百 , 关键是没什么流量，要以年为单位积累，可能还没成效
- 方向三 ： 知识变现(小)
- 写文章 ，发公众号 ，知识星球 ，面试辅导等等
- 问题 ： 没太大问题 ,投入少 ， 持之以恒的过程 ，收益不会太高
- 方向四 ： 知识变现 （大）
- 发书 ，发小册
- 问题 ： 需要很好的知识积累 ，而且发书成本很高的. 是条能尝试的路，我个人就在尝试写一本小册
- 方向五 ： 写软件
这也是我现在主要研究的方向，技术变现成功能 ，通过这些功能变现- 比如 typora , 滴答清单 ，我个人就为此付费了
如果从后端开始呢？
我个人本身不是前端 , 作为一名写了八年代码的老后端,我可以说 , 大部分后端的点子, 都可以实现 。
其中的难点只有 ： 成本和时间。
而这两个恰恰是最少的。尤其是成家后 , 除去必须的时间开销，其实一周也就10个小时的时间能做这些。如果处在育儿阶段，这个时间还要打对折。
后端从开发到上线到最后出结果, 周期至少3个月 , 零零散散可能要 1年 , 根本没有那么长时间的试错成本
你以为阿里云99一年的服务器能满足你的需求吗 ? 放个数据库就满了。
开始转向 Python
Python 是个很好地选择 , 后端 1 个月的功能点 ，python 可能几天就搞完了 , 成本低 , 时间快 , 确实是一个很不错的选择.
所以 Python 也是我一大主要的研究方向 , 我也一直在尝试对其进行深入。
不过 Python 也有问题 , 其前端效果太差了 , QT 工具虽然可以 , 但是门槛高并且开始商业化了 , 这也是一大难点
看向前端
那么既能满足前端的效果 , 又需要快速的迭代试错，我认为 node.js 提供了一个很好的平台。
就像上面说的 ，我希望从桌面端入手, 最终筛选下来就是 Eletron 了。 当然又兄弟提到了 Flutter ，也会研究一下，但是相对于生态 ，没有 node.js 这么多。
所以我认为 Eletron 是一个很好的选择。
至于说性能
管他性能呢 ，我要的目的就是把成本摊到个人使用者身上，我就是想节省开发成本和服务器成本，现在的个人电脑，这点性能应该是扛得住的。
真有搞头 ，软件有了稳定的收入 ，我根本不会再深入 Eletron , 直接招人换语言换框架写性能更好的了。
问题总结 ：
// node_globalcnpm.ps1，因为在此系统上禁止运行脚本
解决方案 ： 管理员运行 PowerShell ，执行命令 ：
> Start-Process powershell -Verb runAs
> set-ExecutionPolicy RemoteSigned
参考文档 ：
@ blog.csdn.net/weixin_4513…
以上就是关于创业嘎嘎香 ，新手如何快速搭建 Electron 项目相关的全部内容，希望对你有帮助。欢迎持续关注程序员导航网，学习愉快哦！
