Electron开发实战之04-Hello World

源码 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