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

1.下载并安装Node.js,下载连接https://nodejs.org/en/,选择合适自己电脑的版本,下载安装即可。
在这里插入图片描述
检查是否安装成功:

  1. 按下键盘win+R键,打开运行窗口,输入“cmd”,点击确定。
    在这里插入图片描述
  2. 输入 “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-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文件中,如图:
在这里插入图片描述
打开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>

事件就可以正常运行了。

  • 2
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值