在项目目录下通过 npm 安装 Electron:
npm install --save-dev electron
4. 创建主进程文件
const { app, BrowserWindow } = require('electron');
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 1280,
height: 600,
webPreferences: {
nodeIntegration: true
// 加载网页
win.loadURL('https://www.pptgenius.com/');
win.setMenuBarVisibility(false);
// 打开开发者工具
// win.webContents.openDevTools();
// Electron 完成初始化并准备创建浏览器窗口时调用这个函数
app.whenReady().then(createWindow);
// 当所有窗口都关闭时退出应用
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
app.on('activate', () => {
// 在 macOS 上,当点击 dock 图标并且没有其他窗口打开时,通常会重新创建一个窗口
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
5. 修改 package.json
添加启动脚本
-
在 package.json
中添加启动脚本以方便启动应用:
{
"name": "my-electron-app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@electron-forge/cli": "^7.3.1",
"@electron-forge/maker-deb": "^7.3.1",
"@electron-forge/maker-rpm": "^7.3.1",
"@electron-forge/maker-squirrel": "^7.3.1",
"@electron-forge/maker-zip": "^7.3.1",
"@electron-forge/plugin-auto-unpack-natives": "^7.3.1",
"@electron-forge/plugin-fuses": "^7.3.1",
"electron": "29.3.0"
"dependencies": {
"electron-squirrel-startup": "^1.0.0"
6. 运行应用
- 使用以下命令启动 Electron 应用:
npm start
7. 打包应用
注:分发时,可以把my-electron-app-win32-x64压缩打包成zip包到目标环境,解压即可执行,无需安装
通过以上步骤,你可以将任何网页封装成一个独立的 Electron 应用,并将其打包成 EXE 文件以便分发。这一过程提供了灵活性,允许你根据具体需求调整窗口大小、图标、权限等设置。
将网页转换为桌面应用程序为用户提供了更丰富的交互体验和更高的访问便利性。Electron提供了一种灵活的方式来构建跨平台的桌面应用,而WebView2和CEF则是嵌入网页内容到传统Windows应用的解决方案。选择哪种方案取决于具体的项目需求、开发资源以及期望的应用功能。
软件介绍:
HtmlCompiler是一款趣的小工具,它可以将网页完全地转换为EXE可执行文件,遗憾的是本软件的界面是英文的,不过它的使用并不复杂,只需要几个简单的步骤,就能将你的网页转换成EXE。你还可以添加密码保护,转换后的EXE运行需要输入密码才可以。安装说明:解压后双击HtmlCompiler.exe安装程序,安装结束之后注意不要立刻运行它,将CK文件夹内的C:\Program Files\David Esperalta\HtmlCompiler文件复制到C:\Program Files\David Esperalta\HtmlCompiler目录下面,覆盖原来的文件即是正式版。使用说明:点击菜单File-->New project新建一个项目,然后选择你的网页文件,按F2键进入转换属性设置,包括转换后文件的图标及标题,设置密码保护以及尺寸大小等,从Compile中可以设置转换后的保存位置。设置后点击下面的Save按钮保存设置。最后点击菜单Build,选择Compile project将脚本转换成EXE即可
执行上述命令后,nativfier将会自动创建一个桌面程序,并在当前目录下生成一个相应的文件夹,里面包含了打包后的程序文件。首先,确保你已经安装了Node.js和npm。如果没有安装,你需要先安装它们。通过以上步骤,你就可以使用nativfier将一个网址成功打包成桌面程序了。打开终端(Terminal)或命令提示符(Command Prompt)。进入生成的文件夹,你会找到可执行文件或安装文件,具体取决于你的操作系统。请将https://example.com替换为你想要打包的网址。
HTML2EXE是一款在Windows系统下将Web项目或网站打包成EXE执行程序的免费工具。这款工具能够将单页面应用、传统HTML+JavaScript+CSS生成的网站、Web客户端,以及通过现代前端框架(如Vue)生成的应用转换成独立的EXE程序运行。它支持将任何网站打包成EXE程序,并且可以生成32位或64位的Windows程序。
给兄弟们推荐一个我一直用的工具软件,可以将网页网站直接打包成APP应用安装到手机上,其实原理就是把网站封装成了一个APP安装包,安装APP后点击打开默认跳去了网站.软件可以直接在应用商店下载,叫一个木函,挺好用的,里面还有很多实用的小工具,找不到的我上传安装包到百度云了链接:https://pan.baidu.com/s/10bZCcgMLZ-pnfhQoamnVqA提取码:6688。
将自己的网页变成可运行的 程序,如下所示:Node.js ≥ 12.9 | npm ≥ 6.9确定符合以上环境,任意位置调出 终端,执行如下命令:
如失败,请更换为淘宝源(强烈建议),如不会更换详见 这篇文章。安装完成后,执行如下命令:
将网址替换为你自己的即可。打包完成后,会返回位置:...
你是否想过把网页变成一个电脑软件,但可是上某度一搜映入眼帘的全是网页转app,网页转apk的软件:
What?全是封装手机的!于是,经过了我一番疯狂的DFS与BFS终于找到了Node.js这款软件.
是不是已经迫不及待啦!下面就是上Hyperlink的时间了!
⛓想下载快戳我⛓
安装时有可能会弹出PowerShell,不要方,这很正常.
安装完成后按下"Windows徽标键+R"打开运行,然后输入
输入后的效果输入完成后点击确认,然后控制台就蹦出来了!
安装后输入命令:
老板们突发奇想,把现有的一个管理后台系统打包成桌面端可安装应用,当时我脑海就浮现出两套方案,Electron或Flutter的Webview来打包应用,相对来说Electron熟悉点,就优先考虑了使用Electron,当然后来也使用Flutter实现了一版,效果差别不大,我们先来看看Electron是怎么实现的。
一般来说,进行网页转成手机app需要专门的工具进行制作,需要将网页中的组件元素用安卓原生组件代替,让访问网页有了更好的途径,交互方式也有了很大的提升。网页转客户端应用是将经常浏览的网站像手机应用一样摆在手机桌面上,这样我们访问网站就不用通过浏览器,只需要打开客户端应用就可以进行操作了。2.点击应用,下面的浏览页添加你要转换的网站网址,建议用http协议,如果是https就将S去掉。点击左上角的菜单,选择清单,点击图标,即可导入app图标。接下来我们简单介绍一下使用方法。1.点击右下角的+号,创建应用。