angular桌面应用开发_使用angular构建高性能的本机和跨平台桌面应用程序

最新推荐文章于 2024-09-08 08:05:12 发布

郝ren

最新推荐文章于 2024-09-08 08:05:12 发布

阅读量1.3k

点赞数 2

文章标签： python qt java

原文链接：https://medium.com/@irustm/build-performant-native-and-cross-platform-desktop-applications-with-angular-d9d7e580bc6d

版权

本文介绍了如何利用Angular框架开发高性能、跨平台的桌面应用程序，让开发者能够创建本机应用的同时，享受到Angular带来的强大功能和灵活性。

摘要由CSDN通过智能技术生成

angular桌面应用开发

As you may already know, Angular is used on many platforms.

您可能已经知道，Angular在许多平台上使用。

Ionic (https://ionicframework.com/)
离子( https://ionicframework.com/ )
NativeScript (https://www.nativescript.org/)
NativeScript( https://www.nativescript.org/ )
Universal (https://github.com/angular/universal)
通用( https://github.com/angular/universal )
Platform-terminal, console-app (https://github.com/Tibing/platform-terminal)
Platform-terminal，console-app( https://github.com/Tibing/platform-terminal )

And, of course, there’s the PC version, but now it’s not about Electron.

而且，当然有PC版本，但现在不关乎Electron。

You can find a lot of ways to create a desktop app using the templates. For example, JavaFX, Qt, WPF. All of them are cross-platform except for the last one.

您可以找到许多使用模板创建桌面应用程序的方法。例如，JavaFX，Qt，WPF。除了最后一个，所有这些都是跨平台的。

What will happen if we use the familiar framework to make a native app? So did I.

如果我们使用熟悉的框架制作本机应用程序，将会发生什么？我也是。

I just want to prove that Angular can be used for any task by example.

我只想 举例 说明Angular可以用于任何任务 。

First, I looked for what has already been done on Angular.

首先，我寻找了在Angular上已经完成的工作。

libui节点 (libui-node)

A portable lightweight graphical interface library uses the GUI’s native possibilities for each available platform. As an alternative for Electron.

便携式轻量级图形界面库将GUI的本机功能用于每个可用平台。作为电子的替代品。

Simple app, for example:

简单的应用程序，例如：

const win = new libui.UiWindow('Test window', 800, 600, false);

It uses simple binders on libui (libui: a portable GUI library for C). Put it together with the node-gyp, a tool used to compile native extensions for Node.js. The libui-node library includes more than 30 ready-made elements. For the custom decisions, you need to go deeper into the C coding. Besides, this library was written two years ago and since then has never been updated. Maybe the project is so good that there’s no need to change anything. Maybe these 30 elements are enough. Or it’s abandoned.

它在libui(libui：C的可移植GUI库)上使用简单的绑定程序。将其与用于编译Node.js本机扩展的工具node-gyp一起使用。 libui-node库包含30多个现成的元素。对于自定义决策，您需要更深入地进行C编码。此外，该库是两年前编写的，此后从未进行过更新。也许项目太好了，不需要更改任何东西。也许这30个元素就足够了。还是被遗弃了。

The finished app may look like this:

完成的应用程序可能如下所示：

质子和维多 (Proton-native and Vuido)

From now it gets more interesting. Both proton-native and vuido are just like libui-node but used for React and Vue. Appropriate wrappers exist for the libui-node elements. These projects are abandoned despite the good github ratings (9k and 6k). It seems, that nobody uses it. I could only find simple apps. Another apparent problem is that the UI’s customization is not available for libui. Even the author of the project is thinking of rewriting it using Qt.

从现在开始，它变得更加有趣。质子本机和vuido都像libui-node一样，但是用于React和Vue。 libui-node元素存在适当的包装器。尽管github的评分很高(9k和6k)，这些项目还是被放弃了。似乎没有人使用它。我只能找到简单的应用程序。另一个明显的问题是UI的自定义不适用于libui。甚至项目的作者都在考虑使用Qt重写它。

Libui is usually used to make the binders. Some enthusiasts have even put it on PHP

Libui通常用于制造粘合剂。 一些发烧友甚至将其放在 PHP上

The finished app may look like this:

完成的应用程序可能如下所示：

Pretty boring interface without customization. Bad choice.

没有自定义的界面很无聊。不好的选择。

Qt，JS，CSS (Qt, JS, CSS)

I’m sure that you’ve heard about Qt. But the fact that it’s integrated with Javascript is not widely spoken. QML allows declarative construction of user interfaces using property binders. Thereby it expands the ability of existing QML elements. Of course, this Javascript version is more strict than the web one. You can make something like ES5 using QML objects, but you will not have a DOM API.

我确定您已经听说过Qt。但是，它与Javascript集成的事实并未广为人知。 QML允许使用属性绑定器以声明方式构造用户界面。因此，它扩展了现有QML元素的功能。当然，此Javascript版本比网络版本更严格。您可以使用QML对象制作类似ES5的东西，但是您将没有DOM API。

If you use Qt and C++:

如果使用Qt和C ++：

#include <QApplication>
#include <QPushButton>int main(int argc, char *argv[])
{
   QApplication app(argc, argv); // Important   QPushButton hello("Hello world!");   hello.resize(100, 30);
   hello.show();
   return app.exec(); // Important}

And Qml:

和Qml：

Item {
    function factorial(a) {
        a = parseInt(a);
        if (a <= 0)
            return 1;
        else
            return a * factorial(a - 1);
    }
    MouseArea {
        anchors.fill: parent
        onClicked: console.log(factorial(10))
    }
}

QML also has a large system of types, which will be useful for Typescript.

QML也具有大型的types系统，这对于Typescript很有用。

All the elements are easily customized:

所有元素都易于定制：

Reactangle {
   id: redRectId
   width: 50
   color: red  
}

Almost like CSS.

几乎像CSS。

Besides Qt is available for most of the platforms.

此外，Qt适用于大多数平台。

节点JS (NodeJS)

The first result for the search query is node-qt. The project is dead. The last update was about 8 years ago.

搜索查询的第一个结果是node-qt 。该项目已死。最近一次更新是在8年前。

And then you can see NodeGui, an up-to-date project.

然后您可以看到NodeGui，这是一个最新的项目。

NodeGui (NodeGui)

Qt uses the event/message loop for the widget’s events just like other GUI’s libraries. When we call app.exec(), Qt initiates the message loop and blocks it. For one message loop it’s enough. But we want to use both Qt and NodeJs (which has its message loop) that’s why the integration process isn’t so easy. This problem has already been solved. For example, the Electron’s integration with yode. In this case, we create two processes for the main thread and for the renderer. So there’s no need to modify NodeJs or Chromium.

就像其他GUI的库一样，Qt对小部件的事件使用事件/消息循环。当我们调用app.exec()时，Qt启动消息循环并阻止它。一个消息循环就足够了。但是我们要同时使用Qt和NodeJ(具有消息循环)，这就是集成过程不太容易的原因。这个问题已经解决。例如，电子与yode的集成。在这种情况下，我们为主线程和渲染器创建两个进程。因此，无需修改NodeJ或Chromium。

NodeGui has one process for any thread without the necessity to switch between events of different processes. That’s why Nodejs has been forked and some Qt binders modifications have been made. Now you have to run the process not from node main.js but qode main.js. Qode is the npm module in @nodegui/qode. To run the “hello world” program you have to install some extra packages.

NodeGui对于任何线程都有一个进程，而无需在不同进程的事件之间进行切换。这就是为什么Nodejs被派生并进行了一些Qt活页夹修改的原因。现在，您不是从节点main.js，而是从qode main.js运行该过程。 Qode是@ nodegui / qode中的npm模块。要运行“ hello world”程序，您必须安装一些额外的软件包。

Detail info: https://docs.nodegui.org/docs/guides/getting-started

详细信息： https : //docs.nodegui.org/docs/guides/getting-started

Every element in nodegui is a widget by default and joins templates. Nodegui has 2 template types: FlexLayout and QGridLayout.

默认情况下，nodegui中的每个元素都是小部件并连接模板。 Nodegui有2种模板类型：FlexLayout和QGridLayout。

Nodegui中的样式 (Styles in Nodegui)

You can select the style for widget inline or with styleSheet.

您可以内联或使用styleSheet选择小部件的样式。

widget.setInlineStyle(`color: green`)view.setStyleSheet(`#helloLabel {
   color: red;
   padding: 10px;
}#worldLabel {
   color: green;
   padding: 10px;
}#rootView {
   background-color: black;
}`);

Qt supports all the selectors CSS2 by default. ( https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types)

Qt默认支持所有选择器CSS2。 ( https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types )

Also, you can customize the features of the elements’ style. They are described in the Qt documentation and on stackoverflow.

另外，您可以自定义元素样式的功能。它们在Qt文档和stackoverflow中进行了描述。

QPushButton {
    qproperty-iconsize: 20px 20px;
}

The author has already realized React support but it seems that nobody remembers Angular existence.

作者已经意识到React的支持，但似乎没有人记得Angular的存在。

As I told before Angular is available for most of the platforms but not for the desktop. API Angular is well made and constructed. Nodegui realization for Angular is about making the custom platformBrowserDynamic with Renderer and their replacements in the app.

正如我之前所讲的，Angular可用于大多数平台，但不适用于台式机。 API Angular是精心制作和构造的。 Angular的Nodegui实现是关于使用Renderer及其应用替换自定义platformBrowserDynamic。

How does it work?

它是如何工作的？

Let’s begin with main.ts.

让我们从main.ts开始。

The boot process consists of two parts: creating a platform and integrating a module into it.

引导过程包括两部分：创建平台并将模块集成到其中。

platformBrowserDynamic().bootstrapModule(AppModule);

We can create any platform using createPlatformFactory. If we don’t want to use common DOM, we can make an additional scheme of the interaction between the elements while working with the renderer. More details on the view source.

我们可以使用createPlatformFactory创建任何平台。如果我们不想使用公共DOM，则可以在使用渲染器时制定元素之间交互的其他方案。有关视图源的更多详细信息。

In the start module, we describe which component to render first. When creating an element, Angular calls “renderComponent”, associates it with the desired renderer. Everything that Angular will do regarding component rendering (creating elements, setting attributes, subscribing to events, etc.) will go through this renderer. Therefore, we need to replace the RendererFactory.

在启动模块中，我们描述了首先渲染哪个组件。创建元素时，Angular会调用“ renderComponent”，并将其与所需的渲染器关联。 Angular在组件渲染方面所做的一切(创建元素，设置属性，订阅事件等)都将通过此渲染器。因此，我们需要替换RendererFactory。

Let’s look at the createElement method. Using this method we get the tag’s name to create the component. Nodegui has a basic set of components, which I carefully ported and described, including the rendering principle within the framework of Angular. Everything is in the general component directory. Other actions with standard components will also pass through this renderer.

让我们看一下createElement方法。使用此方法，我们获得标签的名称来创建组件。 Nodegui有一组基本的组件，我仔细地移植和描述了这些组件，包括Angular框架中的渲染原理。一切都在常规组件目录中。具有标准组件的其他动作也将通过此渲染器。

To listen to events in the renderer, the name of the event is thrown, and for these components, we use eventListener.

为了在渲染器中侦听事件，将抛出事件的名称，对于这些组件，我们使用eventListener。

listen(target: any,
       eventName: string,
       callback: (event: any) => boolean | void): () => void {  const callbackFunc = (e: NativeEvent) => callback.call(target, e); target.addEventListener(eventName, callbackFunc);return () => target.removeEventListener(eventName, callbackFunc);}

Component events are the same as in Qt, for example, instead of the usual (click)=”clickFunc($event)” you will write (clicked) =" clickFunc($ event) ".

例如，组件事件与Qt中的事件相同，而不是通常的(click)=” clickFunc($ event)”，而是编写(单击)=“ clickFunc($ event)”。

Currently, 16 standard components are available. But if you need to create your custom component, you can use QWidget.

当前，有16个标准组件可用。但是，如果需要创建自定义组件，则可以使用QWidget。

A router was also made to make our application as compatible as possible with Angular.

还制作了一个路由器，以使我们的应用程序与Angular尽可能兼容。

const appRoutes: Routes = [
      { path: 'home', component: HomeComponent },
      { path: 'about', component: AboutComponent }
];// AppModule imports
...
NodeguiRouterModule.forRoot(appRoutes),

量产 (Build to production)

To build a finished application in nodegui use its packer — @nodegui/packer.

要在nodegui中构建完成的应用程序，请使用其打包程序- @nodegui/packer.

npx nodegui-packer — init MyApp

npx nodegui-packer —初始化MyApp

The utility is very simple and consists of 2 teams.

该实用程序非常简单，由2个团队组成。

npx nodegui-packer — pack

npx nodegui-packer —打包

This command will create a packaging folder containing the template. You can change the contents to add an icon, change the name, description and other information of the application, as well as to add the necessary dependencies.

此命令将创建一个包含模板的打包文件夹。您可以更改内容以添加图标，更改应用程序的名称，描述和其他信息，以及添加必要的依赖项。

This command launches the necessary tool for packaging (for example, macdeployqt for mac) and packs the dependencies.

此命令将启动打包所需的工具(例如，mac的macdeployqt)并打包依赖项。