使用electron构建桌面应用

简介

electron是一个使用HTML、CSS、JavaScript构建跨平台桌面应用的框架。这样的话我们就可以将一个web网页项目打包成桌面应用。

初始化项目

我们可以直接下载github上的electron快速上手项目

git clone https://github.com/electron/electron-quick-start.git

执行包安装

npm install 

这样我们就有了一个electron项目
打包时主要通过项目根目录下的main.js构建桌面应用。可以知道该文件mainWindow.loadFile(‘index.html’)是加载index.html
我们只要将需要打包的单页应用文件放置到该项目的根路径下覆盖index.html即可

打包

在项目中安装相关依赖包

npm install electron-winstaller--save-dev  //打包成windows安装包需要用的

全局安装electron-packager

npm install electron-packager -g  //将网页打包成exe应用

在项目的package.json文件配置一个命令

"scripts": {
    "start": "electron .",
    "build": "electron-packager . bobo --out ../electron --ignore=node_modules"
  }

使用npm run build 构建exe应用。
这样我们就在上一层的electron目录下构建了bobo.exe。点击则可以打开应用。至此已经完成了打包成exe.接下来使用electron-winstaller构建安装包。
在项目根目录下新建build.js文件

//build.js
  var electronInstaller = require('electron-winstaller');
var path = require("path");

resultPromise = electronInstaller.createWindowsInstaller({
    appDirectory: path.join('../electron/bobo-win32-x64'), //刚才生成打包文件的路径
    outputDirectory: path.join('./tmp/build/installer64'), //输出路径
    authors: 'My App Inc.',
    exe: 'bobo.exe', //在appDirectory寻找exe的名字
    setupMsi:'bobo.msi',
    noMsi:true
  });
 
resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));

在项目中运行node build.js 即可构建安装包。至此electron的简单使用介绍完毕