zoukankan      html  css  js  c++  java
  • Electron快速入门

    node -v

    npm -v

    安装node环境

    my-electron-app/

    ├── package.json

    ├── main.js

    └── index.html

    为您的项目创建一个文件夹并安装 Electron:

    mkdir my-electron-app && cd my-electron-app

    npm init -y

    npm i --save-dev electron

    main.js代码:

    const { app, BrowserWindow } = require('electron')
    
    function createWindow () {
      const win = new BrowserWindow({
         800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })
    
      win.loadFile('index.html')
    }
    
    app.whenReady().then(createWindow)
    
    app.on('window-all-closed', () => {
      if (process.platform !== 'darwin') {
        app.quit()
      }
    })
    
    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
      }
    })
    

      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';" />
    </head>
    <body style="background: white;">
        <h1>Hello World!</h1>
        <p>
            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>.
        </p>
    </body>
    </html>
    

      package.json

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

      启动:npm start 命令行

  • 相关阅读:
    Leetcode 剑指 Offer 27(二叉树的镜像)
    Leetcode 1022从根到叶的二进制之和
    Leetcode 993二叉树的堂兄弟节点
    Leetcode 965单值二叉树
    Leetcode 938 二叉搜索树的范围和
    hdu 2082 找单词
    母函数模板
    hdu 1398 Square Coins
    hdu 1085 Holding Bin-Laden Captive!
    hdu 1028 Ignatius and the Princess III
  • 原文地址:https://www.cnblogs.com/q1359720840/p/14375573.html
Copyright © 2011-2022 走看看