Electron学习--初体验

Electron介绍

Electron 是一个可以让我们使用js创建桌面应用程序的框架，将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现跨平台，让我们可以更轻松的书写业务逻辑，而不用担心跨平台的问题。

1. electron的下载和引入

npm install electron --save-dev
npm install electron -g
const {app,BrowserWindow} = require('electron')

2. app的ready事件：main.js

• electorn会自动的触发ready事件
• 在这个事件重化工可以创建electron窗口

app.on('ready', () => {
  createWindow() // 创建窗口的函数调用
})

3. electron应用程序窗口的创建（createWindow函数）

• 引入BrowserWindow
• 通过BrowserWindow函数创建窗口对象
• 对窗口进行配置

win = new BrowserWindow({
  width: 300,
  height: 490,
  // 设置标题
  title：'calculator '
})

4. electron窗口的其他常见操作

• 加载其他指定的页面

win.loadURL(path.join(__dirname,'./views/index.html')) // 使用了path模块生成路径

• 开启调试工具

win.webContents.openDevTools()

• 添加关闭窗口事件

win.on('close', () => {
  // 实现关窗口之后的操作
  win = null
  // 关闭主窗口的时候同时也关闭整个应用程序
  app.quit()
})

5. electron应用程序的启动

• electron main.js
• electron . 会自动找到当前文件下的main.js
• 添加package.json的script配置：“start”: “electron main.js”,之后使用npm run start启动

6. 添加应用程序的菜单项

[1] 添加菜单项的方法：menu.buildFromTemplate(菜单项模版)
[2]创建菜单项模版

• label：菜单项文本设置
• click：单击事件，指定事件处理函数
• role：指定菜单项的角色
• accelerator: 触发当前菜单项的快捷键
• 设置子菜单项：通过submenu设置

let template = [
    {
        label:'格式',
        submenu:[
            {
               label:'颜色' ,
                accelerator:(function(){
                    // 判断系统的类型
                    if(process.platform =='darwin'){
                        return 'command + shift + c'
                    }else{
                        return 'control + shift + c'
                    }
                })(),
               click:function(){
                    hm_setColor()
               }
            },
            {
                label:'字体',
                accelerator:'F10',
                click:function(menuItem, win, event){
                    win.webContents.send('default')
                }
            }
        ]
    }
]

• [3] 添加菜单到应用程序：

Menu.setApplicationMenu(menu)

先总结到这儿吧~