electron: 将网址打包成exe桌面应用

项目场景：

在项目开发的过程中，需要将应用搭建在不同的硬件上。如需要在一个触屏显示器上展示企业相关的应用。

如果专门去开发一个这样的应用，不划算；这时候考虑将网址打包成exe应用，并安装触屏器上，就可以满足客户的需求。

项目就是为了特定的目的，消耗一定的资源，在确定的时间内，提供特定的产品。同时也要注意，产品不一样要最好的，但是一定要是合适的，满足客户需求的。

---

解决方案

目前主要解决方案有三种：一种是让第三方进行打包，还有一种是用Nativefier， 最后一种是用electron进行打包。

首先用第三方打包，优点是方便，确定是要花钱。

其次是Nativefier，这个可以下载对应的应用，然后用命令的方式直接打包，优点是免费，方便，缺点是logo设置优点麻烦，一般只能在本地使用，不能给其他人安装，不然logo容易丢失。以下是自己用Nativefier进行打包的教程。

https://blog.csdn.net/weixin_44565776/article/details/139435103

最后一种是用electron进行打包，优点是方便，并且可以随意转发给其它人安装使用，缺点是logo需要特定的尺寸，一般为256*256，推荐格式是ico格式，打包有点麻烦。

最终我选择了最后一种方案。因为便宜又好用。

---

代码实施：

nodejs版本：20.10.0

因为在下载electron的过程中，需要在29.1.6以上版本，所以在下载时要注意；以下是package.json的代码，可以按照这个包进行下载安装。

{
  "name": "electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start",
    "build": "electron-builder --win",  
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "build": {
    "productName": "百度",//打包应用名称
    "directories": {
      "output": "out" 
    },
    "win": {
      "icon": "./icon/favicon.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./icon/favicon.ico",//打包logo
      "uninstallerIcon": "./icon/favicon.ico",//打包logo
      "installerHeaderIcon": "./icon/favicon.ico",//打包logo 以上lkogo推荐用一个
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "百度"//打包应用名称
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.4.0",
    "electron": "^29.1.6",
    "electron-builder": "^24.13.3"
  }
}

以下是index.js的代码：

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

有以上两块核心代码，然后自己创建一个。

---

收获：

在运用这个应用我给多位客户打包过网址，并还赚了几百大洋的零花钱。

如果你需要网址打包，可以@我哈！