Electron折騰筆記

DataPipeline 發(fā)布于2019-08-22 10:37 / 3151人閱讀

摘要：讀取文件路徑寫入配置文件調(diào)用服務調(diào)用服務部分，主要用到的子進程。最后，上一張初步完成之后的運行圖博客原文

背景

部門的項目每次開發(fā)都需要手動開啟三個服務：server、webpack、grunt，每個服務都要輸入一些東西（端口號，項目命，項目類型，啟動器名）。而且，在推送調(diào)試的時候，這三項服務非常容易被終止掉，然后又得一個個開起來，總之每天都要來上那么10幾遍吧。看圖：

思考

如果可以一鍵啟動三個服務，又可以免去手動輸入?yún)?shù)豈不又多了點偷懶的時間？

功能

一鍵啟動、關閉項目開發(fā)過程中需要開啟的三項服務

自動解析出服務運行所需的三個不同目錄，免去一個個手動輸入的麻煩

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

開工

因為想做成小軟件的形式，所以選用了Electron。以下是一些主要的思路和功能代碼記錄。

工具窗口

工具窗口部分，基本上用官網(wǎng)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 圖標并且該應用沒有打開的窗口時，
    // 絕大部分應用會重新創(chuàng)建一個窗口。
    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;
    }

調(diào)用服務

調(diào)用服務部分，主要用到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打包

關于打包的問題，官網(wǎng)的文檔看的我真是一臉懵逼，知乎專欄的這篇文章不錯，可以參考下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" 
  }

執(zhí)行：
npm run-script package

參數(shù)

electron-packager

location of project:應用目錄;

name of project:應用名稱;
platform:要打包的平臺;
architecture: x86 or x64架構(gòu);
electron version:electron 版本(不是應用版本);
optional options:其它選項;
?

第一次打包會下載相應的包，時間比較久

記得打包參數(shù)里寫上overwrite，不然后面打包時不會重新構(gòu)建。

最后，上一張初步完成之后的運行圖：

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

GPU云服務器云服務器 electron 折騰 vps折騰折騰vps

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/90961.html

Electron 前端提測小工具

摘要：場景目前公司的測試環(huán)境還是由開發(fā)來搭建和部署的。沒網(wǎng)，我就做個離線版的工具唄。調(diào)研選型技術(shù)目前我了解到使用前端技術(shù)做桌面應用有和以及著三種神器。好了，多說無用，來預覽一下我們的小工具吧默認，就是最新的要提測的包。更新于年月日已入手。場景目前公司的測試環(huán)境還是由開發(fā)來搭建和部署的。這種做法是極其不科學的。所以那種部署啊什么的重復性的操作還是做個工具讓測試自己去部署好了。先來預覽一下工...

Riddler 2019-08-21 18:44 評論0 收藏0
Windows 下的 electron 開發(fā)筆記一

前言根據(jù)公司業(yè)務需求，使用 electron 開發(fā)桌面 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 的跨平臺筆記軟件正式發(fā)布

摘要：基于的跨平臺筆記軟件為什么自從工作之后我開始進行筆記記錄這是一個很棒的習慣我曾經(jīng)使用過麥庫等都是一些不錯的筆記軟件但是都有一些各式各樣的問題不能滿足我的使用年我用編寫了第一款筆記軟件支持和富文本編輯器但是沒有云同步功能年我用和編寫了一個編輯 GitNote 基于 Git 的跨平臺筆記軟件為什么自從工作之后,我開始進行筆記記錄,這是一個很棒的習慣.我曾經(jīng)使用過 EDiary Ever...

liaosilzu2007 2019-08-23 15:05 評論0 收藏0
一個程序員的正版清單

摘要：有部分前端人員使用的是盜版的。非編程相關其它一些我使用的，但與編程關系不大的正版工具。尊重別人，更是尊重自己做為一個程序員，使用正版，我認為這不是自做清高的事情，這是對自己職業(yè)的一種基本尊重。 ...

wudengzan 2021-09-24 09:48 評論0 收藏0
從用 AngularJS 開發(fā) PC 客戶端說起

摘要：你們說能不能就用的開發(fā)模式來實現(xiàn)客戶端啊這樣版版版就都有了。有道云筆記可能就是最貼近我們想法的產(chǎn)品，有客戶端，有版。這個項目由發(fā)起和維護。最近一個多月一直在用 AngularJS 做公司的一個項目（還沒有做完），我之前主要是用 PHP 開發(fā)服務端的，AngularJS 也是現(xiàn)學現(xiàn)賣，整個過程還是比較有意義的，覺得很有必要寫篇文章記錄一下。緣起事情是這樣的……我們團隊的產(chǎn)品是一款 ...

waltr 2019-08-19 17:15 評論0 收藏0