使用Electron打包Http地址为应用程序

NodeJS环境安装

配置镜像地址

编辑项目配置文件

安装依赖

打包运行

NodeJS环境安装

下载NodeJS

官网地址:
https://nodejs.org/zh-cn/

下载地址(当前使用版本: v16.13.2 ):
https://nodejs.org/dist/v16.13.2/node-v16.13.2-x64.msi

全部默认安装, 不需要任何其他配置, 全部直接下一步.

配置镜像地址

配置npm镜像地址

# npm config set registry https://registry.npm.taobao.org/

配置Electron镜像地址

# npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

编辑项目配置文件

编辑package.js文件

{
	"name": "my-app",
	"version": "1.0.0",
	"description": "我的应用程序",
	"main": "main.js",
	"author": "Brando",
	"license": "MIT",
	"productName": "Electron",
	"scripts": {
		"dev": "electron .",
		"package": "electron-packager ./ myapp --out ./OutApp --electron-version=16.0.7 --icon=./app/img/icon/icon.ico --overwrite"
	},
	"devDependencies": {
		"electron": "^16.0.7",
		"electron-packager": "^16.0.7"
	}
}

参数详情:

electron-packager: 打包命令
./ 打包当前目录
myapp 应用程序名称
--out ./OutApp 程序输出目录.
--electron-version=16.0.7 使用Electron版本
--overwrite 重新覆盖文件
--icon=./app/img/icon/icon.ico 配置 ICON 图标地址

"package": "electron-packager ./ myapp --out ./OutApp --electron-version=16.0.7 --icon=./app/img/icon/icon.ico --overwrite"

编辑main.js文件

// Modules to control application life and create native browser window
const {app, BrowserWindow, Menu} = require('electron')
const path = require('path')

const mainWindowURL = 'https://www.baidu.com';

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
	maximizable: true, 	//支持最大化
	show: false,		//为了让初始化窗口显示无闪烁，先关闭显示，等待加载完成后再显示。
//    webPreferences: {
//      preload: path.join(__dirname, 'preload.js')
//    }
  })
  	Menu.setApplicationMenu(null)	//隐藏应用程序菜单.
	// mainWindow.setAutoHideMenuBar(true);//自动隐藏菜单
	mainWindow.loadURL(mainWindowURL);	//设置访问地址
	mainWindow.setTitle("百度一下");		//设置程序Title
	mainWindow.show();
	
  // app.commandLine.appendSwitch("--disable-http-cache")   禁用缓存
  // mainWindow.webContents.openDevTools({mode:'bottom'});
	
  // and load the index.html of the app.
  //mainWindow.loadFile('index.html')
 
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

安装依赖

安装npm依赖

// 1. 安装 npm 依赖
# npm install

// 2. 全局安装 Electron 依赖
# npm install -g electron

打包运行

测试运行

# npm run dev

项目打包

# npm run package