【项目实战】开发 云笔记本应用 React+Electron(4)

94 阅读1分钟

创建窗口  BrowserWindow

先添加一下 nodemon 避免每次修改重启 服务

我已经安装 暂时不谈  安装就在图中 

image.png

更改一下 启动命令 

image.png 更改内容后服务重启 说明 ok 

image.png

清空 main.js 写窗口

image.png

  • 代码参考
const {app, BrowserWindow}  = require('electron')
const isDev = require('electron-is-dev')
let mainWindow 

app.on('ready', function(){
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 768,
        webPreferences: {
            nodeIntegration: true,
        }
    })
    const urlLocation = isDev ? 'http://localhost:3000' : 'dummyurl'
    mainWindow.loadURL(urlLocation)
})

敲完 之后 效果 这样 

image.png

再加一个 子窗口 添加 Modal 效果

image.png

看一下 效果 

image.png

  • good good 

渲染进程中可写 DOM/node 操作

image.png

效果展示

image.png nice nice !