Trong hướng dẫn này, bạn sẽ học cách xây dựng GUI cho các ứng dụng Python của mình bằng cách sử dụng các công nghệ điện tử và web, tức là HTML, CSS và JavaScript-điều này có nghĩa là tận dụng các tiến bộ mới nhất trong phát triển web trước để xây dựng các ứng dụng máy tính để bàn nhưng cũng tận dụng lợi thế của Python và các thư viện mạnh mẽ mà nó phải dễ dàng thực hiện các yêu cầu nâng cao. Bạn có thể tìm thấy mã trong kho github này. Tạo ứng dụng điện tử đầu tiên của bạnBây giờ chúng ta hãy xem cách tạo ứng dụng điện tử đầu tiên của chúng tôi. Bạn có thể phát triển các ứng dụng điện tử giống như bạn thường phát triển ứng dụng Node.js. Trước tiên bạn cần bắt đầu với việc tạo hoặc tạo tệp npm install --save-dev electron
2 bên trong thư mục của dự án bằng lệnh sau:Điều này sẽ tạo một tệp npm install --save-dev electron
2 cơ bản với các giá trị mặc định:{
"name": "electronjs-python",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Tiếp theo, tạo hai tệp npm install --save-dev electron
4 và npm install --save-dev electron
5 bên trong thư mục của dự án.Tệp npm install --save-dev electron
5 là tập lệnh npm install --save-dev electron
7, vì vậy chúng tôi cần thay đổi thuộc tính chính của tệp npm install --save-dev electron
2 của chúng tôi thành npm install --save-dev electron
5 thay vì tệp "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
0 mặc định (không cần phải có ưu tiên):Tiếp theo, bạn cần cài đặt "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
1 từ NPM:npm install --save-dev electron
Điều này sẽ cài đặt "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
1 cục bộ; Bạn cũng có thể làm theo hướng dẫn chính thức để biết thêm các tùy chọn có sẵn để cài đặt "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
1.
Tiếp theo, thêm tập lệnh "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
4 để chạy tệp npm install --save-dev electron
5. Mở tệp npm install --save-dev electron
2 và thêm: "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
Bây giờ, hãy thêm mã chạy cửa sổ GUI trong quy trình chính. Mở tệp npm install --save-dev electron
5 và thêm, dòng đầu tiên để nhập mô -đun "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
1:const {app, BrowserWindow} = require('electron')
Tiếp theo, thêm chức năng sau đây tạo ra một thể hiện là "scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
9 và tải tệp npm install --save-dev electron
4: function createWindow () {
window = new BrowserWindow({width: 800, height: 600})
window.loadFile('index.html')
}
Khi ứng dụng đã sẵn sàng, hãy chạy phương thức const {app, BrowserWindow} = require('electron')
1: app.on('ready', createWindow)
Chúng tôi cũng có thể xử lý các sự kiện khác nhau như khi đóng tất cả các cửa sổ bằng cách sử dụng: app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
Cuối cùng, hãy thêm nội dung sau vào tệp npm install --save-dev electron
4:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello Python from Electron!</title>
</head>
<body>
<h2>Hello Python!</h2>
</body>
</html>
Bây giờ, bạn có thể chạy ứng dụng bằng cách sử dụng: Đây là ảnh chụp màn hình của ứng dụng đang chạy: Chạy kịch bản python từ electronVì chúng tôi muốn phát triển ứng dụng của mình bằng Python và sử dụng Electron để xây dựng Frontend GUI với web; Chúng ta cần có khả năng giao tiếp giữa Python và Electron. Hãy xem cách chạy tập lệnh Python cơ bản từ electron. Đầu tiên, hãy tạo tệp const {app, BrowserWindow} = require('electron')
3 và thêm mã Python sau đây in Hello từ Python! Theo đầu ra tiêu chuẩn:import sys
print('Hello from Python!')
sys.stdout.flush()
Trong tệp npm install --save-dev electron
5 của bạn, hãy chạy mã sau để sinh ra quy trình Python và thực thi tập lệnh const {app, BrowserWindow} = require('electron')
3:function createWindow () {
/*...*/
var python = require('child_process').spawn('python', ['./hello.py']);
python.stdout.on('data',function(data){
console.log("data: ",data.toString('utf8'));
});
}
Sử dụng const {app, BrowserWindow} = require('electron')
6 để giao tiếp giữa Python và Node.js/ElectronMột cách tốt hơn để giao tiếp với Node.js/Electron và Python là thông qua việc sử dụng gói const {app, BrowserWindow} = require('electron')
6.const {app, BrowserWindow} = require('electron')
6 cung cấp một cách dễ dàng để chạy các tập lệnh Python từ Node.js với giao tiếp giữa các quá trình cơ bản và hiệu quả và xử lý lỗi tốt hơn.Sử dụng const {app, BrowserWindow} = require('electron')
6, bạn có thể:- SPAWN PYTHON SCRIPT trong một quá trình trẻ em;
- chuyển đổi giữa văn bản, JSON và chế độ nhị phân;
- sử dụng trình phân tích cú pháp và định dạng tùy chỉnh;
- thực hiện chuyển dữ liệu thông qua các luồng
function createWindow () {
window = new BrowserWindow({width: 800, height: 600})
window.loadFile('index.html')
}
0 và function createWindow () {
window = new BrowserWindow({width: 800, height: 600})
window.loadFile('index.html')
}
1; - Nhận dấu vết ngăn xếp khi một lỗi được ném.
Quay trở lại thiết bị đầu cuối của bạn, đảm bảo bạn đang ở trong thư mục gốc của dự án và chạy lệnh sau để cài đặt const {app, BrowserWindow} = require('electron')
6 từ NPM:npm install --save-dev electron
0Sau đó, bạn có thể chỉ cần chạy vỏ Python bằng cách sử dụng: npm install --save-dev electron
1Liên kếtTrong hướng dẫn này, chúng tôi đã thấy cách sử dụng electron và python để xây dựng một ứng dụng máy tính để bàn đơn giản. Chúng tôi cũng đã thấy cách sử dụng mô -đun const {app, BrowserWindow} = require('electron')
6 để chạy vỏ Python từ ứng dụng Node.js/Electron và giao tiếp giữa electron và Python.
| 
