初识Electron

180 阅读2分钟

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战

初学Electron遇到的问题对学习本篇文章的过程中遇到的问题总结

1, 介绍

Electron 桌面开发应用系统,众所周知,目前越来越流行,为了跟上时代的步伐,活到老,学到老。

1642512835810.png

组成: Electron = Chromium + Node.js + Native API

(1) Chromium : 使用可以用web技术开发,并且不考虑浏览器的兼容性

(2) Node.js : 使用可以使用npm , 并具备底层操作能力

(3) Natvie API : 使用具有扩平台的原生能力

2, 目前比较流行使用的

VSCode, Atom, Slack, Wordpress

2, 环境搭建

(1) 环境配置

node -v 
v12.20.0

( 2) 创建 项目, 初始化package.json文件

mkdir electron-project
cd electron-project
npm init -y
npm install electron --save-dev

(3) 检查安装版本

npx electron -v
或
./node_modules/.bin/electron -v

3, HelloWorld

(1) 创建main.js

var electron = require('electron')

var app = electron.app

var BrowserWindow = electron.BrowserWindow // 窗口引入

var mainWindow = null;  // 什么要打开的主窗口

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 800})
  mainWindow.loadFile('index.html') // 加载html网页
  mainWindow.on('close', () => {
    mainWindow = null;
  })
})

(2) 运行

electron  main.js

4, 运行流程

(1) 入口文件: main.js

(2) main.js 是主进程,通过loadFile去创建渲染进程

(3) 读取页面index.html

(4) 通过IPC在主进程执行任务并获取信息

主进程

一般一个程序只有一个主进程,一个主进程可以控制多个渲染进程

5, 读取一个文件

(1) 设置主窗口可以操作node

mainWindow = new BrowserWindow({ 
    width: 800, 
    height: 800,
    webPreferences: { nodeIntegration: true}
  })

(2) 根目录新建一个文件.txt,引入node模块中的fs

var fs = require('fs')

window.onload = function() {
  var btn = this.document.querySelector("#btn")
  var baby = this.document.querySelector("#baby")
  btn.onclick = function() {
    fs.readFile('README.txt', (err, data) => {
      baby.innerHTML = data
    })
  }
}

6, 菜单创建

(1) 常见menu.js

const { Menu, BrowserWindow } = require('electron')

var template = [
  {
    label: '读书馆',
    accelerator: 'ctrl+n',
    submenu: [
      { 
        label: 'Vue',
        onclick: ()=> { 
          var win = new BrowserWindow({
            width: 500,
            height: 500,
            webPreferences: { nodeIntegration: true }
          })
          win.loadFile('index.html')
          win.on('closed', () => {
             win = null;
          })
        } 
      },
      { label: 'React' },
      { label: 'Java' }
    ]
  },
  {
    label: '休息室',
    submenu: [
      { label: '桌子' },
      { label: '椅子' }
    ]
  }
]

var menu = Menu.buildFromTemplate(template)
    Menu.setApplicationMenu(menu)

其中: label是一级菜单, submenu是二级菜单

每一个二级菜单想要使用node的原生功能必须设置: webPreferences: { nodeIntegration: true }, 而起二级菜单也是可以添加点击事件,并且打开一个新窗口,记住:最后都要监听closed方法, 将窗口置为null, 如果不见他closed事件,内存会越耗越大

如果想增肌菜单的快捷键需要设置: accelerator: 'ctrl+n',

7,项目地址

[持续更新中]

gitee.com/jamiedawn/e…