zoukankan      html  css  js  c++  java
  • Electron项目的搭建和electron-builder打包

    electron简单项目目录结构


    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() {
      // 创建浏览器窗口。
      const win = new BrowserWindow({
         1280,
        height: 720,
        webPreferences: {
          nodeIntegration: true,
        },
        autoHideMenuBar: true,  // 默认隐藏菜单栏
        fullscreen: true,       // 默认全屏
      });
    
      // 加载index.html文件
      win.loadFile('index.html');
    }
    
    // Electron 会在初始化后并准备创建浏览器窗口时,调用这个函数。部分 API 在 ready 事件触发后才能使用。
    app.whenReady().then(createWindow);
    
    // 当全部窗口关闭时退出。
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit();
      }
    });
    
    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
      }
    });
    
    1. 文件浏览器的demo: https://github.com/tugenhua0707/electron-demo/

    2. 打包命令: 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"
      }
    }
    
  • 相关阅读:
    easyui datagrid fit 属性
    jQuery outerHeight() 方法
    从文件夹输入数据到控制台程序 c方式
    排序算法
    泛型算法
    string、char[]、char*、const char* 相互转换
    sizeof
    容器 forward_list
    sort
    printf & sprintf
  • 原文地址:https://www.cnblogs.com/nangezi/p/14495729.html
Copyright © 2011-2022 走看看