zoukankan      html  css  js  c++  java
  • Electron_01

    1、通过 https://electron.atom.io/  下载  electron-v1.4.15-win32-x64.zip 之后

    2、通过

    asar pack “你的项目文件夹” app.asar 将项目压缩并改名为 app.asar

    3、把自己的项目 放在 以上解压文件的 resource 文件夹下

    4、点击 electron.exe 运行项目

    实例项目:

      

    Electron App的目录结构如下:

    your-app/
    ├── package.json
    ├── main.js
    └── index.html

    其中的package.json和Node Modules里表现的一样,而main.js则是启动你App的脚本,它将会开启主进程。package.json的一个例子:

    {
      "name"    : "your-app",
      "version" : "0.1.0",
      "main"    : "main.js"
    }

    注:当package.json里不存在main时,Electron将会默认使用index.js

    main.js应当创建一个窗口并处理系统事件。一个典型的例子如下:

    'use strict';
    
    const electron = require('electron');
    const app = electron.app;  // 控制App生命周期的模块
    const BrowserWindow = electron.BrowserWindow;  // 创建原生窗口的模块
    
    // 保持对窗口对象的全局引用。如果不这么做的话,JavaScript垃圾回收的时候窗口会自动关闭
    var mainWindow = null;
    
    // 当所有的窗口关闭的时候退出应用
    app.on('window-all-closed', function() {
      // 在 OS X 系统里,除非用户按下Cmd + Q,否则应用和它们的menu bar会保持运行
      if (process.platform != 'darwin') {
        app.quit();
      }
    });
    
    // 当应用初始化结束后调用这个方法,并渲染浏览器窗口
    app.on('ready', function() {
      // 创建一个窗口
      mainWindow = new BrowserWindow({ 800, height: 600});
    
      // 加载index.js
      mainWindow.loadURL('file://' + __dirname + '/index.html');
    
      // 打开 DevTools
      mainWindow.webContents.openDevTools();
    
      // 窗口关闭时触发
      mainWindow.on('closed', function() {
        // 如果你的应用允许多个屏幕,那么可以把它存在Array里。
        // 因此删除的时候可以在这里删掉相应的元素
        mainWindow = null;
      });
    });

    最后,index.html是你最终要展示的页面

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
      </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>.
      </body>
    </html>

    运行&生成应用

    通过electron-prebuilt运行

    如果你通过npm全局安装了electron-prebuilt,那么在App文件目录下跑这句就可以运行它:

    electron .
  • 相关阅读:
    IDEA 快捷键
    Python3开启自带http服务
    redis-creating server tcp listening socket 127.0.0.1:6379: bind No error
    moco的使用方法
    tomcat程序闪退,如何让tomcat不闪退,可以看见报错
    java 项目中Error linstenerStart 报错解决方法
    Linux 常用命令
    TS数据类型及语法
    RabbitMQ的下载和安装
    vue 控制 input 的 disabled
  • 原文地址:https://www.cnblogs.com/Mvloveyouforever/p/6484255.html
Copyright © 2011-2022 走看看