使用Electron将Web项目打包成windows桌面应用

1.从官网下载node.js并安装。

2.有不少人反映使用此命令安装Electron不成功，可能是国外镜像的问题。

npm install --save-dev electron-prebuilt

3.可以选择使用淘宝npm开发的cnpm进行安装。

//首先安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

//使用cnpm进行安装，使用方法和npm相同
cnpm install -g electron

4.准备好一个前端web项目（包含html，css，js等的）

5.web项目的目录应该是

你的项目目录/
├── package.json
├── main.js
└── index.html

6.package.json的内容

{
  "name"    : "app",
  "version" : "1.0.1",
  "main"    : "main.js"
}

7.main.js的内容

// var app = require('app');  // 控制应用生命周期的模块。
// var BrowserWindow = require('browser-window');  // 创建原生浏览器窗口的模块

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

8.cmd进入web项目根目录，执行全局安装命令

npm install electron-packager -g

9.输入打包命令

electron-packager . app --win --out presenterTool --arch=x64 --electron-version 4.0.5 --overwrite --ignore=node_modules

这个命令什么意思？蓝色部分可自行修改：

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --electron-version Electron的版本号 --overwrite --ignore=node_modules

10.打包成功，文件夹目录如图

11.以上是最基础的打包功能，至于窗口大小，菜单栏等这些可以参考Electron的说明文档。

 

转载于:https://www.cnblogs.com/wxxwjef/p/10402221.html