• 一、Electron入门教程


    参考资料:https://www.cnblogs.com/zhangshuda/p/8086500.html

    一、首先安装node(具体过程百度)

    二、新建文件夹demo

    三、打开终端进入新建的文件夹中

    4、初始化项目 npm init -f

     文件中会多出package.json文件

    五、修改package.json

      main:'index.js'修改为  main:'main.js'

    六、安装electron

      npm install electron --save  //也可用 cnpm install electron --save

      项目中会多出node_modules文件夹

      oacjage.json会加入electron相关的配置

     七、项目根目录下新建main.js

    const electron = require('electron')
    const path = require("path")
    const url = require('url')
    
    const { app,BrowserWindow,globalShortcut} = require('electron')
    
    let mainWindow
    
    function createWindow () {
        // Create the browser window.
        mainWindow = new BrowserWindow({ 900, height: 600})
        var webContents=mainWindow.webContents;
        //开启开发者工具
        webContents.openDevTools();
        // and load the index.html of the app.
        mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, 'index.html'),
            protocol: 'file:',
            slashes: true
        }))
    
        // Open the DevTools.
        // mainWindow.webContents.openDevTools()
    
        // Emitted when the window is closed.
        mainWindow.on('closed', function () {
            // Dereference the window object, usually you would store windows
            // in an array if your app supports multi windows, this is the time
            // when you should delete the corresponding element.
            mainWindow = null
        })
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.on('ready', createWindow)
    
    // Quit when all windows are closed.
    app.on('window-all-closed', function () {
        // On OS X it is common for applications and their menu bar
        // to stay active until the user quits explicitly with Cmd + Q
        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()
        }
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.
    

    八、项目根目录下创建index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Document</title>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
    </html>
    

    九、修改package.json 

      

    {
      "name": "waterdroplets",
      "version": "1.0.0",
      "description": "",
      "main": "main.js",
      "scripts": {
        "start": "electron ."
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "dependencies": {
        "electron": "^2.0.6"
      },
      "devDependencies": {
        "devtron": "^1.4.0"
      }
    }
    

     

    十、在项目跟目录下 终端执行 npm start

      

  • 相关阅读:
    BZOJ2874 训练士兵 主席树
    单纯形 BZOJ3112: [Zjoi2013]防守战线
    珠宝 jewelry 省选模拟
    FWT [BZOJ 4589:Hard Nim]
    后缀自动机SAM BZOJ 2806
    就是要第一个出场的albus 【BZOJ】 线性基
    冲刺第十二十三天
    冲刺第十 十一天
    阅读8.9.10
    冲刺第八九天
  • 原文地址:https://www.cnblogs.com/kongnengjing/p/9414727.html
Copyright © 2020-2023  润新知