electron踩坑记

组上之前做了一款web端的IOS和Android的打包工具，通过上传签名文件和安装包打包在线生成安装包并保存到本地。由于浏览器安全原因，客户端不能直接读取并打开本地文件夹路径，所以导致用户不知道打包后的安装文件保存在哪个路径下面。以老大的知识量，第一时间就想到了electron打包生成本地安装文件。以“钉钉”为例，钉钉就是一个典型的js本地化实践，几乎能够完成所有需要的工作。

以下为具体实践

1. electron工程目录结构

在app文件夹下包含三个文件：main.js、package.json、index.html
package.json为项目的配置文件，指定项目的入口文件等一些信息。
main.js为项目的入口文件，主要负责创建BrowserWindow窗口、启动其他配置文件和在窗口关闭之后清理进程释放资源的工作。
index.html为显示的界面，在里面完成一些客户端的功能。

2. electron的安装

由于资源被墙的原因，用npm install --g electron-prebuilt的速度很慢，庆幸有淘宝镜像提供的cnpm命令。

3. hello world

首先配置package.json：

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "hello word",
  "main": "app/main.js",
  "dependencies": {
    "electron-prebuilt": "^1.4.0"
  },
  "devDependencies": {
    "electron-prebuilt": "^1.4.0"
  },
  "scripts": {
    "start": "electron ."
  },
  "author": "regdai",
  "license": "ISC"
}  

其次配置main.js

const electron = require('electron');
// 控制应用生命周期的模块
const app = electron.app;
// 创建本地浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;

// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;

function createWindow() {
  // 创建一个新的浏览器窗口
  win = new BrowserWindow({width: 1920, height: 1080});

  // 并且装载应用的index.html页面,__dirname为当前文件路径
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, "index.html"),
    protocol: 'file:',
    slashes: true
}));

  // 打开开发工具页面
//   win.webContents.openDevTools();

  // 当窗口关闭时调用的方法
  win.on('closed', function() {
    // 解除窗口对象的引用，通常而言如果应用支持多个窗口的话，你会在一个数组里
    // 存放窗口对象，在窗口关闭的时候应当删除相应的元素。
    win = null;
  });
}

// 当Electron完成初始化并且已经创建了浏览器窗口，则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);

// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', function() {
  // 对于OS X系统，应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', function() {
  // 对于OS X系统，当dock图标被点击后会重新创建一个app窗口，并且不会有其他
  // 窗口打开
  if (win === null) {
    createWindow();
  }
});

index.html内容

     
    


    
Hello World

启动electron
在根目录下运行命令：electron .

4.项目打包

1. 安装 electron-packager：命令：npm install --save-dev electron-packager

Paste_Image.png

安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-package的版本号配置信息

2.正式打包

有两种方法：
1、直接使用命令打包，electron-packager的打包基本命令是：

electron-packager

命令说明：

• location of project：项目所在路径
• name of project：打包的项目名字
• platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
• architecture：决定了使用 x86 还是 x64 还是两个架构都用
• electron version：electron 的版本
• optional options：可选选项

命令比较长，每次要是都用这个命令来打包会很烦，可以使用第二种方法；

2、首先在项目根目录下面的 package.json 里添加代码，
"packager": "electron-packager ./app HelloWorld --all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

PS：这里要注意，字段里的 项目名字，version，icon路径要改成自己的；

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "web-content",
  "main": "main.js",
  "dependencies": {
    "electron-prebuilt": "^1.4.0"
  },
  "devDependencies": {
    "electron-packager": "^8.5.0",
    "electron-prebuilt": "^1.4.13",
    "gulp": "^3.9.1"
  },
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./app web-content --out ./OutApp --version 1.4.13 --overwrite --icon=./app/img/icon/icon.ico"
  },
  "license": "ISC"
}  

然后，使用命令 npm run-script packager进行打包

Paste_Image.png

直接运行文件夹下面的.exe就可以打开文件了。

---

以上是hello world生成，真正用到已有的项目中却出现了新的坑

1. jquery引用

在项目中已经引入了jquery.js，控制台却报cannot find the jquery.js，解决方法：在index.html中引入jquery改写成:

原因分析：因为nwjs/electron环境里有module jquery的loader认为是通过commonjs挂载的 所以他不会自动挂到全局 所以官方推荐自己来

2. 文件突然不能正常运行

原本好好地项目，一分钟之前还在完整的运行，没有改动任何一行代码，突然就无法运行，花了四个多小时找原因，结果还是没有找出来，只好把自己的项目拷贝到其他电脑上面运行，发现其他项目能够顺利运行可是在自己电脑上面不能运行，于是把电脑重启之后，项目又可以运行。
原因分析：可能是操作系统中的资源出现了冲突，另外一个进程在使用某个资源，可是现在这个进程也要使用这项资源，所以导致的操作系统中的“堵塞？？？”。

3. nodejs的require不能在angularjs项目中运行

解决方法：在index.html的头部加上

原因分析： angualrjs内部有require指令，所以产生了命名冲突。

4. 修改服务器的toml配置文件

Paste_Image.png

资源路径是相对于exe文件而言的，还没有打包之前，自己能够顺利的运行整个项目，可是打包之后一直提示

Paste_Image.png

ENOENT: No such file or directory。提示找不到该文件，自己却一直以为是因为打包之后的 asar包不能正常阅读所以耗费了大量时间，最后通过修改 toml的路径参数解决问题。

5. nodejs打开路径

最初require不能在angularjs中正常运行，所以把所有参数在main.js中设置成全局变量，严重污染了全局空间，由于问题的解决，所以就在angularjs的controller里面顺理成章的使用require等API。

$scope.openTaskmgr = function () {
    //shell打开资源管理器
    var electronShell = __require("electron").shell;
    //path指定目录
    var electronPath = __require('path');
    var apkPath = electronPath.resolve(__dirname, '../../../../tmp/dist');
    electronShell.openExternal(apkPath);
};

在这个项目里面，由于时间的关系，直接把需要打开的目录写死了，这种处理方法不是特别的好，最好的方法是去读取toml配置文件里面的路径，然后再打开相关链接。

6. 服务器日志输出

把项目打包之后读服务器日志就会成为一项比较难办的事情，所以在前端必须通过某个按钮打印出当前的服务器日志，这里运用到了nodejs的文件系统。

main.js里面打开服务器

var p = childProcess.spawn("resources/app/packerd.exe", ["--conf", "resources/app/packerd.toml"]);

获取服务器的标准输出和标准错误输出，并在标准输出中创建日志文件和写入相关日志，同时在标准错误输出中写入服务器错误日志

p.stdout.on('data', function (d) {
    //创建文件
    fs.open('resources/app/log.txt', 'w+', function(err, fd) {
        if (err) {
            return console.error(err);
        }
    });

    //写入服务器日志
    fs.appendFile('resources/app/log.txt', d.toString(),  function(err) {
        if (err) {
            return console.error(err);
        }
    });
});

p.stderr.on('data', function (data) {
    //写入服务器错误日志
    fs.appendFile('resources/app/log.txt', d.toString(),  function(err) {
        if (err) {
            return console.error(err);
        }
    });
});

当exe关闭时删除服务器日志

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        fs.unlink("resources/app/log.txt",function(err){
            if(err){
                console.log(err);
            }
        });
        app.quit();
    }
});

完成项目之后仔细想了想，为什么要创建txt文件而不能在div中输出相关内容，因为是给用户用的，我们不知道用户默认的打开txt的是什么软件，万一是一个非常非常慢的呢？在mac下又是什么呢？所以这样的用户体验性不是特别的好。同时在退出exe之后，自己究竟把资源清理干净了吗？这也是一个值得思考的问题。

参考

1. electron文档
2. electron开发入门