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":圖標地址

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM