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)

先總結到這兒吧~