使用Electron将Web页面转成exe可执行文件

1.下载并安装Node.js，下载连接https://nodejs.org/en/，选择合适自己电脑的版本，下载安装即可。
使用Electron将Web页面转成exe可执行文件
检查是否安装成功：

按下键盘win+R键，打开运行窗口，输入“cmd”，点击确定。
输入 “node -v” ，回车，显示Node版本；再输入 “npm -v” ，回车，显示npm版本，即为安装成功。

2.安装Electron环境。
新建一个文件夹，打开文件夹，左上角选择“文件”—“打开Windows PowerShell”。如图：

输入初始化命令，“npm init”，回车。entry point修改为main.js，其他选项直接回车默认就好了，最后会出现Is this OK?输入yes，回车。

回到文件夹，就会多一个package.json文件。

打开package.json文件，将"scripts"里的内容改为"start": “electron .”。如图：

安装Electron，在PowerShell中输入命令"npm install electron --save-dev --verbose"，回车，开始安装。

安装完成后，文件夹中会多出一个文件夹node_modules。
然后新建一个main.js文件，文件内容可以根据自己的需求修改。

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

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;

// 初始化并准备创建主窗口
app.on('ready', function() {
	// 创建一个宽800px 高600px的窗口
	mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		minimizable: false,//最小化
		maximizable: false,//最大化
		closable: true,
		movable: false,
		frame: false,//边框
		fullscreen: true//全屏
	});
	// 载入应用的index.html
	mainWindow.loadURL(url.format({
		pathname: path.join(__dirname, '/index.html'),
		protocol: 'file:',
		slashes: true
	}));
	// 窗口关闭时触发
	mainWindow.on('closed', function() {
		// 想要取消窗口对象的引用， 如果你的应用支持多窗口，你需要将所有的窗口对象存储到一个数组中，然后在这里删除想对应的元素
		mainWindow = null
	});
});

保存文件后文件夹如图所示：
使用Electron将Web页面转成exe可执行文件
安装electron-package。打开Windows PowerShell，输入“npm install electron-packager -g”，回车。如图即为安装成功。

修改package.json。在"scripts"中加入"packager"配置：

"scripts": {
   "start": "electron .",
    "packager":"electron-packager ./ Myexe --platform=win32 --arch=x64 --electron-version=1.8.4 --out=../ceshi/exe版 --overwrite"
  },

./表示当前路径
Myexe ：exe应用的名称
platform: 打包平台 darwin, linux, mas, win32或者选择all
arch: 可选 ia32, x64, armv7l, arm64或者选择all
electron-version： electron的版本（）
out：生成的exe保存目录
overwrite:使用了这个参数，每次打包就不用把原来exe删除，可直接覆盖了。

修改会保存文件。
将写好的web项目文件都拷贝到Test文件中，如图：
使用Electron将Web页面转成exe可执行文件
打开Windows PowerShell，输入“npm run-script packager”，回车。

返回文件夹上级目录，找到exe保存目录。

找到你命名的exe，双击打开，就可以看到生成的exe效果了。

如果你的程序中有写js或者jquery，你可能会发现你写的有些事件失效了，比如按钮的点击事件。解决方法：在页面中加入

       <script>
			window.nodeRequire = require;
			delete window.require;
			delete window.exports;
			delete window.module;
		</script>

事件就可以正常运行了。

使用Electron将Web页面转成exe可执行文件

相关推荐