electron

安装electron npm install -g electron

electron官方文档 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
运行指令 npm start
打开调试工具 loginWindow.webContents.openDevTools({mode:'detach'})调试框分离;默认是mainWindow.webContents.openDevTools()

主进程 main.js 是入口文件控制了主进程， 运行在Node.js环境中，执行特殊操作并管理渲染器进程，这就表示渲染进程之间的切换或是关闭都必须由主进程来完成。

app 它控制应用程序的事件生命周期。
BrowserWindow 它创建和管理应用程序 窗口。
ipcMain 当在主进程中使用时，它处理从[渲染器]进程（网页）发送出来的异步和同步信息,当然也有可能从主进程向渲染进程发送消息。

app.isPackaged 如果应用已经打包，返回true ，否则返回false 。
app.disableHardwareAcceleration();//禁用硬件加速

渲染进程 每一个页面都是一个渲染进程

ipcRenderer 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主
进程,也可以接收主进程回复的消息。

//初始化 登录窗口
let home=null;   //渲染进程
function createWindow ( )  {     //arg是接受的参数
//关闭渲染进程 home
if (home && !home.isDestroyed()) {    //isDestroyed 方法判断是否销毁
    home.close();  //清除进程
    home = null;
  }
//创建渲染进程
if (test == null || test.isDestroyed()){
    test=new BrowserWindow({
      width:600,
      height:300,
      frame: true,   //是否保留边框（自定义菜单必须保留）
      show: false,   //初始化创建的时候false 隐藏渲染进程
      transparent: false,  //窗口是否透明.
      resizable: false,  //窗口大小是否可调整。
      maximizable: false, //窗口是否可最大化。
      webPreferences: {
        webviewTag: true,  // 是否启用 [`<webview>` tag]标签. 默认值为 `false`. 为 `< webview>` 配置的
        nodeIntegration: true,   // 开启node模块
        enableRemoteModule: true,  // 开启remote模块
        webSecurity: false,  // 它将禁用同源策略 (通常用来测试网站), 如果此选项不是由开发者设置的，还会把 allowRunningInsecureContent设置为 true. 默认值为 true。
        contextIsolation: false    //禁用上下文隔离
      },
    })
    test.loadURL(`file://${__dirname}/index.html`)    // 加载 index.html(推荐用http协议加载)
    //test.loadFile("index.html") //加载index.html   加载本地文件

// loginWindow.webContents.openDevTools({mode:'detach'});    //调式工具
    test.once("ready-to-show", () => { //当页面已经渲染完成(但是还没有显示) 并且窗口可以被现实时触发  只触发一次
      //初始化窗口默认隐藏了记得打开 这里可以配置初始化一些操作
      test.show();   //显示渲染进程
    });
test.webContents.on('did-finish-load', () => {   //如需初始化进程通讯，在导航完成时触发
      //下面的这行代码要在上面的BrowserWindow加载完成之后调用
      test.webContents.send(事件名,值);
    })
}

app.whenReady().then(() => {    //初始化完成
createWindow();
}

shell 模块提供了集成其他桌面客户端的关联功能.主进程和渲染进程都可以使用
openExternal:以桌面的默认方式打开给定的文件。

const {  shell } = require('electron')

 // 点击打开浏览器
shell.openExternal('https://www.csdn.net/');

//打开word文件  注意：路径分隔符要用/，不要使用\
 shell.openExternal('C:/Users/onion/Desktop/a.doc')

进程通讯

//进程通讯  例一
// 渲染进程中
const ipcRenderer = require('electron').ipcRenderer;  //引入模块
//向主进程发起事件
ipcRenderer.send(事件名, 值);     //值（没有可以省略）
//渲染进程监听推荐写在mounted里  如果在methods里会触发多次
ipcRenderer.on(事件名, (event, arg) => {})

//主进程中通过ipcMain.on() 注册渲染进程发过来的事件
const ipcMain = require('electron')
ipcMain.on(事件名, (event, arg) => {    //arg 接受参数
 //主进程向渲染进程发送消息
  event.sender.send(事件名, 值);  //异步
  // event.reply(事件名, 值);  //同步 请注意, 此方法的同步特性意味着它在完成任务时会阻止其他操作
})

禁用右键

//在主进程中
//win  当前主进程变量
 win.once("ready-to-show", () => {
    preventDragbarContext(win);
  });

// 禁用右键
function preventDragbarContext(win) {
  var WM_INITMENU = 0x116;//278
  win.hookWindowMessage(WM_INITMENU, function (e) {
      win.setEnabled(false);
      setTimeout(() => {
          win.setEnabled(true);
      }, 100);
      return true;
  })
}

所有窗口关闭时 退出程序

//当所有的窗口都被关闭时触发
//app.exit()   此方法直接强制关闭
app.on("window-all-closed", function () {
  if (process.platform !== "darwin") app.quit();
});

点击底部菜单时重新启动窗口

//点击底部菜单时重新启动窗口
 app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });

托盘菜单

//主进程文件main.js中引入的ipcMain.js文件代码：
var { Menu, Tray, BrowserWindow, app } = require('electron');
var path = require('path');
 
// 创建拖盘
//支持png、jpg      win10支持.ico      mac支持.icns
var iconTray = new Tray(path.join(__dirname,'app.ico'));  //logo图标  也可以用绝对路径
 
// 鼠标悬停托盘提示
iconTray.setToolTip('Electron应用');
 
 
// 配置右键菜单
var trayMenu = Menu.buildFromTemplate([
    {
        label: '设置',
        click: function () {
            console.log('setting')
        }
    },
    {
        label: '升级',
        click: function () {
            console.log('update')
        }
    },
    {
        label: '退出',
        click: function () {
            if (process.platform !== 'darwin') {
                app.quit();
            }
        }
    }
]);
// 绑定右键菜单到托盘
iconTray.setContextMenu(trayMenu);
   
 
 
setTimeout(function(){
    var win = BrowserWindow.getFocusedWindow();
    // 点击关闭按钮让应用保存在托盘
    win.on('close', (e) => {
        if (!win.isFocused()) {
            win = null;
        } else {
            // 阻止窗口的关闭事件
            e.preventDefault();  
            win.hide();
        }
    });
})
 
 
// 任务栏图标双击托盘打开应用
iconTray.on('double-click', function () {
    win.show();
});

webview标签 用来嵌入Web页面

//
<webview src="https://www.github.com/"></webview>

右上菜单

//在渲染进程中
const { ipcRenderer, remote } = window.require("electron");
 // 最小化窗口
    toMin () {
      remote.getCurrentWindow().minimize();
    },
    // 最大化和正常切换
    toMax () {
      const browserWindow = remote.getCurrentWindow();
      if (this.isMaxed) {  //默认false
        browserWindow.unmaximize();
      } else {
        browserWindow.maximize();
      }
      this.isMaxed = !this.isMaxed;
    },
    // 关闭窗口  由主进程来完成
    toCloseReady () {
      ipcRenderer.send("closeStuHomeWin", "");
    }