是時(shí)候啟動(dòng)我們經(jīng)典的Hello World儀式了!
讓我們添加幾個(gè)文件夾及文件,完成后項(xiàng)目結(jié)構(gòu)差不多如下:
j-step
│
└───node_modules
│
└───src
│ │
│ └───main
│ │ │ index.js
│ │
│ └───renderer
│ │ index.js
│
│ .gitignore
│ package.json
│ README.md
│ yarn.lock
ps: main: 主進(jìn)程; renderer: 渲染進(jìn)程;
- main/index.js
// app: 控制你的應(yīng)用程序的事件生命周期
// BrowserWindow: 創(chuàng)建和控制瀏覽器窗口
import { app, BrowserWindow } from 'electron'
// 保持窗口對(duì)象的全局引用,如果沒(méi)有,
// 則當(dāng)JavaScript對(duì)象被垃圾回收時(shí),窗口將自動(dòng)關(guān)閉
let mainWindow = null
const createMainWindow = () => {
// 創(chuàng)建瀏覽器窗口
const win = new BrowserWindow()
win.loadURL(`http://localhost:${ process.env.ELECTRON_WEBPACK_WDS_PORT}`)
return win
}
// Electron 會(huì)在初始化后并
// 準(zhǔn)備創(chuàng)建瀏覽器窗口時(shí),調(diào)用這個(gè)函數(shù)。
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.on('ready', () => {
mainWindow = createMainWindow()
})
- renderer/index.js
document.body.innerText = 'Hello World'
- bash
yarn dev
看!程序跑起來(lái)了,慶祝一下!
上一節(jié) Electron開(kāi)發(fā)實(shí)戰(zhàn)之03-開(kāi)發(fā)環(huán)境
目錄
下一節(jié) Electron開(kāi)發(fā)實(shí)戰(zhàn)之05-build