2022年,来点新颖的跨端技术吧!

526 阅读3分钟

前言

跨端顾名思义就是一套代码多个平台,节省人力成本,多平台风格统一。 (废话开头)

我正在参加跨端技术专题征文活动,juejin.cn/post/710123….

常见的跨端技术

对于跨端,前端相关的技术栈

  • taro
  • uniapp
  • react-navite
  • electron(桌面平台) 目前比较火热的还有
  • flutter(原生 skia自绘引擎)

当然还有很多跨端手段 比如: ionic navite.js

试想一下,我们能不能用一种比较贴近原生的方式 实现高性能的布局的同时还能对前端有一定的支持性。

Maui & Balzor for Maui

Maui是一个跨平台的框架,基于.net6构建 (目前处于 RC-3版本), 本质上是 Xamarin.Forms 的演变,通过XAML和C#代码构建多平台可复用的UI和业务逻辑

Balzor and vue?

Balzor简而言之就是 HTML+CSS+C#;

可以用BalZor去替代 XAML的界面绘制一定程度上适合前端开发人员 既然是HTML那么基本上我们也可以在此之上使用Vue来增强前端人员的开发体验。 可以参考此连接

PS:如果你对TypeScript很熟练,C#玩起来也不会太难, TypesScript 差不多等同于C#儿子 :D)

支持的平台

  • Window (基于Win UI3 win10或11)
  • MacOS (Mac Catalyst macOS 10.13)
  • Android (Android 5.0 (API 21) 或更高版本)
  • IOS (iOS 10)
  • Linux (社区支持)
  • Tizen,由三星支持

优点

  • 非常快的热重载体验
  • 统一的UI 和 业务逻辑
  • 前端开发人员也可以接入
  • 编译到原生平台
  • 条件编译

缺点

  • 太新了还未正式发布(不过也快了)
  • 是微软家的 (UWP开发被鞭尸)
  • 部分情况下需要一些原生开发经验
  • 若非是极致性能场景 可能不是你的第一选择

还有不全欢迎评论区补充

创建你的第一个Maui

由于目前还处于RC阶段,你需要下载 visual Studio Preview 最新版才可以创建MAUI项目 在下载Visual Studio install 内 仅勾选 这一个就可以了。

当然我不是很推荐你在安装visual Studio Preview把他塞到C盘,你C盘很大的话别在意这条提示就行。

image.png

之后在visual Studio Preview 内即可直接创建Maui项目

image.png 按需选择你想创建的类型就行 这里我选择的是 .NET MAUI应用

image.png 初次进入需要等待vs 还原nuget包(简单理解就是npm i)

之后在上方,选择你想要调试的平台即可

image.png

MAUI支持调试Android for Window上面调试(需要手动使用ADB连接到Android子系统)

找到打开ADB控制台然后在打开的cmd窗口内输入adb connect 127.0.0.1:58526

image.png

提示connected to 127.0.0.1:58526 就表示已经连接到了

image.png

这样你就获得了一个Android仿真模拟设备

image.png

结尾

感兴趣可以根据微软官方的文档去跟着学习里面详细记载。 MAUI官方文档(机翻中文)