CA周记 - 用 Visual Studio Code 做基于 .NET MAUI 跨平台移动应用开发

dba7873728af241a13aaded33c4e4112.png

自2010年以来,移动应用开发是非常热门的一个方向,从技术上我们经历了原生应用开发、基于 H5 的 Web App、混合模式的移动应用开发,再到跨平台移动应用开发。.NET 不仅是一个跨平台的应用,也是一个跨应用场景的平台。.NET的移动应用方案最开始基于 Mono , 从 MonoTouch , 到 MonoDroid ,到跨平台移动应用方案 Xamarin , 再到现在整合到 .NET 6 的 MAUI。通过 .NET MAUI 你可以通过一份代码,一个项目快速构建具备原生性能的 iOS / Android / Windows / MacOS / Linux 应用。

Visual Studio Code 的 MAUI 环境安装

官方现在基本上都是推荐用最新预览版本的 Visual Studio 2022 在 Windows 平台上做开发,macOS 的 Visual Studio 支持 MAUI 还没有准备好!记得 2020 年 Build 大会上微软是有展示过在 Visual Studio Code 上开发的, 当时我也非常期待, 但一直没有下文。实际上, 在 Visual Studio Code 上的 .NET 跨平台开发组件已经有了, 通过开源项目存在。要用 Visual Studio Code 开发 MAUI ,请按照以下步骤来完成:

0..NET 6 环境安装

通过链接 https://dotnet.microsoft.com/en-us/download 安装最新的 .NET 6

1.MAUI 环境安装

无论你在 Windows / macoOS 建议使用 maui-check (https://github.com/Redth/dotnet-maui-check) 对 MAUI 所需要的环境进行安装,这里面包含了 Android SDK / iOS SDK 等 相关配置的检查。

在命令行安装 maui-check

dotnet tool install -g Redth.Net.Maui.Check

在终端执行 maui-check

maui-check

如下图, maui-check 会对你对你系统里依赖的如 JDK , Android SDK , Xcode , Visual Studio ,.NET SDK 以及 MAUI 相关的包等环境扫描一次,如果缺少,他会提示你安装。

3fd17039a30bb8b96583783491465faf.png

2.用 .NET Tools 安装 Comet

Comet 是 .NET 基于 MVU 设计模式的前端实现框架, 你可以把它应用于 Windows , Android , iOS , macOS , Blazor 应用开发中。你可以从 https://github.com/dotnet/comet 了解更多。

*

什么是 MVU?

43348b74793f7a7ee3e0a1bce8e3603a.png

MVU (Model-View=Update) 是⼀种功能响应式编程、架构设计模式。在 MVU 中 UI 是不可变的。所以每次你想更新⼀个属性时,你都必须重建你的 UI。不变性是函数式编程的特性。C# 9.0 后⽀持函数式编程范式。UI 和业务都使⽤相同的语⾔(例如 C#)编写。数据流是单向的。它⾮常适合应⽤程序的热重载。您不需要学习 XAML 来开发 UI,⽽是⽤⼀种语⾔开发完整的应⽤程序。如下代码, 通过描述式表达完成了⻚⾯和逻辑构建:

public class MyPage : View {readonly State<int> clickCount = new State<int> (1);public MyPage() {Body = () => new VStack {new Text (() => $"Click Count: {clickCount}"),new Button("Update Text", () => {clickCount.Value++;}};}
}

3.安装Comet for Visual Studio Code 组件

aa0bf0124a33334d6c0321668d6bf590.png

通过Visual Studio Code管理你的MAUI项目

1.通过命令行创建一个 MAUI 项目

mkdir mauidemo
cd mauidemo
dotnet new comet

2.通过命令行尝试运行该项目

dotnet build mauidemo -t:Run -f net6.0-android
dotnet build mauidemo -t:Run -f net6.0-ios

运行结果如下:

93d1074c6f1d13728a7a3e71cc5f9f65.png

3.用 Visual Studio Code 打开该项目

打开后,Comet 组件就会检测你的 MAUI 项目 , 我们可以看到左下角

b0dc1117a3102cb42c07610e3c64b03a.png

你可以点击选择选择相关的运⾏环境

9204078b5c31faeb63770a43257fa54f.png

4.选择 iOS / Android 直接 在 Visual Studio Code 中运行和调试

打开后,Comet 组件就会检测你的 MAUI 项目 , 我们可以看到左下角, 系统会检测到相关的环境, 并且可以选择你要运行的设备

242ffbf83eb0c92b89e7411f4f5bf629.png

设置一个断点看看

7801b986c2e4e08b59d24d14463c3a23.png

注意:

1.Comet for .NET Mobile 组件还在开发中, 在 MAUI Preview 13 的版本上 Visual Studio Code不能成功加载 Android 设备, 所以例子以 iOS 为主。

2.在 Windows 环境下,如果要调试 iOS 程序,还是得用 Visual Studio 和 macOS 做链接,具体方式可以点击链接 https://docs.microsoft.com/zh-cn/xamarin/ios/get-started/installation/windows/connecting-to-mac/进行了解。

HotReload 作为补充

之前提过Comet创建的项目是基于MVU模式,界面和业务都是基于函数式的方式去完成。这个时候 HotReload 就非常重要了,可以所编即所得,这也是对 Visual Studio Code 开发 MAUI 应用的补充 ,接下来我也介绍一下。

1.Reloadify 安装

Reloadify 3000 是一个支持HotReload 的 .NET 组件 , 已经内置于 Comet 的 MAUI 项目中。安装脚本如下:

dotnet tool install -g Redth.Net.Maui.Check

2.设置 

进入项目,输入如下命令

      iOS:

reloadify mauiappdemo.csproj -t ios

      Andriod

reloadify mauiappdemo.csproj -t android

之后你就可以在 Visual Studio Code 下编写代码间同步你的代码在模拟器, 实现在编即所得。

3952bede205ba2cf06fe21433150a6bb.png

最后给⼤家看看我⽤ Visual Studio Code 完成的 MAUI Demo

4620d5f9a06910edc735240c0ac7aec8.png

展望

通过 Visual Studio Code 开发 MAUI 应用是值得期待的,也为 MAUI 拓宽了开发场景。结合 Hot Reload会让跨平台应用开发更有效率。我期待正式版本能和MAUI有更好的结合! 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/290973.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

P2P网络穿越 NAT穿越

http://blog.csdn.net/mazidao2008/article/details/4933730 —————————————————————————————————————————————————————————————— 穿越NAT的意义&#xff1a; NAT是为了节省IP地址而设计的&#xff0c;但它隐藏了…

C#导入导出.CSV文件

欢迎您成为我的读者&#xff0c;希望这篇文章能给你一些帮助。前言大家好&#xff0c;我是阿辉。今天和大家一起来看看&#xff0c;C#在处理流文件时,我们最常用的导出Excel文件是如何操作的。在日常的业务编码过程中&#xff0c;很多时候需求就要求导出Office能打开的表格文件…

奋斗逼,真牛逼!

▲点击上方第二个findyi关注&#xff0c;回复“1”领取职场资料职场&认知洞察 丨 作者 / 易洋 这是findyi公众号的第304篇原创文章今天下午一个读者咨询我一个问题&#xff1a;这名读者感觉卷不过身边的加班狂人&#xff0c;但又感觉这些人丝毫不给公司创造价值&#xff0…

Entity Framework 批量插入

为什么80%的码农都做不了架构师&#xff1f;>>> 奋斗的小鸟——dogxuefeng Entity Framework 批量插入很慢 Entity Framework 批量插入很慢吗&#xff1f;我自己测试下 前几天看到一篇文章里提到过&#xff0c;在批量插入时&#xff0c;需要加上Context.Configur…

DEV-aspxgridview中的aspcheckbox

checkbox可以所以点击修改 例子演示&#xff1a;http://codecentral.devexpress.com/E2313/ 源程序&#xff1a;https://www.devexpress.com/Support/Center/Example/Details/E2313 表头可以全选所有的checkbook 具体演示如下&#xff1a;http://codecentral.devexpress.com/…

HDS业务定义永续IT架构

永续IT架构的出现并不是以取代原有设备为目的&#xff0c;而是帮助用户循序渐进地向新一代IT架构迁移。在HDS的手中&#xff0c;软件定义存储、对象存储等都成了保障业务永远在线的利器。技术创新固然可喜&#xff0c;但是最先进的技术不一定能直接带来企业收入的增加&#xff…

FreeBSD大败局

文 | 肖滢&lola策划 | lola出品 | OSC开源社区&#xff08;ID&#xff1a;oschina2013&#xff09;看过上一篇文章《还有人记得 Linux 之前&#xff0c;那个理想又骄傲的 BSD 吗&#xff1f;》的读者都知道&#xff0c; BSD 是 Unix 最重要的一个开源分支&#xff0c;这一本…

html拖放数据库字段,HTML5 拖放(Drag 和 Drop)

拖放是一种常见的特性&#xff0c;即抓取对象以后拖到另一个位置。在 HTML5 中&#xff0c;拖放是标准的一部分&#xff0c;任何元素都能够拖放.#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}function allowDrop(ev){ev.preventDefault();}function…

谈谈 css 的各种居中——读编写高质量代码有感

css 的居中有水平居中和垂直居中&#xff0c;这两种居中又分为行内元素居中和块级元素居中&#xff0c;不同的居中用不同方法。 水平居中 1、行内元素水平居中&#xff08;文本&#xff0c;图片&#xff09; 给父层设置 text-align:center; 可以实现行内元素水平居中。 <!DO…

.NET遗留应用改造——性能优化篇

由于各种原因我们总是要与公司各种老项目打交道。天有不测风云&#xff0c;谁也不知道这坨屎山会从哪个方向把你的嘴塞的满满的&#xff0c;还不让你吐出来。既然如此...那只能细嚼慢咽的吞下去吧。说实在话&#xff0c;只要业务不死&#xff0c;那些老大伯项目就还有价值。更何…

华为西安工业大学鸿蒙,培养百位将领、19位院士,这所211大学被誉为“华为人的母校”...

在社会上&#xff0c;985工程重点大学认可度是普遍要比211工程大学高的&#xff0c;并且985工程大学实力也比较强。但比较例外的是&#xff0c;华为这个让国人骄傲的企业&#xff0c;对一个211工程大学青睐程度却超过了绝大部分985工程大学&#xff0c;这所211大学甚至还被誉为…

Android Studio之Instant Run requires ‘Tools | Android | Enable ADB integration‘ to be enabled解决办法

1、问题 Android studio运行项目时候出现这个提示 Instant Run requires Tools | Android | Enable ADB integration to be enabled 2、原因 由于新版本中的Instant Run &#xff08;即时运行&#xff09;引起的 官方介绍 即使运行 https://developer.android.com/studio/r…

C# 11 预览,又增加了实用的语法糖

文 | 罗奇奇出品 | OSC开源社区&#xff08;ID&#xff1a;oschina2013&#xff09;.NET 首席项目经理凯瑟琳在博客中介绍了 C# 11 的一些预览性新功能&#xff0c;这些功能可以在 Visual Studio 17.1 和 .NET SDK 6.0.200 中体验&#xff0c;下面摘录一部分新特性作介绍&#…

java程序

This XML file does not appear to have any style information associated with it. The document tree is shown below.博客园_首页代码改变世界uuid:5de59c50-a92f-4447-96ed-ab86451ed183;id61182014-07-27T11:59:08Zfeed.cnblogs.comhttp://www.cnblogs.com/jianyus/p/386…

使用Blazor做个简单的时间戳在线转换工具

时间戳转换时间戳转换&#xff0c;关键点在于双向绑定bind-Value&#xff0c;就简单贴源码吧TimestampTool.razorpage "/timestamp" using BlazorComponent.I18n layout PublicLayout<PageTitle>T("TimestampToolTitle")</PageTitle><h2 st…

转载:Pixhawk源码笔记一:APM代码基本结构

转自 新浪微博WalkAnt 基础知识 详细参考&#xff1a;http://dev.ardupilot.com/wiki/learning-the-ardupilot-codebase/ 第一部分&#xff1a;介绍 详细参考&#xff1a;http://dev.ardupilot.com/wiki/learning-ardupilot-introduction/ ArduPilot 代码分为5个主要部分&…

nginx+tomcat8+memcached实现session共享具体操作

本次试验用到的软件包的版本如下&#xff1a;一、针对10.43.2.134的操作1.安装jdk环境tar zxf jdk-8u5-linux-x64.tar.gz mkdir /usr/javamv jdk1.8.0_05/ /usr/java/编辑/etc/profile在文档的末尾追加如下5行内容&#xff1a;JAVA_HOME/usr/java/jdk1.8.0_05JRE_HOME/usr/java…

.NET6之MiniAPI(十九):NLog

在本系例文章的第八篇中&#xff0c;我们聊过官方的日志实现&#xff0c;即《.NET6之MiniAPI(八)&#xff1a;日志》。但官方的日志功能更多是提供了一个实现基础&#xff0c;对于要求一个灵活&#xff0c;强大&#xff0c;方便的日志体系&#xff0c;官方的还是有差距的&#…

完美:C# Blazor中显示Markdown并添加代码高亮

昨天发了一篇介绍这个库&#xff1a;C# Blazor中显示Markdown文件&#xff0c;介绍怎么在Blazor中显示Markdown内容的文章&#xff0c;文章内的代码是没有高亮的&#xff0c;思来相去&#xff0c;还是要做好&#xff0c;于是百度到这篇文章.NET C# Blazor 服务端渲染Markdown&a…

使用 FieldMask 提高 C# gRpc 服务性能

前言想象一下&#xff0c;有一个服务提供个多个客户端调用&#xff0c;但不是所有客户端都需要全部的返回参数:比如商品列表服务返回商品的所有信息&#xff0c;而订单服务调用商品列表服务&#xff0c;但它其实只需要商品的编码和名称就够了。当然&#xff0c;我们可以为这个需…