อิเล็กตรอน - สวัสดีชาวโลก
เราได้สร้างไฟล์ package.jsonไฟล์สำหรับโครงการของเรา ตอนนี้เราจะสร้างแอพเดสก์ท็อปตัวแรกโดยใช้ Electron
สร้างไฟล์ใหม่ที่เรียกว่าmain.js ป้อนรหัสต่อไปนี้ -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)สร้างไฟล์อีกครั้งคราวนี้เป็นไฟล์ HTML เรียกว่าindex.html ป้อนรหัสต่อไปนี้ในนั้น
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>เรียกใช้แอพนี้โดยใช้คำสั่งต่อไปนี้ -
$ electron ./main.jsหน้าต่างใหม่จะเปิดขึ้น จะมีลักษณะดังต่อไปนี้ -
แอพนี้ทำงานอย่างไร
เราสร้างไฟล์หลักและไฟล์ HTML ไฟล์หลักใช้สองโมดูล - แอปและBrowserWindow โมดูลแอปใช้เพื่อควบคุมวงจรชีวิตของแอปพลิเคชันของคุณในขณะที่โมดูล BrowserWindow ใช้ในการสร้างและควบคุมหน้าต่างเบราว์เซอร์
เรากำหนดฟังก์ชันcreateWindowซึ่งเรากำลังสร้าง BrowserWindow ใหม่และแนบ URL เข้ากับ BrowserWindow นี้ นี่คือไฟล์ HTML ที่แสดงและแสดงให้เราเห็นเมื่อเราเรียกใช้แอป
เราได้ใช้กระบวนการอ็อบเจ็กต์ Electron ดั้งเดิมในไฟล์ html ของเรา อ็อบเจ็กต์นี้ขยายจากอ็อบเจ็กต์กระบวนการ Node.js และรวมทั้งหมดของt=its ฟังก์ชันการทำงานในขณะที่เพิ่มอื่น ๆ อีกมากมาย