Electron框架

个人博客：https://damanyang.cn/

大家一定听过什么JS开发的应用，但是，JS难道不是Web上的东西吗，不不不，他是个runtime，同样可以开发桌面应用，Electron便是github的一款Web-App产品，著名的Atom也是用这个写的

What is it

Electron 是 GitHub 发布的跨平台桌面应用开发工具，支持 Web 技术开发桌面应用，其本身是基于 C++ 开发的，GUI 核心来自于 Chrome，而 JavaScript 引擎使用 v8。

Install

• nodeJs和npm环境
• npm install electron -g当然也可以用cnpm

Usage

• 创建一个文件夹，要包含

  electron-app/
  ├── package.json
  ├── index.js
  └── index.html
  也就是一个基本的npm package，在package.json填入基本信息
  ex:

  {
    "name": "electron-app",
    "version": "0.1.0",
    "scripts": {
      "start": "electron .",
      "packageWin": "electron-packager . dyblog --platform=win32 --arch=x64 --icon=icon.ico --out=./dist --asar --app-version=2.0.1"
    },
    "devDependencies": {
      "electron-packager": "^15.0.0"
    },
    "dependencies": {
      "electron": "^9.2.1"
    }
  }
  

  其中，依赖不要照着写，用npm安装下来，然后scripts是调试和打包的命令。

• index.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({width: 1200, height: 800});
  
    // 加载应用的 index.html
  
    //
    mainWindow.loadURL('file://' + __dirname + '/index.html');
  
    // 打开开发工具
  
    // mainWindow.openDevTools();
  
    // 当 window 被关闭，这个事件会被发出
  
    mainWindow.on('closed', function() {
  
      // 取消引用 window 对象，如果你的应用支持多窗口的话，
  
      // 通常会把多个 window 对象存放在一个数组里面，
  
      // 但这次不是。
  
      mainWindow = null;
  
    });
  
  });
  

• 然后就是编写自己的web页面，按照上面的index.js的话，入口就是根目录的index.html，enjoy yourself!

• 调试使用npm run start就可以在Electron暂时运行

• 调用npm run packageWin会在根目录生成文件夹，里面就是程序re和dll，还有exe，然后可以双击exe运行，安装包什么的自行解决：）

欢迎留言

个人博客：https://damanyang.cn/