使用electron打包网页

最新推荐文章于 2024-09-10 11:14:33 发布

凝冻丿小虾

最新推荐文章于 2024-09-10 11:14:33 发布

阅读量1.1k

点赞数 27

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/qq_62338687/article/details/141194918

版权

一，什么是electron

Electron 是一个流行的开源框架，允许开发者使用 Web 技术（HTML, CSS, JavaScript）来构建跨平台的桌面应用程序。它结合了 Chromium 浏览器内核和 Node.js，提供了丰富的 API 来访问硬件功能，同时支持快速应用开发和更新。Electron 适用于开发各种类型的桌面软件，包括开发工具、音乐播放器、通讯软件等。

二，electron的安装（网上）

这里小编参考了很多网上教程，也去看了electron的官方文档。基本上都是直接通过npm下载，然后下载不了，就要你换下载源，结果都是连接超时，无论哪个源都是无法下载的。

这里网上还有一种办法是本地直接下载electron包，然后放到某个目录下，这里小编也是试了很多次，不知道为什么都无法成功。

如果大家想尝试的可以参考这些连接：使用npm下载electron，手动下载electron

三，electron的安装（自用）

这里是我自己找的资源，然后研究出来的：参考如何将静态网页资源“打包“成.exe或者.apk，网址打包成桌面.exe。

1，安装node.js

这个不多赘述网上很多教程：node安装。我的版本是v16.20.2。

2，安装cnpm

npm install -g cnpm --registry=https://registry.npmmirror.com

3，安装electron

cnpm install electron -D

4，开始打包

选择你想要的位置创建一个文件夹my-electron，命令行：（手动创建也行）

mkdir my-electron

进入刚刚创建的文件夹my-electron，命令行：

cd my-electron

初始化文件夹，命令行：

npm init -y

文件夹效果：

下载electron-packager，命令行：

npm install electron electron-packager --dev

package.json 中做以下指定：

"main": "main.js",
"scripts": {
  "start": "electron ."
},

在根目录my-electron下创建main.js文件,并写入

（引入两个node模块：app 和 BrowserWindow,app 模块，控制整个应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理程序的窗口。在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口）

const { app, BrowserWindow } = require('electron')
app.whenReady().then(() => {
  //创建一个窗口
  createWindow()
})
function createWindow() {
  const mainWindow = new BrowserWindow({ width: 800, height: 600 })//这里调整窗口大小
  //窗口加载 URL
  mainWindow.loadURL('http://****')//这里写自己要打包的网页
}

四，打包和调试

1，调试

npm run start

2，打包

npm install --save-dev @electron-forge/cli
npx electron-forge import
npm run make

3，效果

最后的软件在out里面，可以找到一个exe文件，点开即可。

五，其它

其实这样打包出来的软件是没有图标的，用的是elecctron的默认图标，emmm，还是很丑的，而且名字也是奇奇怪怪的。

那么接下来就是加上有些配置的操作：

1，安装 npm install --save-dev electron-builder

2，改写package.json文件，下面是文件参考：

{
  "name": "myexe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",//记得改成自己js文件名字，如main.js
  "scripts": {
    "start": "electron-forge start",
    "build": "electron-builder --win"
  },
  "build": {
    "productName": "我的应用",//软件名称自己设置
    "directories": {
      "output": "out" 
    },
    "win": {
      "icon": "./ico/logo.ico",//图标路径
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./ico/logo.ico",
      "uninstallerIcon": "./ico/logo.ico",
      "installerHeaderIcon": "./ico/logo.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "我的应用"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron-packager": "^17.1.2"
  },
  "devDependencies": {
    "electron-builder": "^24.13.3",
	"electron": "^31.3.1"
  }
}

3，改写index.js文件，下面是参考：

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    autoHideMenuBar: true,
  })
  // 全屏
  win.maximize()
  // 载入要打包的网页链接
  win.loadURL('http://****')
}
 
// 应用程序准备好后加载窗口
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})