electron 环境搭建

node.js环境不多说，

electron 环境

npm install electron -g 全局安装

++++++++++++++++++++

 

建议 降版本  2-3版本之间；

手动搭建

1. 项目包  （文件夹） electrondemo

2.index.html,main.js

3.npm init 加载package.json文件

4.main.js 见下图

============================================

electron-forge 快速安装

electrom 4.0 版本现在会报 找不到node.js 的_fs 包

 

npm insatall electron-forge -g

全局安装脚手架 electron-forge

构建项目

electron-forge init electron-demo

启动项目 npm start

==================================================================

main.js 解读

electron 项目最开始需要的对象

electron 对象

let electron = require('electron');

app 对象  

控制你的应用程序的事件生命周期。

线程：主线程

let app = electron.app;

BrowserWindow  对象

let BrowserWindow = app.BrowserWindow ；

创建和控制浏览器窗口。

进程：主进程

let mainWindow = null;

app 的render 事件中 mainWindow进行实例化

app.on('render',()=>{

      mainWindow =  new BrowserWindow({

               width: 500,

               height:600

      })

})

如何在最后一个窗口被关闭时退出应用

app.on('window-all-closed',function(){

if(process.platform!=="darwin"){

app.quit();

}

})

事件: 'activate' macOS

返回:

• event Event
• hasVisibleWindows Boolean

当应用被激活时发出。 各种操作都可以触发此事件, 例如首次启动应用程序、尝试在应用程序已运行时或单击应用程序的坞站或任务栏图标时重新激活它。

app.on('activate',function(){

if(winMain === null){

createBrowserWindow();

}

let electron = require('electron');
let app = electron.app;
let BrowserWindow = electron.BrowserWindow;
let winMain = null;
let path = require('path');
function createBrowserWindow() {

    winMain = new BrowserWindow({
        width: 800,
        height: 800
    });

   // winMain.loadFile('index.html');
    winMain.loadURL(path.join('file:',__dirname,'index.html'));
    console.log(path.join('file:',__dirname,'index.html'));
    // 开启调试模式
    winMain.webContents.openDevTools();
    winMain.on('closed',function(){
        winMain = null;
    })

}
app.on('ready',createBrowserWindow);

app.on('window-all-closed',function(){
    if(process.platform!=="darwin"){
        app.quit();
    }
})

app.on('activate',function(){
    
    if(winMain === null){
        createBrowserWindow();
    }
})

})