electron桌面应用构建指南

开发环境 and 正式环境 预览命令配置

安装依赖

yarn add cross-env --dev

yarn add concurrently --dev

yarn add wait-on --dev

修改 public/electron.js 新增环境判断

// electron 主进程
const { app, BrowserWindow } = require('electron');

const isPro = process.env.NODE_ENV === "development" ? false : true;

// window对象的全局引用
let mainWindow;
function createWindow() {

  mainWindow = new BrowserWindow({ width: 800, height: 600 })

  if (isPro) {
    mainWindow.loadFile(`${__dirname}/index.html`);
  } else {
    mainWindow.loadURL('http://localhost:3000/');
    // 打开开发者工具，默认不打开
    mainWindow.webContents.openDevTools()
  }

  // 关闭window时触发下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  });
}

app.on('ready', createWindow);

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow()
  }
});

修改 or 添加package.json

{
    "scripts": {
        "electron-start": "yarn build && cross-env NODE_ENV=production electron build/electron.js",
        "electron-dev": "concurrently 'BROWSER=none yarn start' 'wait-on http://localhost:3000 && cross-env NODE_ENV=development electron public/electron.js'",
     },
}

执行命令

<!--开发环境预览-->
yarn electron-dev

<!--生产环境预览-->
yarn electron-start

补充

运行 electron-start的时候 会路由不到首页 究其原因好像是react的路由问题，修改路由配置为hash即可解决

<!--App.js-->
import React from 'react';
import { Router, Route, NavLink } from 'react-router-dom';
import { createHashHistory } from 'history';
import './App.css';

import Home from './pages/home';
import About from './pages/about';
const customHistory = createHashHistory();
// 入口app
const App = () => {
  return (
    <Router history={customHistory}>
      <header className="header">
        <NavLink to="/">首页</NavLink>
        <NavLink to="/about">关于我们</NavLink>
      </header>
      <div className="App">
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};

export default App;

自动更新

自动更新功能可以用electron-updater来实现 安装依赖

yarn add electron-updater

<!--可以优化打印日志-->
yarn add electron-log

修改package.json 添加publish属性，用于更新

{
    "build": {
    "productName": "my-project",
    "appId": "org.my-project.electron-react-antd",
    "directories": {
      "output": "dist"
    },
    "files": [
      "build/**/*"
    ],
    "publish": [
      {
        "provider": "generic",
        "url": "http://katte-saas.oss-cn-beijing.aliyuncs.com/download/"
      }
    ]
  }
}

添加preload.js如下

// preload.js
const { ipcRenderer } = require('electron');

ipcRenderer.on('message', (event, text) => {
  console.log(text);
});

window.ipcRenderer = ipcRenderer;

window.ipcRenderer.removeEvents = events => {
  try {
    if (events && events.length > 0) {
      events.forEach(event => ipcRenderer.removeAllListeners(event));
    } else {
      ipcRenderer.removeAllListeners(events);
    }
  } catch (error) {
    console.error(error);
  }
};

修改electron.js文件如下 主要添加了对更新的处理

const { app, BrowserWindow, ipcMain } = require('electron');
const { autoUpdater } = require('electron-updater');
const isPro = process.env.NODE_ENV === "development" ? false : true;


// 更新处理
const updateHandle = () => {
  const log = require('electron-log');
  const uploadUrl = 'http://kcsj-web-cdn.oss-cn-beijing.aliyuncs.com/katte-saas/download/';
  const message = {
    error: '检查更新出错',
    checking: '正在检查是否存在更新……',
    updateAva: '检测到新版本',
    updateNotAva: '当前为最新版本，不需更新',
  };

  autoUpdater.logger = log;
  autoUpdater.logger.transports.file.level = 'info';

  autoUpdater.autoDownload = false;

  autoUpdater.setFeedURL(uploadUrl);
  autoUpdater.on('error', function (error) {
    console.log('更新出错！', error);
  });
  autoUpdater.on('checking-for-update', function () {
    sendEvent('message', message.checking);
  });

  // 有最新版本
  autoUpdater.on('update-available', function (info) {
    const { version, releaseDate } = info;
    sendEvent('version-has-changed', version);
  });

  // 没有最新版本
  autoUpdater.on('update-not-available', function (info) {
    const { version, releaseDate } = info;
    sendEvent('version-never-change');
  });

  // 更新下载进度事件
  autoUpdater.on('download-progress', function (progressObj) {
    mainWindow.webContents.send('downloadProgress', progressObj);
  });

  autoUpdater.on('update-downloaded', function (
    event,
    releaseNotes,
    releaseName,
    releaseDate,
    updateUrl,
    quitAndUpdate
  ) {
    ipcMain.on('installForUpdate', (e, arg) => {
      autoUpdater.quitAndInstall();
    });

    mainWindow.webContents.send('downloaded');
  });

  // 检查更新
  ipcMain.on('checkForUpdate', () => {
    //执行自动更新检查
    autoUpdater.checkForUpdates();
  });

  // 下载更新
  ipcMain.on('downloadForUpdate', () => {
    // 执行更新下载
    autoUpdater.downloadUpdate();
  });
};

// 发送事件
const sendEvent = (event, content) => {
  mainWindow.webContents.send(event, content);
};

// window对象的全局引用
let mainWindow
// 处理更新操作
updateHandle();

function createWindow() {

  mainWindow = new BrowserWindow({ width: 800, height: 600 })

  if (isPro) {
    mainWindow.loadFile(`${__dirname}/index.html`);
  } else {
    mainWindow.loadURL('http://localhost:3000/');
    // 打开开发者工具，默认不打开
    mainWindow.webContents.openDevTools()
  }

  // 关闭window时触发下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow);

// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {

  if (mainWindow === null) {
    createWindow()
  }
})

home添加响应事件 用于检查更新下载等操作

import React, { useEffect } from 'react';
import styles from './index.module.scss';
import { Button, message, notification } from 'antd';

const { ipcRenderer } = window;
export default () => {
  useEffect(() => {
    // 版本变更
    ipcRenderer.on('version-has-changed', (event, remoteVersion) => {
      notification.warn({
        message: '版本检测',
        description: `当前最新版本：${remoteVersion}`,
        duration: 3,
      });
    });

    // 版本未变更
    ipcRenderer.on('version-never-change', event => {
      notification.success({
        message: '版本检测完成',
        description: '已是最新版本',
        duration: 1.5,
      });
    });

    // 下载更新进度
    ipcRenderer.on('downloadProgress', (event, progress) => {
      console.log(progress);
    });

    // 下载更新完成
    ipcRenderer.on('downloaded', () => {
      notification.success({
        message: '下载完成',
        duration: 3,
      });
    });
    return () => {
      // 移除监听事件 preload.js
      ipcRenderer.removeEvents([
        'version-has-changed',
        'version-never-change',
        'downloaded',
        'downloadProgress'
      ]);
    };
  });

  const down = () => {
    // 下载版本
    ipcRenderer.send('downloadForUpdate');
  }

  // 检测版本
  const check = () => {
    ipcRenderer.send('checkForUpdate');
  }

  return <div className={styles.main}>
    Home
    <Button onClick={() => message.warn('消息内容')}>按钮</Button>
    <Button onClick={() => check()}>检查更新</Button>
    <Button onClick={() => down()}>下载更新</Button>
  </div>;
};

更新服务器 (以mac为例)

首先mac要配置代码签名才能更新； 对于更新服务器，需要将打包出来的 latest-mac.yml,.zip,.dmg三个文件上传 配置更新地址(electron.js中的uploadUrl)为服务器根目录地址(通过http协议可请求的地址)

总结

1. 项目可以启动本地开发环境,本地打包环境
2. 每次产品更新要传到服务器上，客户端的产品版本如果低于服务器上的就会提示，当下载更新时可以获取到下载的进度；
3. 下载更新等操作只有打包后的产品可以正常使用(开发环境下好像也有解决方案，不过我没有找到)；
4. 一个桌面程序的基本功能就这么多了，大家可以愉快的编写业务代码了；

本文由哈喽比特于4年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/-E_zc7dJuIfJwhsOIAq-eg