electron基础搭建hello world

electron: Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的

1、新建一个文件夹，打开终端，运行

npm init -y

默认创建一个package.json

2、安装electron

cnpm install electron --save-dev

3、在该文件夹下新建一个main.js

 

// 创建一个hello world窗口

// 引入模块

// app模块: 控制应用的生命周期
// BrowserWindow模块: 创建一个浏览器窗口
const { app, BrowserWindow } = require('electron');

// path模块是node的内置模块，用于解析路径
const path = require('path');

// 全局变量
let win;

//1、初始化应用之后，会触发监听ready事件
app.on('ready', createWindow)


// 创建窗口
function createWindow () {
  // 1.1 创建窗口
  win = new BrowserWindow({
    width: 600,
    height: 500,
    movable: true,
    resizable: true,
    backgroundColor: '#f2f2f2',
    webPreferences: {
      nodeIntegration: true
    }
  });

  // 1.2加载内容
  // 加载远程
  //win.loadURL('http://www.baidu.com');
  // 加载本地页面
  // __dirname: 当前js文件所在的文件夹的路径  C://user...test  绝对路径
  // 相对路径  ./index.html
  // path.join('c://user/../','./index.jtml')用于拼接路径
  win.loadURL(path.join(__dirname, './index.html'));
  // mac系统
  // win.loadURL(path.join('file://',__dirname, './index.html'));

  // 1.3调式工具
  // webContents: 控制和渲染页面  也是window的一个属性
  win.webContents.openDevTools(); // 打开调试页面

  // 1.4关闭窗口
  win.on('close', function () {
    // TODO关闭窗口之前做的事
    win = null;
  });

}
// 主进程：在主进程main.js打印的数据--->显示在终端控制台上
// 渲染进程：打印的数据--->显示在对应的页面

4、在package.json的script的脚本中添加 "start": "electron main.js"，然后运行npm run start，就会生成一个桌面应用

5、自定义菜单

在createWindow方法里面引入菜单设置

// 1.5引入菜单设置

  require('./menu')

6、menu.js菜单配置

// 制作菜单

const { Menu } = require('electron')

// 1、设置一个模板
let tmp = [
  {
    label: '文件',
    submenu: [
      {
        label: '新建文件',
        accelerator: (function () { // 根据不同平台设置不同快捷键
          // mac基于darwin
          if (process.platform == 'darwin') {
            return 'Ctrl+command+L'
          } else { // win
            return 'Ctrl+M'
          }
        })(),
        click: function () {
          console.log('new file')
        }
      },
      {
        type: 'separator' // 分割线
      },
      {
        label: '新建窗口',
        type: 'checkbox', // 
        checked: true, // 在菜单前加√
        accelerator: 'Alt+Ctrl+M', // 添加快捷键设置
        click () {
          console.log('new window')
        }
      }
    ]
  },
  {
    label: '编辑'
  }
]

// 2、构建菜单（实例化一个菜单对象）
let menu = Menu.buildFromTemplate(tmp);

// 3、把菜单对象设置到应用中
Menu.setApplicationMenu(menu);