Electron + React 搭配创建 PC桌面 程序

Electron + React 搭配创建 PC桌面 程序

1.Electron 介绍

• 官网: https://www.electronjs.org/

• 简介： 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

• 快速启动 应用程序

  # 克隆示例项目的仓库
  $ git clone https://github.com/electron/electron-quick-start
  
  # 进入这个仓库
  $ cd electron-quick-start
  
  # 安装依赖并运行
  $ npm install && npm start
  
  #OR
  
  $ yarn
  $ yarn start
  

  • 上面只是 demo 演示一下 electron 的使用，在实际项目中这里仅供参考。

2. React 介绍

• 官方文档： https://reactjs.org/

• 介绍： A JavaScript library for building user interfaces

• 快速启动 应用程序

  • 官方提供快速脚手架 create-react-app
  • 可以使用 yarn 也可以使用 npm 进行安装
  • 也可以使用 淘宝 镜像，如何设置自行百度
  • create-react-app 初始化的项目 默认监听 3000 端口
  • 如果能正常访问 http://localhost:3000 ,则说明初始化成功。

  # 全局安装 create-react-app
  yarn add global create-react-app
  # OR
  npm install -g create-react-app
  
  #安装完成之后，初始化项目 my-app 是自己要新建项目的目录名称
  yarn create react-app my-app
  # OR
  npm install create-react-app my-app
  
  # 安装完成之后，进入 my-app 目录
  cd my-app
  
  # 启动 项目
  yarn start
  # OR
  npm start
  

3. Electron + React 项目实战

• 步骤 2 中 初始化 完成的项目目录

    - my-demo
      -- node_modules
      -- public
      -- src
      -- packager.json
      -- 等其他文件
  

• 在初始化好的react项目中引入electron

  # 安装 electron
  yarn add electron --dev
  # OR
  npm install electron --dev
  

• 在 public 文件夹下， 新增 electron.js 和 preload.js

    # electron.js electron启动的入口文件
    // 引入模块
    const url = require('url');
    const path = require('path');
    const { app, BrowserWindow } = require('electron');
  
    // 开发环境
    const isDev = process.env.NODE_ENV === 'development';
  
    // 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
    // 垃圾回收的时候，window对象将会自动的关闭
    let win = null;
  
    function createWindow() {
      // 创建浏览器窗口。
      win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          // 使用 preload 预加载模块, 可以把 nodeIntegration 禁用掉, 在 preload 阶段是可以访问 node 的,
          // 这样做是因为即使启用了 node, webpack 在进行打包的时候也不会识别 node 模块和 electron 模块,
          // nodeIntegration: true,
          // 使用 proload 预加载注入的模块, 参看下方的 preload.js 文件
          preload: path.join(__dirname, './preload.js'),
        },
      });
  
      // 删除菜单
      // win.removeMenu();
  
      // 加载index.html文件
      win.loadURL(isDev ? 'http://localhost:3000' : url.format({
        protocol: 'file',
        slashes: true,
        pathname: path.join(__dirname, 'index.html'),
      }));
  
      // 打开开发者工具
      isDev && win.webContents.openDevTools();
  
      // 当 window 被关闭，这个事件会被触发。
      win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null;
      });
    }
  
    // Electron 会在初始化后并准备
    // 创建浏览器窗口时，调用这个函数。
    // 部分 API 在 ready 事件触发后才能使用。
    app.on('ready', createWindow);
  
    // 当全部窗口关闭时退出。
    app.on('window-all-closed', () => {
      // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
      // 否则绝大部分应用及其菜单栏会保持激活。
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
  
    app.on('activate', () => {
      // 在macOS上，当单击dock图标并且没有其他窗口打开时，
      // 通常在应用程序中重新创建一个窗口。
      if (win === null) {
        createWindow();
      }
    });
  
    // 在这个文件中，你可以续写应用剩下主进程代码。
    // 也可以拆分成几个文件，然后用 require 导入。
  

    // 这里是预加载文件, 即使不开启 nodeIntegration 也可以使用 node 模块,
    // 我们将需要的模块, 添加到 window 上, 然后再页面中可以从 window 对象上取到需要的模块.
    window.electron = require('electron');
    window.fs = require('fs');
    window.express = require('express');
    // https://www.dotcoo.com/create-react-app-electron-electron-builder
  

  • 修改 packager.json 文件

      # 要为 项目 添加 *author*， *description* 等必要的属性，否则 electron 打包时候 会报错
      # 修改后的 （已包含了打包的指令） package.json 如下
      {
        "name": "my-demo",
        "version": "0.1.0",
        "private": true,
        "author": {
          "name": "York Lau",
          "email": "[email protected]"
        },
        "description": "a electron react app",
        "main": "public/electron.js",
        "dependencies": {
          "@testing-library/jest-dom": "^5.11.4",
          "@testing-library/react": "^11.1.0",
          "@testing-library/user-event": "^12.1.10",
          "react": "^17.0.2",
          "react-dom": "^17.0.2",
          "react-scripts": "4.0.3",
          "web-vitals": "^1.0.1"
        },
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test",
          "eject": "react-scripts eject",
          "electron": "cross-env NODE_ENV=development electron .",
          "pack": "cross-env NODE_ENV=production yarn run build && electron-builder --dir",
          "dist": "cross-env NODE_ENV=production yarn run build && electron-builder"
        },
        "homepage": ".",
        "eslintConfig": {
          "extends": [
            "react-app",
            "react-app/jest"
          ]
        },
        "browserslist": {
          "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
          ],
          "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
          ]
        },
        "devDependencies": {
          "cross-env": "^7.0.3",
          "electron": "^12.0.7",
          "electron-builder": "^22.11.1"
        }
      }
    

  • 启动

    yarn electron
    # OR
    npm run electron
  

  • 打包 使用 electron-builder 进行打包成 exe 文件

  # 安装 依赖
  yarn add --dev electron-builder cross-env
  # 安装 完成 之后 参考上面的 packager.json 文件的配置
  # 打包命令
  yarn dist
  # 正常生成 exe 安装包