👉 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron,我们可以使用纯 JavaScript 来调用丰富的原生 APIs。 👈
- 终端执行命令
npx create-react-app react-electron
自动进行配置安装 - 进入
react-electron
目录下执行yarn start
,项目自动运行在 3000 端口
- 因为
public
文件夹不会被webpack
打包处理,会直接复制一份到dist
目录下,所以在public
中新建electron.js
作为主进程 - 在主进程中只需要从 electron 包中结构出 app, BrowserWindow,并监听 app 的'ready'事件,使用 BrowserWindow 生成实例对象,从而判断环境进行加载静态文件 or 端口
const { app, BrowserWindow } = require("electron");
const isDev = process.env.NODE_ENV !== "development";
app.on("ready", () => {
mainWindow = new BrowserWindow();
isDev
? mainWindow.loadURL(`file://${__dirname}\\index.html`)
: mainWindow.loadURL(`http://localhost:3000`);
});
需要引入的库
yarn add electron electron-builder nodemon -D //安装到生产环境
yarn add concurrently cross-env -S //安装到开发环境
-
在 package.json 中通过 mian 标明主进程执行目录,配置 homepage
-
配置
scripts
和build
字段,在 react 启动后打开 electron 桌面应用、通过cross-env
添加环境变量、以及在打包时如何进行配置(只进行 win 下打包){ "name": "my-app", "version": "0.1.0", "private": true, "main": "public/electron.js", "homepage": ".", "scripts": { "start": "cross-env NODE_ENV=development concurrently \"yarn run client\" \"wait-on http://localhost:3000 && yarn run electron:watch\" ", "build": "yarn run build-client && yarn run build-electron", "client": "set BROWSER=none && react-scripts start", "electron:watch": "nodemon --watch public/electron.js --exec electron .", "electron": "electron .", "build-client": "react-scripts build", "build-electron": "electron-builder build -w", "test": "react-scripts test", "eject": "react-scripts eject" }, "build": { "productName": "electron-demos", "files": ["build/","main.js"], "dmg": { "contents": [ {"x": 110,"y": 150}, {"x": 240,"y": 150,"type": "link", "path": "/Applications"} ] }, "win": { "target": [{"target": "nsis", "arch": ["x64" ]}] }, "directories": { "buildResources": "assets", "output": "release" } }, }
此时我们可以运行yarn start
将之前的react
起始页通过桌面程序的方式打开,也可以通过执行yarn build
将我们的桌面程序打包生成.exe
文件进行安装 over。
既然我们可以利用
react
&electron
构建桌面应用,就可以利用众多 npm 包去实现一个能用在生活中可以用到的功能,前段时间由于兴趣使然,接触 node 爬虫比较多,所以我想结合puppeteer
实现每日壁纸的桌面应用
- 壁纸进行分类获取,所有主题的壁纸通过合集的方式保存
- 每天的壁纸按时更新,更新过的壁纸会保存到数据库中
- 壁纸合集中的壁纸可以通过喜欢功能进行收藏或取消
- 壁纸可以预览、下载,并可进行一键设置
- 在收藏的壁纸中可以开启是否进行每天自动设置当前壁纸
- 风格简约,自适应布局
需要引入的库
dayjs
判断和添加日期时electron-store
数据存储 (如果使用mongodb
数据库在开发环境正常,但是打包后就会报错)electron-dl
图片下载
首先进行BrowserWindow
的初始化配置
mainWindow = new BrowserWindow({
show: false,
width: 900,
height: 700,
minHeight: 700,
minWidth: 310,
frame: false, //无边框
transparent: false, //透明
alwaysOnTop: false,
hasShadow: false, //阴影
resizable: true,
webPreferences: {
nodeIntegration: true, //是否使用 node
enableRemoteModule: true, //是否有子页面
contextIsolation: false, //是否禁止 node
nodeIntegrationInSubFrames: true, //否允许在子页面(iframe)或子窗口(child window)中集成 Node.js
},
});
数据通过electron-store
进行操作,使用方便,引入后操作实例对象调取get
、set
、delete
进行获取、设置和删除,但缺点同样明显,不能像mongodb
一样通过mongoose
构建模型进行数据操作
const Store = require("electron-store");
const store = new Store(test);
store.set("test", true); //设置
store.get("test"); //获取
store.delete("test"); //删除
需求界面 UI 简洁,所以通过 electron 中的 ipcMain
和 ipcRenderer
通信模块结合前端antd/icons
设置应用的最小化按钮、全屏按钮、恢复按钮,当点击最小化时,界面隐藏置系统托盘,托盘点击控制界面出现和隐藏,托盘图标右键进行关闭
const {
Menu: { buildFromTemplate, setApplicationMenu },
} = require("electron");
setApplicationMenu(buildFromTemplate([])); //取消默认工具栏
ipcMain
和 ipcRenderer
都是 EventEmitter
类的一个实例。而EventEmitter
类由NodeJS
中的events
模块导出,EventEmitter
类是 NodeJS 事件的基础,实现了事件模型需要的接口, 包括 addListener
,removeListener
, emit
及其它工具方法. 同原生 JavaScript 事件类似, 采用了发布/订阅(观察者)的方式, 使用内部 _events
列表来记录注册的事件处理器。
const { Tray } = require("electron");
var appTray;
ipcMain.on("max-icon", () => {
//点击最大化时,主进程响应
mainWindow.isMaximized() ? mainWindow.restore() : mainWindow.maximize();
});
ipcMain.on("mini-icon", () => {
//点击最小化时
mainWindow.minimize(); //界面最小化
mainWindow.hide(); //隐藏界面
if (!appTray) {
appTray = new Tray(path.join(__dirname, "favicon.ico")); //设置托盘图标
appTray.setToolTip("one wallpaper💎"); //托盘图标hover时触发
appTray.on("click", () =>
//托盘图标点击时触发
mainWindow.isVisible() ? mainWindow.hide() : mainWindow.show()
);
appTray.setContextMenu(
//托盘图标右击时触发
buildFromTemplate([
{
label: "退出",
click: () => app.quit(),
},
])
);
}
});
electron 其余部分就是利用ipcMain
和 ipcRenderer
通信,使用electron-store
操作数据储存、处理并返回前端,当需要设置壁纸时通过electron-dl
进行下载,并返回下载后图片的绝对路径给前端,用于设置桌面壁纸
需要引入的库
antd
页面样式wallpaper
设置壁纸puppeteer
爬虫node-schedule
定时任务
前端页面初始化时先通过ipcRenderer
进行数据库,如果存在则对比数据库中time
字段保存的时间与当前时间是否为同一天,都符合则获取展示,否则调取puppeteer
重新进行最新壁纸页面的数据爬取,并将爬取的数据save
ormerge
到数据库,更新time
字段,点击对应集合时,进行对应集合的爬取并添加到当前children
字段进行保存, 数据结构为如下所示
[
{
time:'xxxx-xx-xx'
},
{
href: "当前集合链接",
srcmini: "集合缩略图.jpg",
title: "集合名称",
children: [
{
like: true, //该壁纸是否添加收藏
href: "壁纸所属集合链接",
maxsrc: "壁纸缩略图.jpg",
srcmini: "壁纸大图.jpg",
},
...
],
}
...
];
前端选用的是 react
+antd
进行开发,需要引入的 node 库时在 utils.js
文件下进行引入处理、并通过 es6 方式进行导出,由于electron
通信的回调函数在 es6 中并不友好,所以在utils.js
中进行统一的异步封装,以xxx-reply
作为响应 ipcRenderer 通信的标准格式,调用时直接传入通信事件名await ipcasync('xxx')
export const { ipcRenderer } = window.require("electron");
export const ipcasync = async (name, obj = null) => {
ipcRenderer.send(name, obj);
return await new Promise(resolve => {
ipcRenderer.on(`${name}-reply`, (event, arg) => resolve(arg));
});
};
爬虫使用的puppeteer
库,通过无头浏览器进行爬取,防止网页动态加载导致获取不到数据,并可以进行点击、输入等模拟用户真实行为,弊端在于爬取速度较慢,所以会将爬取到的数据保存,避免二次爬取,在爬取壁纸集合时,会根据 electron 获取到的页面大小进行匹配壁纸尺寸进行爬取
爬取当前最新壁纸
const getHomePage = async url => {
let urls = "壁纸网站域名/" + url; //url即子域名
const browser = await puppeteer.launch(config);
const page = await browser.newPage();
await page.goto(urls);
await page.waitForSelector(".wrapper", { visible: true });
const arr = await page.$$eval(".main>ul a", el =>
el.map(i => ({
href: "壁纸网站域名/" + i.getAttribute("href"),
srcmini: i.firstChild.getAttribute("src"),
title: i.firstChild.getAttribute("title"),
children: [],
}))
);
browser.close();
return arr;
};
爬取指定集合下壁纸
const getPages = async (url, screen) => {
const browser = await puppeteer.launch(config);
const page = await browser.newPage();
await page.goto(url);
const all = await page.$eval(".wrapper span", el => el.textContent);
const allPage = all.split("/")[1].replace(")", "");
await page.waitForSelector(".wrapper", { visible: true });
const arr = await page.$$eval("#showImg li a", el =>
el.map(i => ({
href: "壁纸网站域名/" + i.getAttribute("href"),
srcmini:
i.firstElementChild.getAttribute("src") ||
i.firstElementChild.getAttribute("srcs"),
}))
);
for (let i = 0; i < arr.length; i++) {
console.log(`总共爬取 ${allPage} 张,当前爬取第 ${i} 张`);
await page.goto(arr[i].href);
await page.waitForSelector(`#tagfbl`, { visible: true });
const hrefItems = await page.evaluate(
el =>
document.querySelector(el)
? document.querySelector(el).getAttribute("href")
: document.querySelector(`a[id="1920x1080"]`)
? document.querySelector(`a[id="1920x1080"]`).getAttribute("href")
: document.querySelector(`#tagfbl a`).getAttribute("href"),
`a[id="${screen}"]`
);
await page.goto("壁纸网站域名/" + hrefItems);
await page.waitForSelector("body img", { visible: true });
const hrefItem = await page.$eval("body img", el => el.src);
arr[i].maxsrc = hrefItem;
}
browser.close();
return arr;
};
功能展示
至此,谢谢各位在百忙之中点开这篇文章,希望对你们能有所帮助,相信你对 electron 结合 react 开发以及有了大概的认实,总的来说优化的点还有很多,比如 webpack 的打包配置、爬虫、等等...此项目为了大家能更熟练上手在上手 electron+react 的业务需求,如有问题欢迎各位大佬指正。
- 👋:跳转github
- 🍑:将 package 文件中的 executablePath 更改为自己谷歌浏览器的目标路径
求个 star,谢谢大家了