记一次 Electron 开发全过程

引子

Electron

项目搭建

起步

脚手架

1. electron-forge

2. electron-builder

3. electron-react-boilerplate

electron-builder

vue-cli-plugin-electron-builder 插件配置

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: "com.example.app",
        productName: "test-app",
        directories: {
          buildResources: "./build",
          output: "./dist",
        },
        win: {
          //win相关配置
          icon: "./build/icon.png", //图标，当前图标在根目录下，注意这里有两个坑
          target: [
            {
              target: "nsis", //利用nsis制作安装程序,
              arch: [
                "x64", //64位
                "ia32", //32位
              ],
            },
          ],
        },
        nsis: {
          allowToChangeInstallationDirectory: true,
          oneClick: false,
        },
      },
    },
  },
};

项目结构

1. build 文件夹 存放  打包需要的文件，例如 icon 等

2. public 文件夹
• 静态文件夹
• 包含渲染进程 favcon.ico,index.html 等静态文件

3. src 文件夹
• 项目代码
• assets: 渲染进程静态文件夹
• biz: 主进程业务代码
• components: Vue.js 组件
• plugins: Vue.js 插件
• router: Vue-router
• store: Vuex
• views: Vue.js 主视图
• background.js: 主进程入口
• main.js 渲染进程入口

4. vue.config.js
• vue-cli3 的配置文件

主进程与渲染进程通讯

概念描述

1. API
• 应用程序接口。
• 这里的 API 是给调用方使用的，也就是渲染进程。

2. Payload Type
• 荷载类型。
• 定义业务类型（事件类型），其实也就是潜在的定义了业务入参和负责业务的具体描述。

3. Routes
• 路由。
• 分发绑定业务句柄和业务类型。

4. Services
• 服务。
• 纯净的业务处理，会涉及业务数据处理，db 操作等。

路由与业务绑定

const PAYLOAD_TYPES = Object.freeze({
  FETCH_FULL_DATA: "FETCH_FULL_DATA",
  FETCH_DROPDOWN_LIST: "FETCH_DROPDOWN_LIST",
  UPDATE_CELL: "UPDATE_CELL",
  SORT_SHEET: "SORT_SHEET",
  VALIDATE_SHEET: "VALIDATE_SHEET",
  CALCULATE_SHEET: "CALCULATE_SHEET",
  FETCH_INITIAL_DATA: "FETCH_INITIAL_DATA",
  DELETE_ROW: "DELETE_ROW",
});

import { PAYLOAD_TYPES } from './constants'
import * as service from '../service'

export default {
  [PAYLOAD_TYPES.FETCH_FULL_DATA]: function (payload, callback) {
    callback(service.fetchFullData(payload))
  },
  [PAYLOAD_TYPES.FETCH_DROPDOWN_LIST]: function (payload, callback) {
    callback(service.fetchDropdownList(payload))
  },
  [PAYLOAD_TYPES.UPDATE_CELL]: function (payload, callback) {
    callback(service.updateCell(payload))
  }

const establishConnection = () => {
  Object.keys(routes).forEach((routeName) => {
    ipcMain.on(routeName, (e, payload) => {
      routes[routeName](payload, (respond) => {
        e.sender.send(routeName, respond);
      });
    });
  });
};

import { ipcRenderer } from "electron";
import { PAYLOAD_TYPES } from "../channel/constants";
export default function fetchFullData(sheetName) {
  return new Promise((resolve, reject) => {
    // 定义请求参数
    const payload = {
      sheetName,
    };

    // 发送请求
    ipcRenderer.send(PAYLOAD_TYPES.FETCH_FULL_DATA, payload);

    // 接受响应给callback
    ipcRenderer.once(PAYLOAD_TYPES.FETCH_FULL_DATA, (e, res) => {
      resolve(res);
    });
  });
}

数据存储

数据持久化

const filePath = path.join(app.getPath("userData"), "/data.json");

lowdb

初始化

const low = require("lowdb");
const FileSync = require("lowdb/adapters/FileSync");

const filePath = path.join(app.getPath("userData"), "/data.json");
const adapter = new FileSync(filePath);
const db = low(adapter);

db 操作-增删改查

db.get("posts").push({ title: "example" }).write();

db.get("posts").remove({ title: "example" }).write();

db.get("posts").find({ title: "example" }).assign({ title: "hi!" }).write();

db.get("posts").value();

渲染进程

打包

总结