Electron开发实战之04-Hello World

来源:简书 分类: 文章浏览史 发布时间:2021-09-08 15:24:35 最后更新:2021-09-08 浏览:349
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2021-09-08 15:24:35

源码 j源码 j-step-c4相关视频

是时候启动我们经典的Hello World仪式了!
让我们添加几个文件夹及文件,完成后项目结构差不多如下:

j-step
│
└───node_modules
│
└───src
│   │   
│   └───main
│   │   │   index.js
│   │
│   └───renderer
│       │   index.js
│ 
│   .gitignore
│   package.json 
│   README.md
│   yarn.lock

ps: main: 主进程; renderer: 渲染进程;

  • main/index.js

// app: 控制你的应用程序的事件生命周期
// BrowserWindow: 创建和控制浏览器窗口
import { app, BrowserWindow } from 'electron'

// 保持窗口对象的全局引用,如果没有,
// 则当JavaScript对象被垃圾回收时,窗口将自动关闭
let mainWindow = null

const createMainWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow()
  win.loadURL(`http://localhost:${ process.env.ELECTRON_WEBPACK_WDS_PORT}`)
  return win
}

// Electron 会在初始化后并
// 准备创建浏览器窗口时,调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', () => {
  mainWindow = createMainWindow()
})

  • renderer/index.js

document.body.innerText = 'Hello World'

  • bash
yarn dev

看!程序跑起来了,庆祝一下!

上一节 Electron开发实战之03-开发环境
目录
下一节 Electron开发实战之05-build

php技术微信