Home-theater-designers
Electron ให้คุณสร้างแอปพลิเคชันเดสก์ท็อปสำหรับ Windows, Mac และ Linux เมื่อคุณสร้างแอปโดยใช้ Electron คุณสามารถดูตัวอย่างและเรียกใช้แอปผ่านหน้าต่างแอปพลิเคชันเดสก์ท็อปได้
คุณสามารถใช้ Electron เพื่อกำหนดค่าแอป Angular ให้เปิดใช้งานบนหน้าต่างเดสก์ท็อป แทนที่จะเป็นเว็บเบราว์เซอร์ปกติ คุณสามารถทำได้โดยใช้ไฟล์ JavaScript ภายในแอปเอง
เมื่อคุณกำหนดค่า Electron แล้ว คุณสามารถพัฒนาต่อได้เหมือนกับที่ทำในแอป Angular ปกติ ส่วนหลักของแอปพลิเคชันจะยังคงเป็นไปตามโครงสร้างเชิงมุมมาตรฐานเดียวกัน
วิธีการติดตั้งอิเลคตรอนเป็นส่วนหนึ่งของแอปพลิเคชันของคุณ
ในการใช้ Electron คุณต้องดาวน์โหลดและติดตั้ง node.js และใช้ npm install เพื่อเพิ่ม Electron ลงในแอปของคุณ
เป็นเจ้าของ windows 10 ดาวน์โหลดฟรี
- ดาวน์โหลดและติดตั้ง node.js . คุณสามารถยืนยันว่าคุณได้ติดตั้งอย่างถูกต้องโดยตรวจสอบเวอร์ชัน:
โหนดยังรวมถึง npm ตัวจัดการแพ็คเกจ JavaScript . คุณสามารถยืนยันว่าคุณได้ติดตั้ง npm โดยการตรวจสอบเวอร์ชัน npm:node -vnpm -v - สร้างแอปพลิเคชัน Angular ใหม่โดยใช้ the ของใหม่ สั่งการ. นี้จะสร้างโฟลเดอร์ที่มีทั้งหมดที่จำเป็น ไฟล์ที่จำเป็นสำหรับโครงการเชิงมุม ในการทำงาน
ng new electron-app - ในโฟลเดอร์รูทของแอปพลิเคชันของคุณ ให้ใช้ npm เพื่อติดตั้ง Electron.
npm install --save-dev electron - สิ่งนี้จะสร้างโฟลเดอร์ใหม่สำหรับอิเล็กตรอนในโฟลเดอร์ node_modules ของแอพ
- คุณยังสามารถติดตั้ง Electron ได้ทั่วโลกบนคอมพิวเตอร์ของคุณ
npm install -g electron
โครงสร้างไฟล์ของแอปพลิเคชันเชิงมุมอิเล็กตรอน
อิเล็กตรอนจะต้องใช้ไฟล์ JavaScript หลักเพื่อสร้างและจัดการหน้าต่างเดสก์ท็อป หน้าต่างนี้จะแสดงเนื้อหาของแอพของคุณภายในนั้น ไฟล์ JavaScript ยังมีเหตุการณ์อื่นๆ ที่อาจเกิดขึ้นได้ เช่น หากผู้ใช้ปิดหน้าต่าง
ขณะรันไทม์ เนื้อหาที่แสดงจะมาจากไฟล์ index.html โดยค่าเริ่มต้น คุณจะพบไฟล์ index.html ภายในไฟล์ src โฟลเดอร์ และเมื่อรันไทม์ สำเนาที่สร้างขึ้นจะถูกสร้างขึ้นโดยอัตโนมัติภายในโฟลเดอร์ dist โฟลเดอร์
เล่นวิดีโอ youtube 2 รายการพร้อมกัน
ไฟล์ index.html มักจะมีลักษณะดังนี้:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> ElectronApp </title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root> </app-root>
</body>
</html> ภายในแท็ก body เป็นแท็ก
วิธีใช้อิเล็กตรอนเพื่อเปิดแอปพลิเคชันเชิงมุมในหน้าต่างเดสก์ท็อป
สร้างไฟล์ main.js และกำหนดค่าให้เปิดเนื้อหาของแอปพลิเคชันภายในหน้าต่างเดสก์ท็อป
- สร้างไฟล์ในรูทของโปรเจ็กต์ชื่อ main.js . ในไฟล์นี้ เริ่มต้น Electron เพื่อให้คุณสามารถใช้เพื่อสร้างหน้าต่างแอปพลิเคชัน
const { app, BrowserWindow } = require('electron'); - สร้างหน้าต่างเดสก์ท็อปใหม่ที่มีความกว้างและความสูงที่แน่นอน โหลดไฟล์ดัชนีเป็นเนื้อหาที่จะแสดงในหน้าต่าง ตรวจสอบให้แน่ใจว่าเส้นทางไปยังไฟล์ดัชนีตรงกับชื่อแอปของคุณ ตัวอย่างเช่น หากคุณตั้งชื่อแอปของคุณว่า 'electron-app' เส้นทางจะเป็น 'dist/electron-app/index.html'.
function createWindow() {
win = new BrowserWindow({width: 800, height: 800});
win.loadFile('dist/electron-app/index.html');
} - เมื่อแอพพร้อม ให้เรียกใช้ฟังก์ชัน createWindow() นี่จะสร้างหน้าต่างแอปพลิเคชันสำหรับแอปของคุณ
app.whenReady().then(() => {ของคุณ
createWindow()
}) - ใน src/index.html ไฟล์ใน ฐาน แท็ก เปลี่ยนแอตทริบิวต์ href เป็น './'.
<base href="./"> - ใน package.json , เพิ่ม หลัก และรวมไฟล์ main.js เป็นค่า นี่จะเป็นจุดเริ่มต้นของแอป เพื่อให้แอปพลิเคชันเรียกใช้ไฟล์ main.js เมื่อเปิดแอป
{
"name": "electron-app",
"version": "0.0.0",
"main" : "main.js",
....
} - ใน .browserslistrc แก้ไขรายการเพื่อลบ iOS Safari เวอร์ชัน 15.2-15.3 ซึ่งจะป้องกันข้อผิดพลาดความเข้ากันได้ไม่ให้แสดงในคอนโซลเมื่อรวบรวม
last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR
not ios_saf 15.2-15.3
not safari 15.2-15.3 - ลบเนื้อหาเริ่มต้นใน src/app/app.component.html ไฟล์. แทนที่ด้วยเนื้อหาใหม่
<div class="content">
<div class="card">
<h2> Home </h2>
<p>
Welcome to my Angular Electron application!
</p>
</div>
</div> - เพิ่มสไตล์ให้กับเนื้อหาใน src/app/app.component.css ไฟล์
.content {
line-height: 2rem;
font-size: 1.2em;
margin: 48px 10%;
font-family: Arial, sans-serif
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
width: 85%;
padding: 16px 48px;
margin: 24px 0px;
background-color: whitesmoke;
font-family: sans-serif;
} - เพิ่มสไตล์โดยรวมให้กับ src/styles.css ไฟล์เพื่อลบระยะขอบและช่องว่างภายในเริ่มต้น
html {
margin: 0;
padding: 0;
}
วิธีเรียกใช้แอปพลิเคชันอิเล็กตรอน
หากต้องการเรียกใช้แอปพลิเคชันของคุณในหน้าต่าง ให้กำหนดค่าคำสั่งในอาร์เรย์สคริปต์ของ package.json จากนั้นเรียกใช้แอปของคุณโดยใช้คำสั่งในเทอร์มินัล
- ใน package.json ภายในอาร์เรย์สคริปต์ ให้เพิ่มคำสั่งเพื่อสร้างแอป Angular และเรียกใช้ Electron ตรวจสอบให้แน่ใจว่าคุณเพิ่มเครื่องหมายจุลภาคหลังรายการก่อนหน้าในอาร์เรย์ Scripts.
"scripts": {
...
"electron": "ng build && electron ."
}, - ในการรันแอปพลิเคชัน Angular ใหม่ในหน้าต่างเดสก์ท็อป ให้รันคำสั่งต่อไปนี้ในบรรทัดคำสั่ง ในโฟลเดอร์รูทของโปรเจ็กต์ของคุณ:
npm run electron - รอให้แอปพลิเคชันของคุณคอมไพล์ เมื่อเสร็จแล้ว แทนที่จะเปิดแอป Angular ในเว็บเบราว์เซอร์ หน้าต่างเดสก์ท็อปจะเปิดขึ้นแทน หน้าต่างเดสก์ท็อปจะแสดงเนื้อหาของแอป Angular ของคุณ
- หากคุณยังต้องการดูแอปพลิเคชันของคุณในเว็บเบราว์เซอร์ คุณยังคงสามารถเรียกใช้คำสั่ง ng serve.
ng serve - หากคุณกำลังใช้ ของการให้บริการ คำสั่ง เนื้อหาของแอพของคุณจะยังคงแสดงในเว็บเบราว์เซอร์ที่ localhost:4200.
การสร้างแอปพลิเคชันเดสก์ท็อปด้วยอิเล็กตรอน
คุณสามารถใช้ Electron เพื่อสร้างแอปพลิเคชันเดสก์ท็อปบน Windows, Mac และ Linux โดยค่าเริ่มต้น คุณสามารถทดสอบแอปพลิเคชัน Angular โดยใช้เว็บเบราว์เซอร์ผ่านคำสั่ง ng serve คุณสามารถกำหนดค่าแอปพลิเคชัน Angular ของคุณให้เปิดในหน้าต่างเดสก์ท็อปแทนเว็บเบราว์เซอร์ได้
คุณสามารถทำได้โดยใช้ไฟล์ JavaScript คุณจะต้องกำหนดค่าไฟล์ index.html และ package.json ด้วย แอปพลิเคชันโดยรวมจะยังคงใช้โครงสร้างเดียวกันกับแอปพลิเคชันเชิงมุมทั่วไป
วิธีถ่ายโอนไฟล์ขนาดใหญ่จากพีซีไปยังพีซีผ่านอินเทอร์เน็ต
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีสร้างแอปพลิเคชันบนเดสก์ท็อป คุณยังสามารถสำรวจแอป Windows Forms ได้อีกด้วย แอป Windows Forms ให้คุณคลิกและลากองค์ประกอบ UI ลงบนผืนผ้าใบ ในขณะที่เพิ่มตรรกะการเข้ารหัสลงในไฟล์ C#