程序员就得会偷懒，重写了一个electron小工具，解放美女运营！

原创

一起重学前端

修改于 2024-12-08 14:17:39

1130

“好事”文章推荐：《Kotlin开发框架建议入门实践》

文章地址：https://cloud.tencent.com/developer/article/2474320

好文介绍：Kotlin开发框架以其高效、简洁和跨平台的特点，为移动应用开发带来了革命性的变革。通过与Jetpack组件的完美结合、MVVM架构的实现以及网络请求和跨平台开发的应用，Kotlin不仅提高了开发效率和质量，还降低了维护成本和复杂性。

前言

接前一篇美女运营天天找我改配置，给她写了个脚本，终于安静了

之前只是写了一个脚本，本地运行，通过读取文件流获取文件数据，格式化对应数据，运营老师也不会安装node，还是需要我去操作。现在我用electron生成一个桌面应用直接生成后复制json，去配置，全程不需要我参与了。

之前的脚本

const fs = require('fs')
const csv = require('csv-parser');

const csvfilePath = './xxx.csv';
const uidsfilePath = './uids.json';

const results = [];
let newarr = [];
let lineCount = 0;

fs.createReadStream(csvfilePath)
	.pipe(csv({ headers: true }))
	.on('data', (data) => {
		results.push(data);
		lineCount++;
	})
	.on('end',async () => {
		console.log(results[0])
		await format(results);
		fs.writeFile(uidsfilePath, JSON.stringify(newarr), () => {
			console.log('done')
		})
	});
const format = (results) => {
	newarr = results.map(item => {
		if(item._0 === 'key' || item._1 === 'value') {
			return {}
		}
		return {
			label: `${item._1}-${item._0}`,
			value: item._1
		}
	})
}

electron

简介

Electron 是一个用于使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发，基于 Chromium 和 Node.js。这意味着开发者可以利用他们熟悉的 Web 开发技术来创建桌面应用。

优势

跨平台开发
快速开发迭代
丰富的生态系统

架构与核心概念

主进程和渲染进程：

主进程：主进程是整个 Electron 应用的核心，它负责创建和管理应用程序的窗口。主进程通过BrowserWindow模块来创建浏览器窗口，这个窗口就是用户看到的应用界面的载体。

渲染进程：渲染进程主要负责渲染应用的用户界面。每个BrowserWindow都有自己独立的渲染进程，它使用 Chromium 浏览器内核来解析 HTML 和 CSS 文件，执行 JavaScript 代码。

进程间通信（IPC）：由于 Electron 应用有主进程和渲染进程之分，进程间通信就显得尤为重要。Electron 提供了ipcMain（用于主进程）和ipcRenderer（用于渲染进程）模块来实现进程间的消息传递。

使用vue3和vite创建vue的项目然后引入electron

安装vite

npm create vite@latest electron-desktop-tool

安装引入electron&插件

npm install -D electron // electron
npm install -D electron-builder //用于打包可安装exe程序和绿色版免安装exe程序
npm install -D electron-devtools-installer // 调试
npm install -D vite-plugin-electron // vite构建插件

创建主进程

在vue 同级src目录下，创建src-electron 文件夹新建main.js

// src-electron/main.js
const { app, BrowserWindow } = require('electron')
const { join } = require('path')

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

// 创建浏览器窗口时，调用这个函数。
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'electron-vite',
        // icon: join(__dirname, '../public/logo.ico'),
    })

    // win.loadURL('http://localhost:3000')
    // development模式
    if(process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
        // 开启调试台
        win.webContents.openDevTools()
    }else {
        win.loadFile(join(__dirname, '../dist/index.html'))
    }
}

// Electron 会在初始化后并准备
app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

配置插件入口

在vite.config.ts中配置vite-plugin-electron 插件入口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            // 主进程入口文件
            entry: './src-electron/main.js'
        })
    ],
    /*开发服务器选项*/
    server: {
        // 端口
        port: 3000,
    }
})

配置package.json

在package.json 新增入口文件 "main": "./src-electron/main.js",

原神启动 emmm electron启动

运行 npm run dev 启动项目

打包配置

首先配置一下打包的命令,在package.json "scripts"里面配置这个打包命令

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "postinstall": "patch-package",
    "electron:build": "vite build && electron-builder",
    "pack32": "vite build && electron-builder --win --ia32",
    "pack64": "vite build && electron-builder --win --x64"
  },

同样package.json 需要添加打包配置

  "scripts": {
      ...
  },
  "build": {
    "productName": "ElectronDeskTopTool",
    "appId": "dyy.dongyuanwai",
    "copyright": "dyy.dongyuanwai © 2024",
    "compression": "maximum",
    "asar": true,
    "directories": {
      "output": "release/"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "perMachine": true,
      "deleteAppDataOnUninstall": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "ElectronDeskTopTool"
    },
    "win": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "mac": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    },
    "linux": {
      "icon": "./public/logo.ico",
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}"
    }
  },

然后npm run electron:build

win 打包 build配置

"build": {  
    "productName":"ElectronDeskTopTool",//项目名 这也是生成的exe文件的前缀名，也可以在每个环境中自行配置
    "appId": "com.dyy.dongyuanwai",//应用程序的唯一标识符，通常是反转的域名格式 
    "copyright":"dyy.dongyuanwai © 2024",//版权信息，显示在应用程序中说明版权归属的地方
    "compression": "maximum", //压缩级别，指定打包时使用的压缩级别。这里设置为"maximum"表示最大压缩
    "asar": true, // 是否启用 asar 打包，asar 是 Electron 提供的一种文件打包方式，能够提高应用程序的性能和安全性。
    "directories": { //指定输出目录，打包完成后的文件会放置在该目录下。
      "output": "release"
    }, 
    // windows相关的配置
    "win": {  
      "icon": "xxx/icon.ico", //图标路径 
      "artifactName": "${productName}-v${version}-${platform}-setup.${ext}" // 安装包名称
    }，
     // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
      "arch": [
          "x64",
          "ia32"
        ]
  }