electron

1.局部安装

cnpm install electron  --save-dev

检查是否安装上

npx electron -v    

2.启动

./node_modules/.bin/electron   

全局安装

 cnpm install -g electron

创建index.html

和main.js

var electron =require('electron')
var app=electron.app //引用app
var BrowserWindow=electron.BrowserWindow //窗口引用
var mainWindow=null //声明打开主窗口
app.on('ready',()=>{ //打开窗口事件  
  mainWindow=new  BrowserWindow({width:600,height:600,webPreferences:{nodeIntegration:true,contextIsolation: false}}) //设置窗口大小,//nodeIntegration:启用所有的node模块都可以在这使用
  mainWindow.loadFile('index.html') //加载html页面
  mainWindow.on('closed',()=>{ //关闭窗口事件,防止占用很多内存所以要把mainWindow为null
    mainWindow=null 
  })
})

初始化 配置 npm init --yes

2.remote（打开新窗口）

安装 cnpm install @electron/remote --save 

main.js 配置

require("@electron/remote/main").initialize(); // 初始化

require("@electron/remote/main").enable(mainWindow.webContents);

var electron =require('electron')
var app=electron.app //引用app
var BrowserWindow=electron.BrowserWindow //窗口引用
var mainWindow=null //声明打开主窗口
app.on('ready',()=>{ //打开窗口事件  
  mainWindow=new  BrowserWindow({width:600,height:600,webPreferences:{nodeIntegration:true,contextIsolation: false,enableRemoteModule: true}}) //设置窗口大小,//nodeIntegration:启用所有的node模块都可以在这使用,enableRemoteModule是设置remote的配置
  require("@electron/remote/main").initialize(); // 初始化
  require("@electron/remote/main").enable(mainWindow.webContents);

  mainWindow.loadFile('index2.html') //加载html页面
  mainWindow.on('closed',()=>{ //关闭窗口事件,防止占用很多内存所以要把mainWindow为null
    mainWindow=null 
  })
})

demo.js

const btn=this.document.querySelector('#btn')

const BrowserWindow = require("@electron/remote").BrowserWindow;
window.addEventListener('load',function(){
  btn.onclick=()=>{
    newWin=new BrowserWindow({
      width:500,
      height:500
    })
    newWin.loadFile('blue.html')
    newWin.on('close',()=>{
      newWin=null
    })
  }
})