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;但它隐藏了…

Eclipse之如何快速查看抽象函数实现

1、ctrl (open implementation) 2、ctrl T

页面获取Spring Security登录用户

1.在session中取得spring security的登录用户名如下&#xff1a;${session.SPRING_SECURITY_CONTEXT.authentication.principal.username} spring security 把SPRING_SECURITY_CONTEXT 放入了session 没有直接把username 放进去。下面一段代码主要描述的是session中的存的变量&…

android 骨骼动画库,cocos creator spine骨骼动画组件使用

1: 掌握sp.Skeleton组件的使用;spine骨骼动画工具1: 骨骼动画: 把动画打散, 通过工具&#xff0c;调骨骼的运动等来形成动画2: spine是一个非常流行的2D骨骼动画制作工具3: spine 动画美术人员导出3个文件:(1) .png文件:动画的”骨骼”的图片集;(2).atlas文件: 每个骨骼在图片集…

border:none 与border:0的区别

border:none与border:0的区别体现为两点&#xff1a;一是理论上的性能差异&#xff0c;二是浏览器兼容性的差异。 性能差异&#xff1a; 【border:0;】把border设为“0”像素效果等于border-width:0&#xff0c;浏览器依然对border-width、border-color进行了渲染&#xff0c;即…

C#导入导出.CSV文件

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

LeetCode之Sum of Left Leaves

1、题目 Find the sum of all left leaves in a given binary tree. Example: 3/ \9 20/ \15 7There are two left leaves in the binary tree, with values 9 and 15 respectively. Return 24.Subscribe to see which companies asked this question. 2、代码实现 /*** De…

华为电视鸿蒙系统好用吗,【图片】华为鸿蒙系统的厉害之处在于 你可能非用不可 !【手机吧】_百度贴吧...

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼鸿蒙的厉害在于 你可能非用不可&#xfffc;瀑布先生06-05 09:52科技达人关注&#xfffc;华为一直在研发一套操作系统&#xff0c;如果不是对手打压。可能大部分人&#xff0c;至今都不知道这个系统的存在。如果市场稳定&#xff…

移动开发总结

meta基础知识 H5页面窗口自动调整到设备宽度&#xff0c;并禁止用户缩放页面 <meta name"viewport" content"widthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalableno" /> 忽略将页面中的数字识别为电话号码 <met…

奋斗逼,真牛逼!

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

Entity Framework 批量插入

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

MYSQL分页limit速度太慢优化方法

当一个表数据有几百万的数据时&#xff0c;分页的时候成了问题如 select * from table limit 0,10 这个没有问题 当 limit 200000,10 的时候数据读取就很慢&#xff0c;可以按照一下方法解决最近一个网站的服务器评论被人刷死&#xff0c;导致mysql数据库异常发生too many open…

数据结构之求二叉树的所有叶子和以及叶子总数

1、题目 数据结构之求二叉树的所有叶子和以及叶子总数 2、代码实现 tree.java package leetcode.chenyu.test;public class Tree {int val;Tree left;Tree right;Tree(int val) {this.val = val;} } package leetcode.chenyu.test;public class TreeTest {public stat…

华为手机Android系统优缺点,第一次安卓机优缺点总结(对比iOS系统)

这次老婆换了x,换下来的7我都没用到&#xff0c;被丈母娘用了&#xff0c;我看着手上的6p&#xff0c;狠心换了华为Mate10Pro(6g,64g)。其实在一年前就开始关注华为的手机&#xff0c;对齐的性能了解主要来自网络媒体&#xff0c;外观认识主要来自身边朋友。从iOS转变到安卓&am…

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;这一本…

java文字特效

立体效果的文字 主要使用了Graphics类中的setFont和setColor的方法&#xff0c;绘制多层字然后加上平移一个坐标即可实现多重叠加的效果,让人看起来就像是立体一样,详情请见源码 阴影效果的文字 和面一样&#xff0c;只是平移的方式有些不同&#xff0c;详情请见源码 倾斜效果的…

Android之如何判断设备是平板还是手机

1、判断方法 public static boolean isTablet(Context context) {return (context.getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) > Configuration.SCREENLAYOUT_SIZE_LARGE;} 2、layout-port 和layout-land区别 layout-po…

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…