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

最新推荐文章于 2023-05-21 11:41:29 发布

Ace.三阶斗尊

最新推荐文章于 2023-05-21 11:41:29 发布

阅读量577

点赞数

分类专栏： electron 文章标签： electron 简易记事本

本文链接：https://blog.csdn.net/qq_42231156/article/details/103767149

版权

本文档指导如何手动创建一个基于Electron的简易记事本应用。首先，你需要全局安装Node.js和Electron。接着，创建项目并命名为my-electron-note，配置好项目结构，包括src目录、index.html、main.js。通过npm init生成package.json，并设置启动指令为npm run start。在main.js中处理主进程，同时在menu.js和ipcRenderer.js中处理IPC通信，实现应用的功能。最后，index.html作为应用的入口文件。

摘要由CSDN通过智能技术生成

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)',
                clic