基于 react + electron 开发及结合爬虫的应用实践🎅

2021 年 3 月 2 日
筆記
Electron, React

前言📝

👉 Electron 是一个可以使用 Web 技术如 JavaScript、HTML 和 CSS 来创建跨平台原生桌面应用的框架。借助 Electron，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。 👈

一个 electron-react 栗子 🤖

1️⃣-Demo 安装 react 脚手架

终端执行命令npx create-react-app react-electron自动进行配置安装
进入react-electron目录下执行yarn start，项目自动运行在 3000 端口

2️⃣-Demo 配置 electron 主进程

因为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(`//localhost:3000`);
});

3️⃣-Demo 配置 react-cli

需要引入的库

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 //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。

electron-react 每日壁纸 🧠

既然我们可以利用 react &electron 构建桌面应用，就可以利用众多 npm 包去实现一个能用在生活中可以用到的功能，前段时间由于兴趣使然，接触 node 爬虫比较多，所以我想结合 puppeteer实现每日壁纸的桌面应用

1️⃣-wallpaper 明确需求

壁纸进行分类获取，所有主题的壁纸通过合集的方式保存
每天的壁纸按时更新，更新过的壁纸会保存到数据库中
壁纸合集中的壁纸可以通过喜欢功能进行收藏或取消
壁纸可以预览、下载，并可进行一键设置
在收藏的壁纸中可以开启是否进行每天自动设置当前壁纸
风格简约，自适应布局

2️⃣-wallpaper 功能实现

1、electron 部分

需要引入的库

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进行下载，并返回下载后图片的绝对路径给前端，用于设置桌面壁纸

2、前端部分

需要引入的库

antd 页面样式
wallpaper 设置壁纸
puppeteer 爬虫
node-schedule 定时任务

前端页面初始化时先通过ipcRenderer进行数据库，如果存在则对比数据库中time字段保存的时间与当前时间是否为同一天，都符合则获取展示，否则调取puppeteer重新进行最新壁纸页面的数据爬取，并将爬取的数据saveormerge到数据库，更新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;
};

3️⃣-wallpaper 展示

功能展示

自适应布局 ✔
壁纸收藏 ✔
壁纸下载 ✔
每日更新 ✔
动态壁纸 ✖（真不知道怎么搞，来个大佬指导一下）

4️⃣-wallpaper 总结

至此，谢谢各位在百忙之中点开这篇文章，希望对你们能有所帮助，相信你对 electron 结合 react 开发以及有了大概的认实，总的来说优化的点还有很多，比如 webpack 的打包配置、爬虫、等等…此项目为了大家能更熟练上手在上手 electron+react 的业务需求，如有问题欢迎各位大佬指正。

👋：跳转github
🍑：将 package 文件中的 executablePath 更改为自己谷歌浏览器的目标路径

求个 star，谢谢大家了

Tags: Electron React