อิเล็กตรอน - สวัสดีชาวโลก

เราได้สร้างไฟล์ 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 ฟังก์ชันการทำงานในขณะที่เพิ่มอื่น ๆ อีกมากมาย