使用 Angular 和 Electron 创建跨平台桌面应用
阅读：90
点赞：0
一. 简介
本文将介绍如何通过 Electron 框架将现有的 Angular 应用转换为桌面应用。Electron 允许使用 JavaScript、HTML 和 CSS 构建跨平台的桌面应用，它基于 Node.js 和 Chromium，支持 macOS、Windows 和 Linux 平台。我们将通过一个计算器应用为例，逐步展示如何将 Angular 应用转为桌面应用。
二. 创建 Angular 应用
1. 使用 Angular CLI 创建新应用
首先，使用 Angular CLI 创建一个新的 Angular 应用，命令如下：
ng new desktop-calculator
该命令将在项目目录下创建一个名为 desktop-calculator 的新 Angular 应用。
2. 编写应用代码
接下来，我们将创建一个简单的计算器应用。代码的 HTML 和 TypeScript 部分如下。
app.component.html
<div class="container">
<!-- Jumbotron 样式容器，用于包含计算器主体 -->
<div class="jumbotron col-sm-4 p-2 m-0 bg-inverse mx-auto" style="border: 1px solid lightgray;border-radius: 2%;">
<!-- 应用标题 -->
<h1 class="text-center">Angular Calculator</h1>
<!-- 输入显示区域 -->
<label style="font-weight: bolder;">Input</label>
<div class="input-group input-group-sm col-sm-12 m-0 p-0">
<div class="col-sm-12 form-control text-lg-right" type="text">{{input}}</div>
</div>
<!-- 结果显示区域 -->
<label style="font-weight: bolder;">Result</label>
<div class="input-group input-group-sm col-sm-12 m-0 p-0">
<div class="form-control text-sm-right" type="text">{{result}}</div>
</div>
<!-- 第一排按钮：清空、删除和除法 -->
<div class="col-sm-12 p-1 m-0">
<button class="btn btn-info col-sm-6" type="button" (click)="allClear()">C</button>
<button class="btn btn-warning col-sm-3" type="button" (click)="clear()">x</button>
<button class="btn btn-secondary col-sm-3" type="button" (click)="pressOperator('/')">/</button>
</div>
<!-- 数字按钮 7、8、9 和乘法 -->
<div class="col-sm-12 p-1 m-0">
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('7')">7</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('8')">8</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('9')">9</button>
<button class="btn btn-secondary col-sm-3 p-1" type="button" (click)="pressOperator('*')">X</button>
</div>
<!-- 数字按钮 4、5、6 和减法 -->
<div class="col-sm-12 p-1 m-0">
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('4')">4</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('5')">5</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('6')">6</button>
<button class="btn btn-secondary col-sm-3 p-1" type="button" (click)="pressOperator('-')">-</button>
</div>
<!-- 数字按钮 1、2、3 和加法 -->
<div class="col-sm-12 p-1 m-0">
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('1')">1</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('2')">2</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('3')">3</button>
<button class="btn btn-secondary col-sm-3 p-1" type="button" (click)="pressOperator('+')">+</button>
</div>
<!-- 小数点、数字 0 和等号 -->
<div class="col-sm-12 p-1 m-0">
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('.')">.</button>
<button class="btn btn-outline-secondary col-sm-3 p-1" type="button" (click)="clickNum('0')">0</button>
<button class="btn btn-success col-sm-6 p-1" type="button" (click)="getAnswer()">=</button>
</div>
</div>
</div>
代码说明：
-
app.component.html文件负责构建计算器的用户界面，包含输入框、显示结果的区域和按钮。 -
每个按钮点击时调用相关的 Angular 方法，处理数字输入、运算符输入、清空等操作。
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
// 用于存储用户的输入
input: string = '';
// 用于存储计算结果
result: string = '';
// 点击数字时执行，处理用户输入的数字
clickNum(num: string) {
// 不允许多次输入小数点
if (num == ".") {
if (this.input != "") {
const lastNum = this.getLastOperand();
if (lastNum.lastIndexOf(".") >= 0) return;
}
}
// 防止在输入的开头直接输入“0”
if (num == "0") {
if (this.input == "") {
return;
}
const PrevKey = this.input[this.input.length - 1];
if (PrevKey === '/' || PrevKey === '*' || PrevKey === '-' || PrevKey === '+') {
return;
}
}
// 更新输入内容
this.input = this.input + num;
// 实时计算结果
this.calcAnswer();
}
// 获取最后一个操作数，用于判断是否已经输入小数点
getLastOperand() {
let pos: number;
pos = this.input.toString().lastIndexOf("+");
if (this.input.toString().lastIndexOf("-") > pos) pos = this.input.lastIndexOf("-");
if (this.input.toString().lastIndexOf("*") > pos) pos = this.input.lastIndexOf("*");
if (this.input.toString().lastIndexOf("/") > pos) pos = this.input.lastIndexOf("/");
return this.input.substr(pos + 1);
}
// 点击运算符时执行，确保不会连续输入运算符
pressOperator(op: string) {
const lastKey = this.input[this.input.length - 1];
if (lastKey === '/' || lastKey === '*' || lastKey === '-' || lastKey === '+') {
return;
}
this.input = this.input + op;
this.calcAnswer();
}
// 清除最后一个字符
clear() {
if (this.input != "") {
this.input = this.input.substr(0, this.input.length - 1);
}
}
// 清除所有输入和结果
allClear() {
this.result = '';
this.input = '';
}
// 计算结果
calcAnswer() {
let formula = this.input;
let lastKey = formula[formula.length - 1];
// 移除末尾的多余小数点
if (lastKey === '.') {
formula = formula.substr(0, formula.length - 1);
}
lastKey = formula[formula.length - 1];
// 移除末尾的无效运算符
if (lastKey === '/' || lastKey === '*' || lastKey === '-' || lastKey === '+' || lastKey === '.') {
formula = formula.substr(0, formula.length - 1);
}
// 使用 eval 计算表达式的值
this.result = eval(formula);
}
// 获取最终结果，并将结果显示在输入框中
getAnswer() {
this.calcAnswer();
this.input = this.result;
if (this.input == "0") this.input = "";
}
}
代码说明：
-
clickNum()方法处理数字输入，并确保不允许连续输入无效的字符。 -
pressOperator()方法处理运算符输入，确保运算符不会连续输入。 -
clear()和 `
allClear()` 方法分别用于删除最后一个字符和清空所有输入。
-
calcAnswer()使用eval()函数计算当前输入的表达式结果，并实时显示。 -
getAnswer()方法用于在用户点击等号后，将最终结果显示出来。
三. 使用 Electron 打包 Angular 应用
1. 安装 Electron 和依赖
在 Angular 项目根目录下，运行以下命令安装 Electron 及相关依赖：
npm install electron electron-packager --save-dev
2. 创建 Electron 主进程文件
在项目根目录下创建一个名为 main.js 的文件，用于配置 Electron 的主进程：
const { app, BrowserWindow } = require('electron');
const path = require('path');
// 创建一个新的窗口
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
// 加载 Angular 应用的 index.html 文件
win.loadFile(path.join(__dirname, 'dist/desktop-calculator/index.html'));
// 当窗口关闭时将引用清除
win.on('closed', () => {
win = null;
});
}
// 当 Electron 准备好时创建窗口
app.on('ready', createWindow);
// 当所有窗口关闭时退出应用
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// 当应用被重新激活时，重新创建窗口
app.on('activate', () => {
if (win === null) {
createWindow();
}
});
代码说明：
-
该文件配置了 Electron 的主进程，定义了窗口大小及加载的 HTML 文件。 -
app.on('ready', createWindow)监听 Electron 应用准备就绪的事件，并调用createWindow()创建应用窗口。 -
当所有窗口关闭时， app.on('window-all-closed')退出应用，但在 macOS 上应用会保持活动状态。
3. 更新 package.json
最后，更新 package.json 文件以包含 Electron 启动命令：
{
"main": "main.js",
"scripts": {
"electron": "electron ."
}
}
4. 打包应用
运行以下命令来启动 Electron 应用：
npm run electron
四. 结论
通过以上步骤，我们成功将一个简单的 Angular 计算器应用打包为桌面应用。