手动创建electron项目实现简易的记事本

1. 下载全局安装node：

2. 下载全局安装electron：npm install -g electron。

3. 创建项目my-electron-note：

4. 在项目my-electron-note下创建src，index.html，main.js文件，然后npm init 生成package.json文件：

     4.1 配置package.json的启动指令：npm run start。

"start":"electron ."

     4.2 主进程main.js：

const {app,BrowserWindow}=require("electron");
const path=require('path');
let win=null;
function createBrowser(){
    win=new BrowserWindow({
        width:600,
        height:600,
        webPreferences:{
            nodeIntegration:true
        }
    })
    win.loadFile(path.join(__dirname,"/index.html"));
    require("./src/ipcMain/menu.js")
    // win.webContents.openDevTools();
    win.on("closed",()=>{
        win=null;
    })
}

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

     4.3 my-electron-note/src/ipcMain/menu.js：

const {Menu,BrowserWindow }=require("electron");
let template=[
    {
        label: '文件(F)',
        submenu:[
            {
                label: '新建(N)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','new');  
                }
            },{
                label: '打开(O)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','open');  
                }
            },{
                label: '保存(S)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','save');  
                }
            },{
                label: '另存为(A)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','saveOther');  
                }
            },{ type: 'separator' },{
                label: '打印(P)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','print');  
                }
            },{ type: 'separator' },{
                label: '退出(X)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','quit');  
                }
            }
        ]
    }, {
        label: '编辑(E)',
        submenu:[
           {
                label: '剪切(O)',
                role: 'cut',   
            },{
                label: '复制(S)',
                role: 'copy' ,              
            },{
                label: '粘贴(A)',
                role: 'paste',            
            },{
                label: '删除(L)',
                click:()=>{
                    BrowserWindow.getFocusedWindow().webContents.send('action','delete');  
                }           
            },{ type: 'separator' },{
                label: '全选(A)',
                role: 'selectAll'
            }
        ]
    }, {
        label: '操作(O)',
        submenu:[
            {
                label: '撤回',
                role: 'undo'
            },{
                label: '前进',
                role: 'redo'
            }
        ]
    },{
        label: '重载',
        role:"reload"
    }
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

     4.4 my-electron-note/src/ipcRenderer/ipcRenderer.js：

const electron=require("electron");
const ipcRenderer=electron.ipcRenderer;
const dialog=electron.remote.dialog;
const BrowserWindow=electron.remote.BrowserWindow;
const app=electron.remote.app;
const fs=require('fs');

let textarea=document.querySelector("#textarea");

ipcRenderer.on("action",(err,data)=>{
    switch(data){
        case "new":
            newFile();
            break; 
        case "open":
            openFile();
            break;
        case "save":
            saveFile();
            break;
        case "saveOther":
            saveOtherFile();
            break;
        case "print":
            printFile();
            break;
        case "quit":
            quitFile();
            break;
        case "delete":
            deleteFile()
            break;
    }
})

let isSave=true; //是否保存
let savePath=''; //当前保存路径
let title=document.title;
let tagTitle=" * ";
textarea.addEventListener("input",(e)=>{ //输入框变动时，触发没有保存
    document.title=title+tagTitle;
    isSave=false;
})
  
function dialogShowMessageBox(options){//{message,buttons=['ok','no'],type="info",title="electron简易记事本",sureCallback=null,cancelCallback=null}
    dialog.showMessageBox({
        title:options.title?options.title:"electron简易记事本",
        type:options.type?options.type:"info",
        message:options.message?options.message:"确定保存？",
        buttons:options.buttons?options.buttons:['ok','no']
    }).then(res=>{
        if(res.response===0){
            options.sureCallback?options.sureCallback():false;
        }else{
            options.cancelCallback?options.cancelCallback():false;
        } 
    }) 
}

function dialogShowSaveDialog(options){//{title,defaultPath,filters,successCallback}
    dialog.showSaveDialog({
        title:options.title?options.title:"保存",
        defaultPath:options.defaultPath?optionsdefaultPath:"*.txt",
        filters:options.filters?options.filters:[
            { name: '文档文件', extensions: ['*.txt'] },
            { name: '所有文件', extensions: ['*'] }
        ]
    }).then(res=>{
        options.successCallback?options.successCallback(res):false;
    })    
}

function fsWriteFile(options){//{savePath,text,callback}
    fs.writeFile(options.savePath,options.text,{},(err,data)=>{
        if (err) throw err;
        document.title=title;
        isSave=true;
        options.callback?options.callback(data):false;
    })
}


function newFile(){ //1.新建文件
    if(isSave){
        textarea.value="";
        document.title=title;
    }else{
        if(savePath===""){       
            let options={
                sureCallback:()=>{
                    let params={
                        successCallback:(res)=>{
                            if(res.canceled){return}
                            fsWriteFile({savePath:res.filePath,text:textarea.value,callback:(data)=>{
                                savePath=res.filePath;
                            }})
                        }
                    }
                    dialogShowSaveDialog(params);                  
                },
            }
            dialogShowMessageBox(options);   
        }else{
            let options={
                sureCallback:()=>{
                    fsWriteFile({savePath:savePath,text:textarea.value,callback:(err,data)=>{
                        textarea.value="";
                    }})                
                },
            }
            dialogShowMessageBox(options);         
        }
    } 
}

function openFile(){ //2.打开
    dialog.showOpenDialog({
        properties: ['openFile']
    }).then(res=>{
        if(res.canceled){
            return
        }
        savePath=res.filePaths[0];
        isSave=true;
        fs.readFile(savePath,'utf8',(err, data)=>{
            textarea.value=data;
        })
    })
}

function saveFile(){ //3.保存
    if(savePath===""){
        let options={
            successCallback:(res)=>{
                if(res.canceled){return}
                fsWriteFile({savePath:res.filePath,text:textarea.value,callback:(data)=>{
                    savePath=res.filePath;
                }})
            }
        }
        dialogShowSaveDialog(options)
    }else{
        fsWriteFile({savePath:savePath,text:textarea.value})  
    }  
}

function saveOtherFile(){ //4.另存为
    let options={
        successCallback:(res)=>{
            if(res.canceled){return}
            fsWriteFile({savePath:res.filePath,text:textarea.value,callback:(data)=>{
                savePath=res.filePath;
            }})
        }
    }
    dialogShowSaveDialog(options)
}

function printFile(){  //5. 打印
    BrowserWindow.getFocusedWindow().webContents.print();
}

function quitFile(){ //6.退出
   app.quit() 
}
function deleteFile(){ //7.删除
    textarea.value="";
    document.title=title;
    isSave=true;
}

     4.5 index.html入口文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <title>electron开发简易记事本</title>
	</head>
	<body>
        <textarea  id="textarea"></textarea>
        <script src="./src/ipcRenderer/ipcRenderer.js"></script>
	</body>

</html>