Electron 将网页打包成桌面应用

1.初始化node项目,生成package.json文件

 1 npm init 

2.安装electron,并保存为开发依赖项

 1 npm install electron -D 

3.根目录下新建index.js文件

const {app, BrowserWindow} = require('electron')

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600})

  mainWindow.loadFile('index.html')

  // mainWindow.webContents.openDevTools()

  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X 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 (mainWindow === null) {
    createWindow()
  }
})

4.根目录下新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Hello Electron!!</h1>
</body>
</html>

5.打开package.json文件,新建命令

"scripts": {
   "start": "electron ."  
}

6.执行启动命令

npm start

7.安装electron打包工具electron-packager

npm install electron-packager -g

8.配置打包命令

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . appName --all --out ../OutApp --app-version 1.0.0 --electron-version=2.0.0 --overwrite --icon xx.ico"
  }

执行打包命令

npm run pack

命令结构如下(根据实际情况修改):

".":需要打包的应用目录(即当前目录),

"appName":应用名称,

"--all”:打包成所有平台(包括Windows及linux),

"--out ../OutApp":输出目录,

"--app-version=1.0.0":应用版本,

"--electron-version=2.0.0":electron版本

"--icon":图标地址

猜你喜欢

转载自www.cnblogs.com/ruansl/p/10241336.html