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>