Electron項目的搭建和electron-builder打包

Coder編程 2022-12-04 發(fā)布于北京

展開全文

electron簡單項目目錄結(jié)構(gòu)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <link rel="stylesheet" href="./app.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script src="./app.js" type="text/javascript"></script>
  </body>
</html>

package.json

{
  "name": "my-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^11.1.1"
  }
}

main.js

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

function createWindow() {
  // 創(chuàng)建瀏覽器窗口。
  const win = new BrowserWindow({
    width: 1280,
    height: 720,
    webPreferences: {
      nodeIntegration: true,
    },
    autoHideMenuBar: true,  // 默認隱藏菜單欄
    fullscreen: true,       // 默認全屏
  });

  // 加載index.html文件
  win.loadFile('index.html');
}

// Electron 會在初始化后并準備創(chuàng)建瀏覽器窗口時，調(diào)用這個函數(shù)。部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(createWindow);

// 當全部窗口關(guān)閉時退出。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

文件瀏覽器的demo： https://github.com/tugenhua0707/electron-demo/
打包命令： electron-builder --win
下載electron-builder： npm install electron-builder global

package.json

{
  "name": "window-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder --win"
  },
  "build": {
    "appId": "com.example.app",
    "directories": {
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./icon.ico",
      "installerHeaderIcon": "./icon.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "123"
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    }
  },
  "keywords": [],
  "author": "kongzhi",
  "license": "ISC",
  "dependencies": {
    "electron": "^11.1.1"
  },
  "devDependencies": {
    "async": "^3.2.0"
  }
}