2024年跨平台应用解决方法

个人博客:Sekyoro的博客小屋
个人网站roanimer的个人网站
好久没有写这类high-level的文章了,自己这类框架就不停层出不穷,但是其中长期弥坚,对峙不懈的框架又有多少呢?
首先思量到学习成本以及把握一些编程语言在工作、学习生态上的代价,给这些东西适用生态划分一下.
React Native

   React Native 允许相识 React 的开发职员创建原生应用程序。同时，原生开发职员可以使用 React Native 编写一次通用功能，从而获得原平生台之间的平等性。
  Get Started with React Native · React Native
使用前端技能开发移动端和web程序. 通常与Expo搭配,后者是一个生产级的 React Native 框架。Expo 提供开发职员工具，使应用程序的开发更加轻松，例如基于文件的路由、原生模块尺度库等.

1. npx create-expo-app StickerSmash --template blank && cd StickerSmash

复制代码

1. import { StyleSheet, Text, View } from 'react-native';
3. export default function App() {
4.   return (
5.     <View style={styles.container}>
6.       <Text>Hello world!</Text>
7.     </View>
8.   );
9. }
11. const styles = StyleSheet.create({
12.   container: {
13.     flex: 1,
14.     backgroundColor: '#fff',
15.     alignItems: 'center',
16.     justifyContent: 'center',
17.   },
18. });

复制代码

使用一些库的话直接就是npm,跟前端开发雷同.
缺点的话就是使用前端和android studio混合搭配优点乱吧,而且可能另有一些坑.
假如你不喜欢React,可以试试IonicIonic Framework - The Cross-Platform App Development Leader其着实这里我并不想推荐其他技能了.
更多前端技能,参看2023 JavaScript Rising Stars
优点:

• 强大的生态和社区(毕竟背靠折腾的锋利的前端),文档非常友善
  
• 专注用户界面,出现原平生台的用户界面组件
  
• fast refresh,使得开发时能立即瞥见改动
  
• 有了debugger工具,提供log viewer, interactive layout inspector, 和network inspector.
  

Flutter

Install | Flutter
固然前段时间听说flutter遭重,被google layoff了一些人.
广泛文档也不错,目前支持mobile, web乃至desktop(beta).

1. ListView(
2.   children: const <Widget>[
3.     ListTile(
4.       leading: Icon(Icons.map),
5.       title: Text('Map'),
6.     ),
7.     ListTile(
8.       leading: Icon(Icons.photo_album),
9.       title: Text('Album'),
10.     ),
11.     ListTile(
12.       leading: Icon(Icons.phone),
13.       title: Text('Phone'),
14.     ),
15.   ],
16. ),

复制代码

使用Dart语言的命令式UI,目前很多框架都使用这种方式了.实在也雷同jsx,无非是利用编程语言层层嵌套更换原本的xml设置的方式.
Jetpack compose和Qt的qml也都雷同这种了,分别更换了原本xml和widget.
利用Dart的pub.dev装一些库The official repository for Dart and Flutter packages. (pub.dev),众所周知,提到php,ruby就是web,那么提到dart就是flutter了,因此dart的很多库也是方便flutter开发的.
缺点就是Dart也有上手门槛,不过假如你认识雷同Kotlin,
Swift这种语言,实在它向这些语言学习了很多.
优点:

• Flutter 的热重载功能可让您在修改代码后立即查看应用程序的变化，而无需重新编译。
  
• Flutter 支持谷歌的 Material Design,这是一种帮助开发职员构建数字体验的设计体系.在构建应用程序时,您可以使用多种视觉和行为小部件。
  
• Flutter 不依赖浏览器技能.相反,它拥有自己的渲染引擎来绘制部件
  

Kotlin Multiplatform

假如你已经认识Jetpack Compose,那这个就是多平台下的开发框架,便于写ios,web等等. 我个人感觉它和Flutter就是这方面的leader了,假如你对desktop没有要求,那也可以使用React Native.
Compose Multiplatform UI 框架 | JetBrains | JetBrains: Developer Tools for Professionals and Teams
但说真话,目前还需要再等一等.毕竟它的时间还不像前两者那么久.
首先需要Kotlin Multiplatform Wizard | JetBrains下载需要的库,然后进行一堆设置,目前看来还是需要再等等,先认识认识Jetpack Compose更好.
当然,前提条件都是必须要会Kotlin的根本语法.
.NET MAUI

Flutter是谷歌的技能,React Native是Meta的技能,而MAUI就是微软的技能. 使用C#和XAML(雷同xml)开发mobile和desktop程序.假如你还想要web,可以联合Blazor.
.NET Multi-platform App UI (.NET MAUI) | .NET (microsoft.com)
目前微软正在大推,而之前的桌面开发应用好比WPF等已经没有什么大更新了,但是还是有一些公司(可能不是那么互联网的公司)正在使用.
假如你没有那么夸大跨平台,我觉得WPF完全够用了.
还是使用的是利用文件设置声明UI控件,然后代码写变乱逻辑.

1. <?xml version="1.0" encoding="utf-8" ?>
2. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4.              x:Class="Notes.AboutPage">
5.     <VerticalStackLayout Spacing="10" Margin="10">
6.         <HorizontalStackLayout Spacing="10">
7.             <Image Source="dotnet_bot.png"
8.                    SemanticProperties.Description="The dot net bot waving hello!"
9.                    HeightRequest="64" />
10.             <Label FontSize="22" FontAttributes="Bold" Text="Notes" VerticalOptions="End" />
11.             <Label FontSize="22" Text="v1.0" VerticalOptions="End" />
12.         </HorizontalStackLayout>
14.         <Label Text="This app is written in XAML and C# with .NET MAUI." />
15.         <Button Text="Learn more..." Clicked="LearnMore_Clicked" />
16.     </VerticalStackLayout>
17. </ContentPage>

复制代码

1. private async void LearnMore_Clicked(object sender, EventArgs e)
2. {
3.     // Navigate to the specified URL in the system browser.
4.     await Launcher.Default.OpenAsync("https://aka.ms/maui");
5. }private void OnCounterClicked(object sender, EventArgs e)
6. {
7.     count++;
9.     if (count == 1)
10.         CounterBtn.Text = $"Clicked {count} time";
11.     else
12.         CounterBtn.Text = $"Clicked {count} times";
14.     SemanticScreenReader.Announce(CounterBtn.Text);
15. }

复制代码

C#语言自己我个人还是非常喜欢的,属于长期弥坚.使用.NET开发移动程序根本上要搭配visual studio了(大概也可以使用Jetbrains的Rider),可能一些操作不认识.
此外也有第三方的Avalonia接待 | Avalonia Docs (avaloniaui.net)和Uno,也是可以思量的. 但目前可能仍旧存在一些坑,生态上资源可能也没有那么丰富.
优点:

• .NET MAUI 提供跨平台 API，用于访问本地设备功能，如 GPS、加快计、电池和网络状态。
  
• 它有一个单一的项目体系，可使用多目的功能针对 Android、iOS、macOS 和 Windows 启用。
  
• 由于支持 .NET hot reload，开发职员可以在应用程序运行时修改托管源代码
  

这可能不太互联网和开源,但我还是想说说:
Qt

Qt最新已经到了6.x版本,官方也推荐Quick application,另外另有design studio方便界面设计. 官方文旦也很不错.
[Qt Documentation | Home](https://doc.qt.io/qt-5/gettingstarted.html)
Qt Documentation | Modules

随便新建一个项目,设置允许使用design studio打开的格式,这样下面文件会多一些东西.

可以看到使用qml和cpp进行开发,qml里可以写UI也可以写一些简单逻辑,雷同MAUI和WPF.
Qt目前支持桌面和android等【Qt】如何从零设置Qt Android安卓环境_qt 安卓环境搭建,但我也不推荐使用qt开发移动应用。
而是使用qml技能开发跨平台桌面应用(毕竟针对不同IDE设置一个android模拟器还是挺麻烦的).
否则跟下面一样

1. #include <QGuiApplication>
2. #include <QQmlApplicationEngine>
4. int main(int argc, char *argv[])
5. {
6.     QGuiApplication app(argc, argv);
8.     QQmlApplicationEngine engine;
9.     const QUrl url(u"qrc:/ada/Main.qml"_qs);
10.     QObject::connect(
11.         &engine,
12.         &QQmlApplicationEngine::objectCreationFailed,
13.         &app,
14.         []() { QCoreApplication::exit(-1); },
15.         Qt::QueuedConnection);
16.     engine.load(url);
18.     return app.exec();
19. }

复制代码

1. import QtQuick
2. import QtQuick.Controls
4. Window {
5.     width: 640
6.     height: 480
7.     visible: true
8.     title: qsTr("Hello World")
9.     Rectangle {
10.         anchors.fill: parent
11.         color: "red"
12.         Column {
13.             spacing: 20
14.             Text {
15.                 text: qsTr("Hello World")
16.                 font.pixelSize: 254
17.                 font.bold: true
18.             }
20.             Button {
21.                 text: qsTr("Hi, press me!")
22.                 onClicked: console.log("Button clicked!")
23.             }
25.             Button {
26.                 text: qsTr("Hi, press me!")
27.                 onClicked: console.log("Button clicked!")
28.             }
29.         }
30.     }
31. }

复制代码

而且Qt不只是一个UI库,它包括cpp的各种封装与工具,qml也支持js执行.
不过开发上qt自己并不支持热重载,每次改完还要重新运行.
我不会说c++很难,但这是个事实,不过Qt已经方便你很多了.构建工具也从原本Qt自己的qmake酿成了cmake优先.
另外Qt和visual studio也是我很喜欢的c++的IDE,最近jetbrains又发力搞了clion nova据说占用内存小了,也可以试试.
但可能由于各种原因,Qt的生态跟前面几者不太相同,这里引用一句.
   以往QT需求比较强烈的领域重要集中于军工、安防、车联网、工业控制、电力等相对偏传统的行业领域，团体需求比较稳固。但是比年来由于…，接纳…，实现…。这也就意味着，像QT这种GUI框架必然会越受青睐。
  作者：飞援
链接：https://juejin.cn/post/7076273798311313439
泉源：稀土掘金
著作权归作者全部。商业转载请联系作者获得授权，非商业转载请注明出处。
  我并不是觉得Qt需要有多么受青睐,但是它的需求确实如上面所说,导致很多人拿来工作的并不多.
FYI

• The Six Most Popular Cross-Platform App Development Frameworks | Kotlin Multiplatform Development Documentation (jetbrains.com)
  

如有疑问,接待各位交流!

服务器设置
宝塔:宝塔服务器面板，一键全能部署及管理
云服务器:阿里云服务器
Vultr服务器
GPU服务器:Vast.ai

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。