Electron - Xin chào thế giới
Chúng tôi đã tạo ra một package.jsonhồ sơ cho dự án của chúng tôi. Bây giờ chúng ta sẽ tạo ứng dụng máy tính để bàn đầu tiên của mình bằng Electron.
Tạo một file mới có tên gọi main.js . Nhập mã sau vào đó -
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)Tạo một tệp khác, lần này là tệp HTML có tên là index.html . Nhập mã sau vào đó.
<!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>Chạy ứng dụng này bằng lệnh sau:
$ electron ./main.jsMột cửa sổ mới sẽ mở ra. Nó sẽ giống như sau:
Ứng dụng này hoạt động như thế nào?
Chúng tôi đã tạo một tệp chính và một tệp HTML. Tệp chính sử dụng hai mô-đun - ứng dụng và BrowserWindow . Mô-đun ứng dụng được sử dụng để kiểm soát vòng đời sự kiện của ứng dụng của bạn trong khi mô-đun BrowserWindow được sử dụng để tạo và điều khiển các cửa sổ trình duyệt.
Chúng tôi đã xác định một hàm createWindow , nơi chúng tôi đang tạo một BrowserWindow mới và đính kèm một URL vào BrowserWindow này. Đây là tệp HTML được hiển thị và hiển thị cho chúng tôi khi chúng tôi chạy ứng dụng.
Chúng tôi đã sử dụng một quy trình đối tượng Electron gốc trong tệp html của chúng tôi. Đối tượng này được mở rộng từ đối tượng quy trình Node.js và bao gồm tất cảt=its chức năng trong khi thêm nhiều chức năng khác.