正文 

当前位置： 首页 > IT > java教程

浅谈基于web的跨平台桌面应用开发

author author     2023-03-07     407

关键词：

作者：京东物流 王泽知

近些年来，跨平台跨端一直是比较热门的话题，Write once, run anywhere，一直是我们开发者所期望的，跨平台方案的优势十分明显，对于开发者而言，可以做到一次开发，多端复用，一套代码就能够运行在不同设备上，这在很大程度上能够降低研发成本，同时能够在产品效能上做到快速验证和快速上线。如今跨端跨平台的优秀技术方案也比较多，

  • 移动端： React Native，Flutter，Weex；
  • 小程序端： Taro，Uniapp；
  • 桌面端： NW.js，Electron，Flutter for desktop，Tauri，Wails，

今天我们聊聊桌面应用开发。

1 什么是跨平台

泛指编程语言、软件或硬件设备可以在多种操作系统或不同硬件架构的电脑上运作。一般来说，有这几种场景，分别是跨设备平台（如 PC 端和移动端），跨操作系统，（移动端中分Android，IOS，PC端中分 Windows，macOS，Linux），国内的小程序（微信，京东，百度，支付宝，字节跳动等等）

2 跨平台的技术方案

跨平台编程不是一件容易的事情，这是由于在不同平台之间，有许多小而复杂的差异，这都需要考虑周全，现在我们有了成熟的跨平台技术方案，能够减小开发者的开发成本及跨平台的难易程度。

  • NW.js
  • Electron
  • Flutter for Desktop
  • Tauri
  • Wails

浅谈基于Web的跨平台桌面应用开发_跨平台

2.1 NW.js

官网：<​​https://nwjs.io/​​>
GitHub：<​​https://github.com/nwjs/nw.js​​>
语言：Nodejs + 前端任意框架
代表项目：微信小程序 IDE，京东小程序 IDE

NW.js（node-webkit ）是一个基于 Chromium 和 Node.js 的 Web 运行环境，可让你直接在 DOM 中调用 Node.js 模块，并可使用任何现有的 Web 技术来编写本地应用。

浅谈基于Web的跨平台桌面应用开发_nodejs_02

2.2 Electron

官网：<​​https://www.electronjs.org/​​>
GitHub：<​​https://github.com/electron/electron​​>
语言：Nodejs + 前端任意框架
代表项目：VSCode，百度小程序 IDE，京 ME，Facebook Message，

Electron 的前身叫做 Atom-Shell，本来是 GitHub 发布开源编辑器 Atom 时一并发布的副产物，但是后来这个副产物的影响力远远的超过了 Atom 本身，于是便改名为一个独立专案，也就是现在的 Electron。Electron 的本质很简单，就是 Chromium + Node.js 的组合，两者之间透过 IPC 通讯。
类似于 NW.js，表面上，它们似乎非常相似，但是这两个项目有着本质上的区别，使得 Electron 和 NW.js 成为两个完全独立的产品。

  • 应用入口不同，NW.js 主入口是一个 HTML，Electron 中是 JavaScript，可操作性更强
  • Node 集成方式不同，在 NW.js 中网页中的 Node 需要通过给 Chromium 打补丁来实现，Electron 则是通过各个平台的消息循环与 libuv 的循环集成，避免了直接在 Chromium 上做改动
  • 功能，支持的功能数量上有明显的差距，Electron 有着较大的社区及社区活跃度，大量成熟的 npm 功能模块。

浅谈基于Web的跨平台桌面应用开发_nodejs_03

2.3 Tauri

官网：<​​https://tauri.app/​​>
GitHub：<​​https://github.com/tauri-apps/tauri​​>
语言：Rust + 前端任意框架
代表项目：仅有少量开源应用

Tauri 是 2021年 JavaScript 明星项目（ <​​https://risingstars.js.org/2021/zh#section-all​​> ）的最受欢迎项目中排名第5，在 stateofjs 2021 （ <​​https://2021.stateofjs.com/en-US/libraries/mobile-desktop/​​> ）中 满意度和关注度排名第1， 由于 Vite，esbuild，swc，Rome 等工具的大火，让基于 Go、Rust 的高效率构建类工具进入爆发期，加上 Bundleless 的构建体验，让 Rust、Go 成为前端开发者的又一扇门。由于 Tauri 的 Rust 背景，加上构建产物小，内存占用低，还是值得长期关注的。

浅谈基于Web的跨平台桌面应用开发_跨平台_04

题外话：
Rust 前景还是非常不错的，如 Linux内核接纳 Rust，deno采用 Rust，微软拥抱Rust，fuchsia 的 Rust 代码占比超50%，Apple 在底层 all-in rust，连续6年的 stackoverflow 最受欢迎语言。就是学习门槛稍微有点高

浅谈基于Web的跨平台桌面应用开发_javascript_05

2.4 Wails

官网：<​​https://wails.io/​​>
GitHub：<​​https://github.com/wailsapp/wails​​>
语言：Go + 前端任意框架
代表项目：暂无

Wails 是一个可让您使用 Go 和 Web 技术编写桌面应用的项目。
将它看作为 Go 的快并且轻量的 Electron 替代品。 您可以使用 Go 的灵活性和强大功能，结合丰富的现代前端，轻松的构建应用程序。与 Tauri 类似，Windows 上使用的是 Webview2。

浅谈基于Web的跨平台桌面应用开发_nodejs_06

2.5 Flutter for Desktop

官网：<​​https://flutter.dev/multi-platform/desktop​​>
GitHub：<​​https://github.com/flutter/flutter​​>
语言：Dart
代表项目：暂无

从渲染原理看 Flutter 是 skia 自绘性能优于 Electron，但需要考虑下稳定性和生态。

3 跨平台的架构原理

本次我们讨论下用的最多的 Electron 和比较有前景的 Tauri 的架构原理。

浅谈基于Web的跨平台桌面应用开发_API_07

通过 Web 技术写 UI，赋予了底层能力，达到跨平台的能力及体验。

3.1 Chromium 多进程架构

大多数现代 Web 浏览器都为多进程架构，主要有浏览器主进程、渲染进程、插件进程、网络进程、GPU 进程，Chromium 也是如此。

IPC = Inter-Process Communication 进程间通信

浅谈基于Web的跨平台桌面应用开发_跨平台_08

Chromium 是 Chrome 的开源版，同时也是一个浏览器。

  • 主进程的 RenderProcessHost 和渲染进程的 RenderProcess 负责处理 IPC 事件
  • 渲染进程的 RenderView，页面的展示就是在这里基于 Webkit 排版出来的
  • ResourceDispatcher 处理资源请求，当页面需要请求资源时，通过 ResourceDispather 创建一个请求 ID 转发到 IPC，在 Browser 进程中处理后返回

3.2 Electron 架构

浅谈基于Web的跨平台桌面应用开发_Rust_09

  • 在每个进程中暴露了 Native API（Main Native API，Renderer Native API）
  • 引入 Node.js
  • Web 技术实现 UI

3.3 Electron 进程模型

Electron 继承了来自 Chromium 的多进程架构，这使得此框架在架构上非常相似于一个现代的网页浏览器。

为何采用多进程架构？
网页浏览器是个极其复杂的应用程序。 除了显示网页内容的主要能力之外，他们还有许多次要的职责，例如：管理众多窗口 ( 或 标签页 ) 和加载第三方扩展。
在早期，浏览器通常使用单个进程来处理这些功能。 这种模式虽然能减小打开每个标签页的开销，但也同时意味着一个网站的崩溃或无响应会影响到整个浏览器。
为了解决这个问题，Chrome 团队决定让每个标签页在自己的进程中渲染， 从而限制了一个网页上的有误或恶意代码可能导致的对整个应用程序造成的伤害。 然后用单个浏览器进程控制这些标签页进程，以及整个应用程序的生命周期

浅谈基于Web的跨平台桌面应用开发_javascript_10

Electron 也是这样，作为应用开发者，控制着两种类型的进程，主进程和渲染进程。
主进程负责应用程序窗口管理，应用程序的生命周期，原生API等
渲染进程负责UI的展示，这部分我们可以选择任意前端框架 Vue、React、Svelte、Preact

3.4 Tauri 进程模型

Tauri 采用了一种类似 Electron 和大多数现代Web浏览器那样的多进程架构。包括主进程和 WebView进程，单个主进程管理一个或多个 WebView 进程。

浅谈基于Web的跨平台桌面应用开发_nodejs_11

3.5 进程间通信

Electron 的进程通信
渲染器进程 -> 主进程

  • （单向）ipcRenderer.send API 发送消息，然后使用 ipcMain.on API 接收
  • （双向）ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成

4 实战 - 导航启动工具

为了对比 Electron 和 Tauri 差异性，分别用 Electron 和 Tauri 做一个简单的应用，导航启动器，类似 Alfred，Spotlight。

4.1 功能描述

首先描述下这个应用的功能，启动应用后，通过快捷键 Ctrl/Command + K 唤起应用界面 - 一个输入框，在输入框输入关键词 git 会展示 git 相关的系统名称列表，选择后回车即可打开 ​​github.com​​，相当于另类的书签。

4.2 设计思路

浅谈基于Web的跨平台桌面应用开发_javascript_12

4.3 项目结构及实现

这里 Electron 使用的是 Electron React Boilerplate 脚手架，使用 webpack 构建 UI 部分
Tauri 是使用官方的脚手架工具 - create-tauri-app，内置了 Vite，在前端框架上选了 React

浅谈基于Web的跨平台桌面应用开发_javascript_13

这个导航启动器主要涉及的功能点有：

  1. 整个应用不展示关闭，最小化，最大化的按钮及整个菜单栏（menuBar），无边框窗口
  2. 视觉上整个应用是一个输入框，应用窗口的高度是根据网页内容的高度自适应
  3. 注册全局快捷键，显示应用，隐藏应用
  4. 监听按键，并使用默认浏览器打开链接

4.3.1 对于功能点一

Electron 是通过对主窗口初始化时修改配置，frame 设置成 false 可实现无边框窗口

浅谈基于Web的跨平台桌面应用开发_Rust_14

在 Tauri 中，实现无边框窗口有 3 种方式：通过 tauri.conf.json 配置，通过 Tauri 提供的 JS API - ​​@tauri​​-apps/api，通过 Rust 原生修改 window；这里我们选用在 tauri.config.json 中配置

浅谈基于Web的跨平台桌面应用开发_javascript_15

4.3.2 对于功能点二

输入框部分均由 React 实现，主要的差异在窗体根据内容高度动态调整窗体的高度，就是根据 document.body.offsetHeight 的高度去设置 mainWindow 的高度
在 Electron 中，可以在渲染进程中发 IPC 通知主进程去修改，主进程监听到消息后进行高度修改

浅谈基于Web的跨平台桌面应用开发_nodejs_16

在 Tauri 中，相对比较方便，对于常用的功能都封装了 JS API，也就是前面提到的 ​​@tauri​​-apps/api，直接导入方法调用即可

浅谈基于Web的跨平台桌面应用开发_API_17

4.3.3 对于功能点三

注册全局快捷键，控制 mainWindow 的显示和隐藏
在 Electron 中，首先定义 registerGlobalShortcut 方法，在 app 启动后注册快捷键，主要是在主进程中操作。

浅谈基于Web的跨平台桌面应用开发_Rust_18

在 Tauri 中，得益于 JS API 的便利性，在渲染进程中就可以注册，因此只需要在 React 生命周期中执行注册

浅谈基于Web的跨平台桌面应用开发_API_19

4.3.4 对于功能点四

方便演示，我们这里直接对 document.body 进行 onkeydown 监听，上下光标选择对应的选项，回车或点击使用默认浏览器打开对应的链接，这里两者的实现很相似

浅谈基于Web的跨平台桌面应用开发_javascript_20

至此，主要功能已经完成，下一步进入看下如何打包多平台的应用。

4.4 应用打包

Electron 中比较常见的有两种打包，electron-packager 和 electron-builder，electron-builder 的生态更好，我们这里选择 electron-builder。

浅谈基于Web的跨平台桌面应用开发_API_21

Tauri 中则是内置在 cli 的打包方案，执行 yarn tauri build 即可

同一应用对比，相同 React 版本，未使用 UI 框架

浅谈基于Web的跨平台桌面应用开发_跨平台_22

浅谈基于Web的跨平台桌面应用开发_API_23

通过以上数据对比基本与 Tauri 主页上的数值相符，较小的体积，内存占用小。

浅谈基于Web的跨平台桌面应用开发_nodejs_24

4.5 应用更新

两者都有对应的解决方案，具体内容可以看下官方文档，本文不做过多介绍。

5 总结

NW.js 的时代已经过去，考虑 NW.js 的可以优先 Electron。
Tauri 表现不错，前景看好。它解决了 Electron 现有的很多问题，带来了简单便捷的开发体验，也期待 Tauri 的 roadmap 中集成 Deno 作为应用的后端处理，这样就可以继续使用 JavaScript/TypeScrupt 来实现应用后端逻辑，新项目可以考虑使用，但是还有一些问题需要改进以及 Rust 的学习曲线曲折，有一定的学习成本。
Electron 目前仍是最多的选择，得益于自身庞大的社区，丰富的功能及工程实践，性能优化这部分比较考验开发者。

j1001.java原生桌面及web开发浅谈

...it，抽象窗口工具包)是SUN在1996年推出的UI框架。由于需要跨平台，所以AWT只能支持主流平台共有的 查看详情

快速了解electron：新一代基于web的跨平台桌面技术

本文引用了作者“ConardLi”的《用JS开发跨平台桌面应用，从原理到实践》一文部分内容，原文链接：segmentfault.com/a/1190000019426512，感谢原作者的无私分享。1、引言现在开发IM应用动不动就要求多端——即Android端、iOS... 查看详情

浅谈web应用的负载均衡集群高可用(ha)解决方案（转）

...; ——它是Apache软件基金会的一个开放源代码的跨平台的网页服务器，属于老牌的web服务器了，支持基于Ip或者域名的虚拟主机，支持代理服务器，支持安全Socket层(SSL)等等，目前互联网主要使用它做静态资源服务器，... 查看详情

怎么将网页打包成桌面应用（web前端页面

在HTML5的崛起、JavaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在Windows、Linux、Mac、IOS、Android等平台运行，大大降低了程序员的工作量，也使公司的... 查看详情

浅谈低代码平台

什么低代码平台？最近几年低代码平台是一个很火的概念；所谓的低代码平台，笔者的理解是基于现有的平台和技术，只需要少量代码就能快速开发一款应用程序或者系统；开发出来的应用系统也许业务很简... 查看详情

im跨平台技术学习：得物基于electron开发客服im桌面端的技术实践

...文章本文是系列文章中的第7篇，本系列总目录如下：《IM跨平台技术学习(一)：快速了解新一代跨平台桌面技术——Electron》《IM跨平台技术学习(二)：Electron初体验(快速开始、跨进程通信、打包、踩坑等)》《IM跨平台技术学习(三... 查看详情

web前端项目的跨平台桌面客户端打包方案之——cef框架

文章目录1、什么是CEF2、测测你电脑里的CEF3、从0开始的CEF入门实例1、什么是CEFCEF是什么概念ChromiumEmbeddedFramework(CEF)是个基于GoogleChromium项目的开源Webbrowser控件。CEF的目标是为第三方应用提供可嵌入浏览器支持。CEF隔离底层Chromiu... 查看详情

web前端项目的跨平台桌面客户端打包方案之——cef框架

文章目录1、什么是CEF2、测测你电脑里的CEF3、从0开始的CEF入门实例1、什么是CEFCEF是什么概念ChromiumEmbeddedFramework(CEF)是个基于GoogleChromium项目的开源Webbrowser控件。CEF的目标是为第三方应用提供可嵌入浏览器支持。CEF隔离底层Chromiu... 查看详情

技术分享|浅谈调度平台设计

前言关于综合指挥调度系统的设计，其实和一般的管理信息软件开发有些区别，调度系统是一个软硬件一体化的定制化平台，数据来源于GPS设备发送。依赖的技术要包括IM、通信协议解析、地图定位开发、以及常规的... 查看详情

将基于桌面的 MFC C++ 应用程序转换为 Web 应用程序是不是可行

】将基于桌面的MFCC++应用程序转换为Web应用程序是不是可行【英文标题】：IsitfeasibletoconvertadesktopbasedMFCC++applicationtoawebapp将基于桌面的MFCC++应用程序转换为Web应用程序是否可行【发布时间】：2009-01-1114:07:41【问题描述】：我有一... 查看详情

从用 C++ 编写的桌面应用程序过渡到基于 Web 的应用程序

】从用C++编写的桌面应用程序过渡到基于Web的应用程序【英文标题】：TransitioningfromdesktopappwritteninC++toaweb-basedapp【发布时间】：2009-12-1413:16:34【问题描述】：我们有一个用C++编写的成熟的Windows桌面应用程序。应用程序的GUI位于... 查看详情

浅谈openresty

浅谈openresty为什么会有OpenResty？我们都知道Nginx有很多的特性和好处，但是在Nginx上开发成了一个难题，Nginx模块需要用C开发，而且必须符合一系列复杂的规则，最重要的用C开发模块必须要熟悉Nginx的源代码，使得开发者对其望... 查看详情

基于pywebview的桌面小工具开发记录

...转换并输出。工作以来，B/S项目是主要工作内容，其他的基于console的工具、手机端app也有一些，但是GUI的开发还是首次。因为前段时间用pandas做了一些数据处理，非常欣赏pandas这种数据处理、数据分析的能力，思考了下项目中... 查看详情

基于web内核的微信小程序框架实践

跨平台SDK得益与Chromium的架构和跨平台能力，也使得我们小程序框架非常容易移植和集成。多个平台，使用同一份源码SDK可独立使用PC微信集成4.3Windows和Linux平台演示1.集成到Windows微信，从桌面拉起小程序。2.独立的SDKDemo运行在Li... 查看详情

javaweb必备知识笔记

...，而且升级维护只需要服务器端进行，而且易于跨平台，多平台只需要各自平台下的浏览器即可使用。Web应用的跨平台与中国信息化步伐的前进，让各种IT支撑、信息管理系统如雨后春笋般出现 查看详情

移动端跨平台技术总结

...曾经大家以为在手机上可以像桌面那样通过Web技术来实现跨平台开发，却因为性能或其他问题而放弃，不得不针对不同平台开发多个版本。这也违背了跨平台开发的初衷。而ReactNative让跨平台移动端开发在次回到人们的视野中，... 查看详情

基于pwa程序员盒子实现了添加应用程序到桌面的功能(代码片段)

PWA基于通过先进的技术为Web应用带来接近本地应用的使用体验。基于PWA的Web应用从一个Web页面变为一个沉浸式的顶层应用，并且时刻保持着对网络的低依赖性。前言由于Web应用入口严重依赖于浏览器，这一限制大大降低... 查看详情

云无关桌面端基于kubernetes的平台otomi(代码片段)

...s://github.com/redkubes/otomi-coreOtomi是一个开源的、云无关的、基于kubernetes的平台，通过类似桌面的用户界面安全地部署、运行和管理应用程序。Otomi易于安装，具有直观的桌面 查看详情