zoukankan      html  css  js  c++  java
  • 1,electron搭建

    electron可以用js来创建丰富的桌面应用

    一个electron应用的目录结构

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

    1,安装electron:全局安装

     npm install electron -g

    2,package.json内容

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

    3,如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js

    创建main.js文件

    const electron = require('electron');
    const app = electron.app; // 控制应用生命周期的模块。
    const BrowserWindow = electron.BrowserWindow; //创建原生浏览器窗口的模块

    // 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
    // window 会被自动地关闭
    var mainWindow = null;

    //当所有窗口被关闭了,退出。
    app.on('window-all-closed', function() {
    // 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
    // 应用会保持活动状态
    if (process.platform != 'darwin') {
    app.quit();
    }
    });

    //当 Electron 完成了初始化并且准备创建浏览器窗口的时候
    //这个方法就被调用
    app.on('ready', function() {
    // 创建浏览器窗口。
    mainWindow = new BrowserWindow({ 800, height: 600});

    // 加载应用的 index.html
    mainWindow.loadURL('file://' + __dirname + '/index.html');

    // 打开开发工具
    mainWindow.openDevTools();

    // 当 window 被关闭,这个事件会被发出
    mainWindow.on('closed', function() {
    // 取消引用 window 对象,如果你的应用支持多窗口的话,
    // 通常会把多个 window 对象存放在一个数组里面,
    // 但这次不是。
    mainWindow = null;
    });
    });

     4,创建展示的index.html文件

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello World!</title>
      </head>
      <body>
        <h1>Hello World!</h1>
        We are using io.js <script>document.write(process.version)</script>
        and Electron <script>document.write(process.versions['electron'])</script>.
      </body>
    </html>

    5,运行应用

    electron .
  • 相关阅读:
    TCP协议简单套接字通信 客户端
    TCP协议简单套接字通信 服务端
    java课程作业--动手动脑
    Java方法课程作业1,2,3
    java猜数字(实验任务五)
    课程作业02(关于Java的几点讨论)
    java多个int型数据累加求和
    java基本登录界面
    大道至简第一章观后感——java伪代码
    《大道至简—软件编程者的思想》观后感
  • 原文地址:https://www.cnblogs.com/maxwell-xu/p/8310942.html
Copyright © 2011-2022 走看看