Electron入门

Electron开发

技术架构

• Chromium：支持最新特性的浏览器
• Node.js：JavaScript 运行时，可实现文件读写等
• Native APIs：提供统一的原生界面能力

工作流程

1、主进程

• 可以看作是 package.json 中 main 属性对应的文件
• 一个应用只会有一个主进程
• 只有主进程可以进行 GUI 的 API 操作

2、渲染进程

• Windows 中展示的界面通过渲染进程表现
• 一个应用可以有多个渲染进程

Electron 生命周期

3、生命周期事件

• ready：app 初始化完成
• dom-ready：一个窗口中的文本加载完成
• did-finsh-load：导航完成时触发
• window-all-closed：所有窗口都被关闭时触发
• before-quit：在关闭窗口之前触发
• will-quit：在窗口关闭并且应用退出时触发
• quit：所有窗口被关闭时触发
• closed：当窗口被关闭时触发，此时应删除窗口引用

主进程与渲染进程通信

4、异步通信

 ipcRenderer.send('msg','当前是来自渲染进程的一条异步消息')
 BrowserWindow.getFocusedWindow().webContents.send('mtp','来自主进程菜单的消息')
 // 渲染进程接收消息
 ipcRenderer.on('msg1',(ev,data)=>{
    console.log(data)
 })
// 主进程接收消息操作
ipcMain.on('msg',(ev,data)=>{
    console.log(data)
    ev.sender.send('msg1','这是一条来自主进程的异步消息')
})

5、同步通信

 let sendSync = ipcRenderer.sendSync('msgSync','当前是来自渲染进程的一条同步消息');
ipcMain.on('msgSync',(ev,data)=>{
    console.log(data)
    ev.returnValue = '来自主进程的同步消息'
})

渲染进程之间通信

6、通过主进程

通过 ipcRenderer 实现，以主进程作为中转

7、localStorage

localStorage.setItem('renderCommunicate','渲染进程通信')
let item = localStorage.getItem('renderCommunicate');

Dialog 模块

remote.dialog.showOpenDialog({
           defaultPath: __dirname,
           buttonLabel: '请选择文件或文件夹',
           title:'文件选择框',
           // properties:['openFile','openDirectory'],
           properties:['openFile','multiSelections'],
           filters:[{
               name:'代码文件',extensions:['js','json','html']
           }]
       }).then((ret)=>{
           console.log(ret)
       }).catch((err)=>{
           console.log(err)
       })

shell 与 iframe

8、shell

打开目录或者 url

9、iframe

替代

消息通知

let option = {
            title: '消息通知',
            body: '此为一条消息通知，往周知',
            icon: './msg.png'
        }

        let notification = new window.Notification(option.title, option)
        notification.onclick = (ev)=>{
            console.log(ev)
        }

全局快捷键

   // 注册快捷键
   let register = globalShortcut.register('ctrl + q',(ev)=>{
       console.log(ev)
       console.log('ctrl + q 快捷键注册成功')
   });
// 取消快捷键的注册
globalShortcut.unregister('ctrl + q')
globalShortcut.unregisterAll()

剪切板模块

const {clipboard} = require('electron')

clipboard.writeText('test');
let text = clipboard.readText();

文件操作

const fs = window.require('fs').promises
const path = require('path')

export const readFile = (path) => {
    return fs.readFile(path, 'utf-8')
}

export const writeFile = (path, content) => {
    return fs.writeFile(path, content, 'utf-8')
}

export const renameFile = (path,newPath)=>{
    return fs.rename(path,newPath)
}

export const deleteFile = (path) => {
    return fs.unlink(path)
}

数据持久化

10、electron-store

如果在渲染进程中使用，需要执行 Store.initRenderer()

const Store = require('electron-store')
// 渲染进程使用需要初始化
Store.initRenderer()

const store = new Store()
store.set(key,value)
l