Điện tử là một khuôn khổ cho phép chúng tôi tạo các ứng dụng máy tính để bàn đa nền tảng. Các ứng dụng được tạo ra bằng cách tạo các ứng dụng web được bao bọc bằng một lớp bao bọc. Trong bài viết này, chúng ta sẽ xem xét kiến ​​trúc và thông báo của một ứng dụng Electron Một ứng dụng điện tử chạy trên một quy trình chính và được kết xuất. Quá trình chính tạo ra GUI. Quá trình kết xuất là quá trình Chromium chạy để hiển thị nội dung. Electron có sức mạnh để sử dụng Nút API để cho phép các hoạt động của hệ điều hành cấp thấp hơn. Quá trình chính tạo ra một trang web với BrowserWindow ví dụ. Cửa sổ trinh duyệt thể hiện chạy trên quy trình kết xuất của chính nó. Khi nào Cửa sổ trinh duyệt cá thể bị hủy, quá trình kết xuất cũng bị chấm dứt. Chúng ta có thể sử dụng ElectronAPI của để thực hiện một số hoạt động.

Ví dụ, chúng tôi sẽ sử dụng Cửa sổ trinh duyệt API để tạo cửa sổ. Của chúng tôi Điện tử dự án có main.js để vẽ cửa sổ:

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new  BrowserWindow ()
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Chúng tôi tạo ra BrowserWindow instance và gọi loadFile để tải một trang web trong cửa sổ.

Chúng ta có thể sử dụng Node.js APIs ngoài Electron APIs.

Ví dụ, chúng ta có thể sử dụng fs bằng cách viết:

const { app, BrowserWindow } = require('electron')
const fs = require('fs')
const text = fs.readFileSync('./foo.txt')

function createWindow() {
  const win = new  BrowserWindow ()
  console.log(text.toString())
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

Chúng tôi đã gọi readFileSync đọc foo.txt và nội dung sẽ hiển thị trong nhật ký bảng điều khiển.

Chúng tôi có thể sử dụng bản địa Node nếu chúng tôi biên dịch chúng dựa trên phiên bản V8 của Node nhị phân được cài đặt trong hệ thống của chúng tôi.

Nếu không, chúng tôi sẽ gặp lỗi do các phiên bản V8 không tương thích.

Chúng tôi có thể sử dụng gói xây dựng lại điện tử để xây dựng các mô-đun gốc của chúng tôi.

Để sử dụng nó, chúng tôi cài đặt gói bằng cách chạy:

npm install --save-dev electron-rebuild

Sau đó, chúng tôi có thể chạy:

 ./node_modules/.bin/electron-rebuild

để xây dựng lại các mô-đun gốc.

Chúng tôi cũng có thể chạy:

 .node_modules.binelectron-rebuild.cmd

trên Windows để làm điều tương tự. Chúng tôi cũng có thể đặt một số biến môi trường để cài đặt trực tiếp các mô-đun NPM. Ví dụ, chúng ta có thể viết:

 export npm_config_target=1.2.3
export npm_config_arch=x64
export npm_config_target_arch=x64
export npm_config_disturl=https://electronjs.org/headers
export npm_config_runtime=electron
export npm_config_build_from_source=true
HOME=~/.electron-gyp npm install

Chúng tôi đặt Electroncủa phiên bản ở dòng đầu tiên.

Kiến trúc được đặt ở dòng thứ 2 và thứ 3

Tiêu đề cho Điện tử được tải xuống bằng cách cài đặt biến môi trường npm_config_disturl

Sau đó, chúng tôi yêu cầu node-pre-gyp xây dựng cho Điện tử và cài đặt tất cả các phụ thuộc trong 3 dòng cuối cùng. Chúng tôi có thể thêm thông báo trong ứng dụng của mình Điện tử bằng cách tạo một cái với Notification người xây dựng. Hàm tạo chỉ có thể được chạy trong quá trình kết xuất, vì vậy chúng ta nên đặt nó vào trang web của mình.

Ví dụ, chúng ta có thể viết:

<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
  <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
  <meta http-equiv="Content-Security-Policy"
    content="script-src 'self' 'unsafe-inline';" />
</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>. 
  <script>
    const notification = new Notification('Title', {
      body: 'hello world'
    }) 

    notification.onclick = () => {
      console.log('Notification clicked')
    }
  </script>
</body>
</html>

Chúng tôi đã tạo thông báo Notification người xây dựng.

Đối số đầu tiên là tiêu đề. Đối tượng thứ 2 là đối tượng có nội dung. Onclick cho phép chúng tôi xử lý các nhấp chuột vào thông báo.

Các thông báo nâng cao hơn như nâng cốc và thông báo xếp hình cũng có sẵn. Chúng tôi có thể biên dịch các mô-đun gốc và sử dụng chúng trong Nút .

Trong bài viết này, chúng tôi đã giải thích các Quy trình chính của Electron – Kiến trúc và Thông báo và Người gửi sử dụng API Electron API Node.js Sử dụng Mô-đun Node Native Thêm Thông báo Kết luận. Đừng ngần ngại cho chúng tôi biết nếu bạn có câu hỏi hoặc nhận xét về bài viết này. Để lại bình luận bên dưới và Upadvice.net sẽ phản hồi trong thời gian sớm nhất.