Electron折腾笔记

DataPipeline 发布于2019-08-22 10:37 / 3134人阅读

摘要：读取文件路径写入配置文件调用服务调用服务部分，主要用到的子进程。最后，上一张初步完成之后的运行图博客原文

背景

部门的项目每次开发都需要手动开启三个服务：server、webpack、grunt，每个服务都要输入一些东西（端口号，项目命，项目类型，启动器名）。而且，在推送调试的时候，这三项服务非常容易被终止掉，然后又得一个个开起来，总之每天都要来上那么10几遍吧。看图：

思考

如果可以一键启动三个服务，又可以免去手动输入参数岂不又多了点偷懒的时间？

功能

一键启动、关闭项目开发过程中需要开启的三项服务

自动解析出服务运行所需的三个不同目录，免去一个个手动输入的麻烦

可以保存配置，下次免配置

开工

因为想做成小软件的形式，所以选用了Electron。以下是一些主要的思路和功能代码记录。

工具窗口

工具窗口部分，基本上用官网guide里的代码就足够了

const electron = require("electron");
const {app, BrowserWindow, shell, ipcMain} = electron;
let win;
function createWdindow() {
    win = new BrowserWindow({ width: 400, height: 680,resizable:true,title: "prensterTool",})
    win.loadURL(`file://${__dirname}/index.html`)
    win.on("close", () => {       
        win = null;
    });
}
app.on("ready", createWdindow);
// 当全部窗口关闭时退出
app.on("window-all-closed", () => {    
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== "darwin") {
        app.quit();
    }
});
app.on("activate", () => {
    // 在 macOS 上，当点击 dock 图标并且该应用没有打开的窗口时，
    // 绝大部分应用会重新创建一个窗口。
    if (mainWindow === null) {
        createWindow();
    }
});

自定义菜单

const remote = require("electron").remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

var template = [
  {
    label: "配置",
    submenu: [
      { label: "重新配置", accelerator: "CmdOrCtrl+shift+alt+r", click: function () { reset(); } },
      { label: "保存配置", accelerator: "CmdOrCtrl+shift+alt+s", click: function () { saveSetting(); } }
    ]
  }
  // ……
];
var menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);

保存配置信息

在工作目录拖拽小工具上时，读取文件目录，本写入配置文件，供后面的功能使用。
读取文件路径：

var file = e.dataTransfer.files[0];
presenterPath = file.path;
showInfo(presenterPath);

写入配置文件

 var data = `module.exports =` {projectName:"${projectName}",presenterId:"${presenterId}"}`;
  fs.writeFile("./resources/app/project_config.js", data, function (err) {
    if (err) {
      showInfo(err.toString());
      return;
    }

调用服务

调用服务部分，主要用到nodejs的子进程exec。

functon startServices(){
// webpack  
var processWebpack = childProcess.exec("webpack --watch", { "cwd": `${__path}/presenters/SubjectToolSolution/${presenterId}/src` });
showLog("Webpack", processWebpack);
pids.push(processWebpack.pid);
// server
var processServices = childProcess.exec("node services", { "cwd": __path });
showLog("Server", processServices);
pids.push(processServices.pid);
// grunt
var processGrunt = childProcess.exec("node gruntTask", { "cwd": __dirname });
showLog("Grunt", processGrunt);
pids.push(processGrunt.pid);
}

踩坑

Electron关闭的时候不会关闭node的子进程，所以，要手动关闭。
开始做的时候，服务总是偶尔开启成功，后面就不行了，很是诡异，查了一下午都无果，直到我无意中开了任务管理器，看到那一堆的node服务...

思路：开启服务的时候把子进程的pid存起来，待后面kill.

var platform = process.platform;
function killTask() {
  try {
    if (platform === "win32") {
      for (let pid of pids) {
        childProcess.exec("taskkill /pid " + pid + " /T /F");
      }
      pids = [];
    } else {
      for (let pid of pids) {
        process.kill(processServices.pid);
      }
      pids = [];
    }
  } catch (e) {
    showInfo("pid not found");
  }
  domLog.innerHTML = "";
  showInfo("服务已停止!");
  clearInterval(timerId);
}

Electron打包完之后，代码里的path变了，要手动处理下，不知道是不是姿势不对？

ELectron打包

关于打包的问题，官网的文档看的我真是一脸懵逼，知乎专栏的这篇文章不错，可以参考下https://zhuanlan.zhihu.com/p/...

步骤

安装electron-packager：

 ```npm install --save-dev electron-packager```

package.json里添加打包命令：

 "scripts": {
 "start": "electron .",
 "package": "electron-packager ./ app --win --out presenterTool --arch=x64 --version 1.3.4 --overwrite --ignore=node_modules" 
  }

执行：
npm run-script package

参数

electron-packager

location of project:应用目录;

name of project:应用名称;
platform:要打包的平台;
architecture: x86 or x64架构;
electron version:electron 版本(不是应用版本);
optional options:其它选项;

第一次打包会下载相应的包，时间比较久

记得打包参数里写上overwrite，不然后面打包时不会重新构建。

最后，上一张初步完成之后的运行图：

[博客原文] http://yohnz.github.io/2016/0...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90961.html

Electron 前端提测小工具

摘要：场景目前公司的测试环境还是由开发来搭建和部署的。没网，我就做个离线版的工具呗。调研选型技术目前我了解到使用前端技术做桌面应用有和以及着三种神器。好了，多说无用，来预览一下我们的小工具吧默认，就是最新的要提测的包。更新于年月日已入手。场景目前公司的测试环境还是由开发来搭建和部署的。这种做法是极其不科学的。所以那种部署啊什么的重复性的操作还是做个工具让测试自己去部署好了。先来预览一下工...

Riddler 2019-08-21 18:44 评论0 收藏0
Windows 下的 electron 开发笔记一

前言根据公司业务需求，使用 electron 开发桌面 BrowserWindow 应用。参考 API：Electron 文档安装与配置安装工具 node（LTS版）git 命令行工具搭建项目初始化： $ npm init 安装 electron： $ npm install electron --save-dev 软件打包安装打包工具： $ npm install --save...

Michael_Ding 2019-08-23 14:20 评论0 收藏0
GitNote 基于 Git 的跨平台笔记软件正式发布

摘要：基于的跨平台笔记软件为什么自从工作之后我开始进行笔记记录这是一个很棒的习惯我曾经使用过麦库等都是一些不错的笔记软件但是都有一些各式各样的问题不能满足我的使用年我用编写了第一款笔记软件支持和富文本编辑器但是没有云同步功能年我用和编写了一个编辑 GitNote 基于 Git 的跨平台笔记软件为什么自从工作之后,我开始进行笔记记录,这是一个很棒的习惯.我曾经使用过 EDiary Ever...

liaosilzu2007 2019-08-23 15:05 评论0 收藏0
一个程序员的正版清单

摘要：有部分前端人员使用的是盗版的。非编程相关其它一些我使用的，但与编程关系不大的正版工具。尊重别人，更是尊重自己做为一个程序员，使用正版，我认为这不是自做清高的事情，这是对自己职业的一种基本尊重。 ...

wudengzan 2021-09-24 09:48 评论0 收藏0
从用 AngularJS 开发 PC 客户端说起

摘要：你们说能不能就用的开发模式来实现客户端啊这样版版版就都有了。有道云笔记可能就是最贴近我们想法的产品，有客户端，有版。这个项目由发起和维护。最近一个多月一直在用 AngularJS 做公司的一个项目（还没有做完），我之前主要是用 PHP 开发服务端的，AngularJS 也是现学现卖，整个过程还是比较有意义的，觉得很有必要写篇文章记录一下。缘起事情是这样的……我们团队的产品是一款 ...

waltr 2019-08-19 17:15 评论0 收藏0