5000字解析：前端五种跨平台技术

不点

前端五种跨平台技术

2020-03-30

来源:

https://developer.finogeeks.com/topic/123/5000%E5%AD%97%E8%A7%A3%E6%9E%90-%E5%89%8D%E7%AB%AF%E4%BA%94%E7%A7%8D%E8%B7%A8%E5%B9%B3%E5%8F%B0%E6%8A%80%E6%9C%AF


本文不涉及到任何代码，只讲概念层面的，结合本人在实际开发过程中的各种体验，对这几种跨平台技术进行一个点评。

跨平台技术的由来

传统的纯原生开发已经不能满足日益增长的业务需求。主要表现在如下两个方面。

• 动态化内容需求增大。当需求发生变化时，纯原生应用需要通过版本升级来更新内容，但应用上架、审核是需要周期的，这个周期对高速变化的互联网时代来说是很难接受的，所以，对应用动态化 (不发版也可以更新应用内容) 的需求就变得迫在眉睫了。
  
• 业务需求变化快，开发成本变大。由于原生开发一般都要维护 Android、iOS 两个开发团队，版本迭代时，无论人力成本还是测试成本都会变大。
  
  

总结一下，纯原生开发主要面临动态化和开发成本两个问题。而针对这两个问题，又诞生了一些跨平台的动态化框架。

跨平台技术简介

针对原生开发面临的问题，人们一直都在努力寻找好的解决方案，然而时至今日，已经存在很多跨平台框架 (注意，本书中所指的“跨平台”若无特殊说明，即特指 Android 和 iOS 两个平台)，根据其原理，主要可分为如下三类。

   1. H5(HTML5)+ 原生 ( Cordova、 Tonic、微信小程序)。
   2. Javascript 开发 + 原生渲染 ( React Native、Weex、快应用)。
   3. 自绘 U+ 原生 ( QT Mobile、 Flutter)。


接下来，我们将逐个来了解这三类框架的原理及优缺点。

1.12 Hybrid 技术简介

H5 + 原生

混合开发

这类框架的主要原理是将 APP 需要动态变动的一部分内容通过 H5 来实现，通过原生的网页加载控件 Webview( Android) 或 WK Webview(iOS) 来加载 (以后若无特殊说明，本书将用 Webview 来统一指代 Android 和 iOS 中的网页加载控件)。这样，H5 部分就可以随时改变而不用发版，动态化需求得到满足 ; 同时，由于 H5 代码只需要一次开发，就能同时在 Android 和 iOS 两个平台上正常运行，这也可以降低开发成本，也就是说，H5 部分的功能越多，开发成本就越小。我们称这种 H5 + 原生的开发模式为混合开发，对于采用混合模式开发的 APP，我们称之为混合应用或 Hybrid APP，如果一个应用的大多数功能都是采用 H5 实现的话，我们称其为 Web APP。
目前混合开发框架的典型代表有 Cordova、 lonic 和微信小程序，值得一提的是，微信小程序目前是在 Webview 中渲染的。并非原生渲染，但将来有可能会采用原生渲染。

混合开发技术点

如之前所述，原生开发可以访问平台的所有功能，而在混合开发中，H5 代码是运行在 Web View 中的， Webview 实质上就是一个浏览器器内核、其 script 依然运行在一个权限受限的沙箱中，所以对大多数系统能力都没有访问权限、如无法访问文件系统、不能使用蓝牙等。所以，对于 H5 不能实现的功能，都需要原生来实现。


而混合框架一般都会在原生代码中预先实现一些访问系统能力的 API，然后暴露给 Webview 以供 Javascript 调用，这样一来， Webview 就成为 Javascript 与原生 AP 之间通信的桥梁，主要负责 Javascript 与原生之间调用消息的传递，而消息的传递必须遵守一个标准的协议，其规定了消息的格式与含义，我们将依赖于 Webview 的、用于在 Javascript 与原生之间通信并实现了某种消息传输协议的工具称为 Webview Javascript Bridge，简称 Jsbridge，它也是混合开发框架的核心。


我所使用的跨平台技术：

• Electron
• React-Native
• Taro
• Cordova
• 快应用
• Flutter(刚学习)
  ...
  排名由前往后，除了 Flutter 没有使用过在商业项目中
  
  

Electron 的核心

Electron 就是把 Node.js 的运行环境和谷歌浏览器内核一起打包了，于是就拥有了 Node.js 和 H5 技术的融合能力，又因为是基于 C++ 编写，于是可以跨平台。Mac、Windows、Linux。


工具类的软件是最复杂的，例如 vscode、word 这些，都是极度复杂的，又因为可以调用 addon、各种脚本插件，原生第三方插件，这个技术简直就是黑科技，至今我也不敢说对它熟悉。但是 APP Store 已经不能上线 Electron 应用了，而且打包签名服务器也经常挂。

特别注意：Electron 开发出来的东西是软件，是一个安装在电脑上的软件！


我的 GitHub 可能有你想要的 Demo 内容：

https://github.com/JinJieTan

要想开发好 Electron，要拥有一名 C++ 人员专门编写插件，一位后端出生的人员操作 sqlite 数据库（数据库升级虽然可以兼容老版本，但是复杂的应用设计得不好数据库就完了），一位前后端都懂并且熟悉调用操作系统插件的全栈工程师开发，这样才能 hold 得住复杂应用。如果你说这样是不是太浪费了，那我觉得你没有开发过复杂的软件，一个好的软件（客户端），要考虑程序反编译（保护）、奔溃守护进程等异常搜集、用户自动升级（差量 or 全量）、本地数据库加密、通信、激活唤醒。。。。太多了，但是大部分前端做的就是后台管理系统，这也是一个悲剧。。。面试造火箭像以前我就做过将微信和 QQ 里面一些插件拿出来经过一些处理用在项目里，至此打开了新世界, 总之 Electron 非常考验技术，是晋升伪全栈工程师最快的路径。
推荐学习指数：五颗星

React-Native

去年爱彼迎把 APP 的技术从 RN 换回了原生，首先它是外企，它可能某种程度上，使用 RN 会比国内有更大的优势，获得更大的支持。就像你使用 Taro，那么你有可能在论坛上找到它的负责人，提出想要的支持，最后它真的支持了（这个是存在的，如果你想认识可以帮你联系，我也在建议身边人使用 Taro）。

回到正题：

难道 RN 死了吗？


JQuery 都没死，它会死吗？当然不会！RN 的生态非常强大，它开发出来的，也是真正的原生应用，它的原理如下：


在 React-native 文件中编写的代码，会在内存中生成虚拟 DOM 对象（其实就是一个 JS 对象），然后再通过 javaScriptCore（IOS 自带，安卓不是，所以 RN 打包后安卓的包比苹果大） 映射成原生控件树。很多 jsBridge 都是基于 javaScriptCore 实现的。


例如：

提示：跨平台不是什么高深的技术，只要搞懂它的运行机制原理，就好开发，定位问题。

那么 RN 有什么缺点呢？例如频繁 setState，可能会造成卡顿（做动画的时候容易掉帧，特别是性能差的手机），但是也是可以使用一些技术优化尽量避免，跟是谁写的有很大关系，还有就是项目变得特别大，跟原生交互特别多，特别复杂的应用，跨平台遇到的问题兼容处理也会越来越多，这也是为什么爱彼迎会换回原生的原因，维护确实比较麻烦，还有版本环境的问题，有可能你升级了以后再也启动不了了。。。


推荐理由：开发快速，生态成熟，使用 React 的 JSX 语法和 FLex 布局快速开发原生应用。
推荐学习指数：四颗星

Taro

小程序跨平台开发，一款可以用 TSX、JSX 和 React 语法开发小程序的框架，内置了一些 UI 组件，还有物料市场，目前看势头很好。还可以集成 React-native, 真正做到一套代码多处运行，不仅能编译成各种平台小程序，还可以是 RN 的应用～ 666 , 还支持 快应用：


https://taro.aotu.io/


现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。


使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信 / 百度 / 支付宝 / 字节跳动 /QQ/ 京东小程序、快应用、H5、React-Native 等）运行的代码。


Taro 的源码我没看过，但是我看里面用了很多他们自己写的 babel 包，应该是 JIT 模式，加入了中间层，把你写的东西，编译成了小程序可以执行的代码，个人认为小程序不要做得太复杂，不然你还不如做个 APP，轻量跨平台，自然是最快速的，而且可以使用 TSX 语法，React，太好了。


推荐指数：五颗星

Cordova

它是一个比较古老的技术，但是我目前的公司使用得比较 6，还做成了一套产业体系，我觉得它也挺不错的。


它是比较传统的跨平台技术，类似小程序，在 webView 中渲染，原理如下：
其实就是原生的 webView 去加载，执行 H5 代码，这样可以跨平台，而且可以随时更新发布内容。这就是传统的 hybrid APP (混合开发)。


还有一种 webApp, 直接用 h5 的技术打包成 APP，比较简单，这个百度下就知道了。
Hybrid 技术应该比较多，但是原理大同小异，都是通过 webView 加载，性能体验肯定没有原生好，因为调用 webView 需要几百毫秒的时间，但是也可以通过一些技术优化，跟谁写也有很大关系。

快应用

就是华为、小米等国内厂商为了跟小程序竞争搞出来的，像 RN 这些框架，会内置一些渲染 / 排版引擎，那么打包出来体积比较大，快应用是集成到安卓手机的 ROM 中，所以只有源码那部分，安装体积比较小，这样就叫快应用。


快应用使用原生 js 开发，框架跟原生微信小程序很像（写着不舒服，Taro 支持快应用）。
提示：写快应用的工资很高，感觉基本都在 30K 以上（可能是错觉）。

Flutter

Flutter 是 Google 推出并开源的移动应用开发框架，主要特点是跨平台、高保真、有些性能。开发者可以通过 Dart 语言开发 APP，一套代码可以同时运行在 iOS 和 Android 平台以上。Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展。
同时 Flutter 还可以使用 Native 引擎渲染视图，这无疑能为用户提供良好的体验。

跨平台自绘引擎

Flutter 与用于构建移动应用程序的其他大多数框架不同，因为 Flutter 既不使用 Webview，也不使用操作系统的原生控件。相反， Flutter 使用自己的高性能渲染引擎来绘制 Widget。这样不仅可以保证在 Android 和 iOS 上 UI 的一致性，而且可以避免因对原生控件依赖而带来的限制及高昂的维护成本。


Flutter 使用 ska 作为其 2D 渲染引擎，Skia 是 Google 的一个 2D 图形处理函数库，包含字形、坐标转换，以及点阵图，且都有高效能且简洁的表现，Skia 是跨平台的，并且其还提供了非常友好的 API，目前 Google Chrome 浏览器和 Android 均采用 Skia 作为其绘图引擎。目前， Flutter 默认支持 iOS、 Android、 Fuchsia( Google 新的自研操作系统) 三个移动平台。但 Flutter 亦可支持 Web 开发 ( Flutter for Web) 和 PC 开发。

高性能

Flutter 的高性能主要靠两点来保证，首先， Flutter APP 采用 Dart 语言开发。Dart 在 JT(即时编译) 模式下，速度与 Javascript 基本持平。同时 Dart 还支持 AOT，当以 AOT 模式运行时， Javascript 便远远追不上了。速度的提升对高帧率下的视图数据计算很有帮助。其次， Flutter 1 使用自己的渲染引擎来绘制 UI，布局数据等由 Dan 语言直接控制，所以在布局过程中不需要像 RN 那样要在 Javascript 和 Native 之间通信。


这一点在一些滑动和拖动的场景下具有明显的优势，因为滑动和拖动的过程往往会引起布局发生变化，所以 Javascript 需要与 Native 不停地同步布局信息，这与在浏览器中要 Javascript 频繁操作 DOM 所带来的问题是相同的，都会带来比较可观的性能开销。


重点：Flutter 自己有自己的渲染引擎，这样避免了以上几种跨平台技术通过中间层通信带来的性能开销，但是依然避免不了写原生代码，而且目前 GitHub 上的 issue 还比较多，不过小编已经入坑了，就学最后一个，以后就不学前端了。


Dart 语言学习也需要一些成本，如果公司有这个安排的话，可以入坑尝试。

综上五种所述：不一样的业务场景有一样的技术场景，技术为产品服务，跨平台的出现并不是为了干掉原生，而是为了更好的、更高效的开发。

作者 | Peter 谭金杰

2012andyle113

但是，实际情况是快应用那些个APP，功能都是残缺的并不好用，倒是小程序，功能使用上，跟完整的APP差别不大

gs358906

原生开发一般都要维护 Android、iOS 两个开发团队
这点说得很对，是个问题
关注中

linuxdisk

微信小程序我觉得挺好的，就是要依赖微信。

verycd8

关注跨平台的各种技术。

hexj68

Electron未了解过，有兴趣呢。

hexj68

不一样的业务场景有一样的技术场景，技术为产品服务，跨平台的出现并不是为了干掉原生，而是为了更好的、更高效的开发。
说得太好了

吉毛桃

执行 H5 代码，这样可以跨平台，这个好。

hbhsdmd

关注最新技术

m998001

发疯的脚本。还能疯狂多久！

吉毛桃

原生开发维护成本的确高。

王少笑

关注新技术，感谢分享！

uos

开发成本变大

linux爱好者

基于 javaScriptCore 实现

brettwand

打包后安卓的包比苹果大

xyqiadff

HTML5跨平台怎样？微信小程序能用在LINUX吗？

wuy新菜鸟

原生开发面临的问题

jinslaaa

学习了

guyanqiu

Electron比较流行。

不点

https://neutralino.js.org/

这是 electron 和 nwjs 的一个替代品。它叫 neutralino（渺中子），它会不会比 electron 和 nwjs 更好呢？

和 electron 、nwjs 一样，渺中子也是用 JS 构建跨平台桌面应用的一个框架，它还多了一个 “轻量级” 修饰符：

Neutralinojs

Build lightweight cross-platform desktop apps with JavaScript, HTML, and CSS

Build once with JavaScript

Run on Linux, Windows, macOS, Web, and Chrome Browser.

请点击顶部的链接，查看它的主页，了解详细情况。

linuxdisk

功能都是残缺的并不好用

不点

摘录 “知乎” 上有个匿名答题人的话：

再说说 Flutter，发布 1.0 我就开始关注了，然而 Dart 语言实在是不友好，很奇怪为什么不直接用 Javascript，或者 Typescript 也可以啊。。Dart 写出来的程序总觉得怪怪的。。

铺天盖地都在说 Flutter 如何如何优秀，能找到一个吐槽的，也实在不容易。我从内心十分感谢这个答题人，他发出了不同的声音，让我能够冷静判断。

不点

https://blog.logrocket.com/why-use-electron-alternative/

原文是英文，经百度翻译后，进行了人工修改。

为什么你应该使用 Electron 的替代品

2021 年 4 月 12 日

在 Electron 项目之前，跨平台的桌面应用程序开发不是特别容易，因为开发人员经常要为每个操作系统维护单独的代码库。尽管有一些通用的 api 来构建跨平台应用程序，但是创建自定义 GUI 元素还是很困难的。

Electron 引入了一种新的开发跨平台桌面应用程序的方法，它使用一个代码库和 web 技术（HTML、JavaScript 和 CSS）。开发人员可以用他们最喜欢的前端框架构建高度灵活和用户友好的 gui。此外，他们可以使用 HTML 和 CSS 轻松地定制 GUI 控件。此外，Electron 有一个用于本地系统操作的全功能 API。

然而，Electron 应用程序在用户计算机上消耗的资源高于平均水平，这意味着许多开发人员都要寻找轻量级的 Electron 替代品。在这篇文章中，我将讨论 Electron 的两个替代品：Tauri (金牛座) 和 Neutralino.js (中性伴子)。我还将向您展示如何安装和使用这些框架。

什么是 Electron？

Electron（以前称为 atom shell）是 GitHub 创建的跨平台应用程序开发框架。Electron 将 Chromium 项目和 Node.js 集成到一个捆绑包中，并公开了一个通用 JavaScript API，用于显示对话框、发送通知以及创建通知和托盘图标等本机功能。

开发人员可以使用他们首选的前端框架和 webui 工具包来创建应用程序的 GUI。例如，我们可以使用 React 和 Material UI 来构建应用程序的前端。像文件处理这样的本机特性可以在 Node.js 的帮助下完成。如前所述，我们可以使用 Electron 的 JavaScript API 来处理所需的操作系统特性。

如果需要显示消息框，可以使用 Electron API 中的 dialog.showMessageBox 方法。我们不需要担心特定于平台的代码，因为 Electron 有针对 Linux、macOS 和 Windows 的对话框实现。

Electron 的优点

如今，大多数开发人员使用 Electron 进行跨平台应用，这是因为它具有以下显著的优势：

单个代码基

Electron 为本机操作系统特性提供了灵活的抽象。因此，开发人员可以为他们的跨平台应用程序维护一个单一的代码库，该应用程序将运行在大多数流行的平台上。

快速功能交付

在 Electron 中用 HTML 和 CSS 创建用户界面是小菜一碟；这些 web 技术使您可以自由地创建任何自定义 GUI 元素。另外，Node.js 有一个庞大的库生态系统，所以你可以很快地添加原生特性。

成熟的框架

Electron 最初发布于 8 年前，因此它拥有强大的用户群和社区。还有一些有益的内置功能，比如自动更新。像微软这样的知名公司选择 Electron 来构建他们的跨平台应用程序。例如，Visual Studio Code、Teams 和 Skype 都是基于 Electron 构建的。

Electron 中的隐藏问题

虽然总体上令人印象深刻，但 Electron 框架有几个关键的性能问题。

Electron 将 Chromium 和 Node.js 捆绑到最终的应用程序包中，因此，即使您通过仔细选择前端库和框架来编写简单轻量级的应用程序，您的应用程序也会变得臃肿。

Chromium 和 Node.js 是复杂的项目，这些模块将消耗计算机上高于平均水平的资源。换句话说，用 Electron 构建的应用程序将占用大量的物理内存和磁盘空间。

此外，由于高资源消耗，Electron 应用程序会很快耗尽笔记本电脑的电池电量。由于 Electron 的关键性能问题，使用 Electron 开发的跨平台应用程序经常会变得臃肿。

强大的硬件可以对普通用户隐藏这个缺点。然而，一旦用户开始运行多个 Electron 应用程序，就很容易感觉到这个隐藏的性能问题。

Electron 的替代品

很久以前，有几种选择，比如 electrino (电子琴) 和 deskgap (桌面间隙) 作为 Electron 性能问题的解决方案。两个项目都试图通过使用操作系统的 webview 而不是 Chromium 来减少最终的 bundle 大小。不幸的是，这两个项目不能用成熟的 Electron 框架来完成。

然而，Electron 有两种轻量化的替代品：Tauri (金牛座) 和 Neutralino (中性伴子)。这两个项目都试图解决 Electron 的性能问题，用更好、更轻的替代品来取代 Chromium 和 Node。

两个项目都使用众所周知的 webview（网络视图）用于呈现 HTML 和 CSS 而不是 Chromium 的库。webview 库使用现有的 web 浏览器组件进行渲染。例如，它在基于 Linux 的平台上使用 gtk-webkit2，在 macOS 上使用 Cocoa Webkit，在 Windows 上使用 Edge/MSHTML。

什么是 Tauri？

Tauri 是一个轻量级、跨平台的桌面应用程序开发框架，用 Rust 编写。开发人员可以使用他们首选的前端框架来制作 Tauri 应用程序的前端。

我们可以将 Tauri 的 JavaScript API 用于本地平台功能，例如文件处理和显示对话框。Tauri 的另一个优点是我们可以在 Rust 中实现我们自己的原生API，并将其作为 JavaScript API 公开给 webview。

下面我们就用 Tauri 来编写一个简单的跨平台应用程序。

安装

Tauri 应用程序可以在任何流行的平台上构建。在这个演示中，我在 Linux 下构建。
首先，我们需要通过在终端中输入以下命令来安装所需的库：

1. $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev \
   
2.     build-essential \
   
3.     curl \
   
4.     wget \
   
5.     libssl-dev \
   
6.     appmenu-gtk3-module \
   
7.     libgtk-3-dev \
   
8.     squashfs-tools
   

复制代码

之后，我们需要安装 Rust 编译器和 Cargo package manager：

1. $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

复制代码

最后，我们需要安装 Tauri CLI（确保你已经有了 Node.js 和一个包管理器）：

1. $ npm install -g tauri

复制代码

开发

可以通过输入以下命令创建新的 Tauri 应用程序：

1. $ mkdir tauri-app && cd tauri-app
   
2. $ tauri create

复制代码

输入 tauri create 命令后，CLI 将询问一组有关配置应用程序的问题。在本例中，使用了默认值。应用程序名称为 tauri-app。

tauri-app/src-tauri 目录由应用程序的后端代码组成。您可以将前端代码放入 tauri-app/dist 目录。现在，我创建了 tauri-app/dist/index.html 并输入以下 html：

1. <h1 style="padding-top: 45vh; text-align: center;" >Hello Tauri!</h1>

复制代码

我们只需输入 tauri dev 即可启动应用程序。因为我没有使用开发服务器，所以我必须在 tauri.conf.json 文件中将 devPath 设置为 ../dist 目录。

发布 Tauri 应用程序

Tauri 允许您为每个平台创建应用程序的单个二进制文件。只需输入 tauri build 命令即可完成。但是，如果需要为 Linux 生成二进制文件，则必须从 Linux 计算机上运行此命令。

什么是 Neutralino.js？

Neutralino.js 是一个用 C/C++ 编写的轻量级跨平台桌面应用程序开发框架。与 Tauri 类似，Neutralino 鼓励开发人员使用任何前端框架来构建应用程序的 GUI。它还为类似于 Electron 的本机操作提供了 JavaScript API。


下面我们就用 Neutralino 来编写一个简单的跨平台应用程序。

安装

Neutralino 不需要任何额外的库来开发应用程序。您只需在任何操作系统上安装其 CLI 即可：

1. $ npm install -g @neutralinojs/neu

复制代码

开发

可以使用以下命令创建新的 Neutralino 应用程序：

1. $ neu create neutralino-app

复制代码

上面的命令将通过下载预构建的 JavaScript 模板来创建一个新项目。它还将为每个操作系统下载最新的预构建的 Neutralinojs 二进制文件。
此示例应用程序的主视图（app/index.html）包含以下内容：

1. <h1 style="padding-top: 45vh; text-align: center;" >Hello Neutralinojs!</h1>

复制代码

只需输入 neu run 命令即可启动应用程序。

发布 Neutralino.js 应用程序

我们可以通过输入 neu build 命令为其他人发布我们的应用程序。该命令将在 dist 目录中生成二进制文件。

Neutralino 不像 Tauri 那样提供单个二进制创建支持。它将始终创建单个资源文件以及特定于平台的二进制文件。

比较

同样的应用程序在 Electron、Tauri 和 Neutralino 中占用的资源如下。测量是在 Linux 平台上进行的：

	Electron	Tauri	Neutralino.js
软件包体积（未压缩）	200 MB	8 MB	2 MB
物理内存使用	约 100 MB	约 50 MB	约 50 MB

结论


Electron、Tauri 和 Neutralino.js 将在 web 浏览器中呈现整个应用程序。然而，web 浏览器的渲染过程很复杂。在绘制基于 web 的 GUI 元素之前，有几个步骤。

首先，HTML、CSS 内容将被解析。之后，浏览器将生成具有解析结果的 DOM 树。最后，web 浏览器将绘制由样式规则和 DOM 树组合而成的渲染树。

因此，这些框架不适合非常大的应用程序。在这种情况下，使用本机或使用真正的本机框架（如 Flutter）可能是一个明智的选择。

根据以上比较，Tauri 和 Neutralino.js 的表现优于 Electron。Electron 应用程序消耗大量磁盘空间，因为每个应用程序都与 Chromium 和 Node 捆绑在一起。另一方面，Tauri 和 Neutralino.js 的捆绑包大小惊人地轻，因为这些框架是在重用用户操作系统的系统 web 浏览器库。

Electron 允许您轻松地发布桌面应用程序，但它会产生严重的性能问题，这让用户感到沮丧。因此，现在该寻找一种替代方案了。

linux爱好者

Electron比较好。

linux爱好者

不点 发表于 2022-6-29 12:19
https://blog.logrocket.com/why-use-electron-alternative/

原文是英文，经百度翻译后，进行了人工修改 ...

Electron还好吧，没有发现问题。

不点

看到有人说，flutter 已经支持桌面了，就去主页（中文的）瞅了瞅：

https://flutter.cn/

就是不知道，有谁开发出能在桌面、手机都能用的跨平台软件。

不点

跨平台技术的发展，使得代码（知识）的积累和沉淀，成为了操作系统发展过程中至关重要的一环。

可以想象，将来发展出的新系统，都会向已有的跨平台标准靠拢。

谷歌在这个领域，貌似有野心成为主导者。

linux爱好者

不点 发表于 2022-8-14 18:53
跨平台技术的发展，使得代码（知识）的积累和沉淀，成为了操作系统发展过程中至关重要的一环。

可以想象 ...

google垄断很多领域。

不点

找到了这个：

https://android-js.github.io/

Android js

Build Android apps with
JavaScript, HTML, and CSS
based on Node JS.

如此一来，那么， js 跨平台开发框架
nw 和 electron 就有望从桌面扩展到
移动端了。

不点

The Easiest Way for Web Developers to Build Mobile Apps
https://dev.to/ionic/the-easiest-way-for-web-developers-to-build-mobile-apps-1ih8

以下是百度翻译的译文

Web 开发人员构建移动应用程序的最简单方法

对于有兴趣构建移动应用程序的网络开发人员来说，现在有很多选择。开发人员可以在React Native、NativeScript、Cordova、Ionic Framework 和 Capacitor 等项目之间进行选择。

考虑到大量的选项，对于一个寻找熟悉的基于 web 的开发体验的 web 开发人员来说，什么是最合适的并不总是清楚的。

有了这一点，我想证明 Capacitor（可以选择使用 Ionic framework 等以移动为中心的 UI 框架）是 web 开发人员构建移动应用程序的最自然、最简单的方式。

"Electron for Mobile"

Electron 是一种非常流行的解决方案，用于使用标准 web 技术构建跨平台桌面应用程序。Web 开发人员可以使用他们用于 Web 应用程序的标准 HTML、CSS 和 JavaScript，包括任何流行的库，如 React/Angular/Vue、Tailwind 或 Material UI，并将这些应用程序变成强大的桌面应用程序。

这个简单的公式使 Electron 成为最受欢迎的跨平台工具包之一。如今，Electron 为许多流行的应用程序供电，如 Slack 和 VS Code。

如果你发现自己在问“除了移动应用程序，什么是 Electron 的模拟？”答案是电容器（Capacitor）。

与 Electron 一样，Capacitor 采用了在浏览器中运行的标准 web 应用程序，并通过访问强大的本机 API 和原生 UI（如 Camera 和 Filesystem）对其进行了扩展。这些 API 适用于 iOS、Android、Web 和 Electron。

Electron 通过 Chromium 捆绑在“web视图”中，而 Capacitor 使用 iOS 和 Android 上提供的标准嵌入式 web 视图本地控件。这意味着电容器（Capacitor）不会像 Electron 那样出现膨胀问题。

净效应（结果）是电容器（Capacitor）实际上是一种 “移动电子（Electron for Mobile）”。

React Native 或 Flutter 呢？

你可能会问自己：为什么 React Native（或Flutter）不是 “移动电子（Electron for Mobile）” 呢？

原因是 React Native 和 Flutter 没有使用标准的网络浏览器环境来运行应用程序。相反，它们是对系统 UI 控件和 API 的抽象，以提供构建应用程序的“类似网络”的体验，而不是真正的网络环境。两者都需要专门为每个平台编写的代码，并且不能使用特定于 web 的库或代码。

这一点很重要，因为这意味着网络开发人员构建移动应用程序的最短路径是电容器（Capacitor），不用说。

【后面还有一些图片和代码示例等内容，不再翻译。感兴趣者请查看原文。】