当前位置:网站首页>[Maui official version] Create a cross-platform Maui program, as well as the implementation and demonstration of dependency injection and MVVM two-way binding

[Maui official version] Create a cross-platform Maui program, as well as the implementation and demonstration of dependency injection and MVVM two-way binding

2022-08-10 22:00:00 WeskyNet

 

前言:Maui终于在昨天(2022年8月9日)pushed out.Can't wait to play it today.

A、I have it locallyVS2022,不过版本比较老,Select Update here.工具 -> Get features and updates inside,New version updates are available.

 

B、最新版本是17.3.0,I only have it locally17.1.1,选择 更新.

 

C、Let the web fly for a while.

 

1、更新完毕,打开VS,创建一个新的Maui项目(.NET MAUI应用)

 

2、创建成功以后,On the right you can see the starter project as shown.Platforms里面,is the type of platform environment supported by the project,包括安卓、苹果、windows桌面等.

 

 

3、直接运行,走一个.默认情况下,启动为Windows桌面客户端APP的形式.

 

4、Some hierarchy of projects,如图所示.App构造函数里面,The home page is specified as AppShell;AppShellInside it redirects to MainPage,MainPageDesigner and business interaction code inside,有一个点击事件.

 

5、VSThe toolbar has a row of tools,Can be used to configure the simulation runtime environment.

 

6、比如说,Here I have configured a default emulator.

 

7、配置好以后,You can select the emulator by running it.

 

8、右键,默认情况下,Both Android and iOS,没有iOS模拟设备,just remove this option.

 

9、然后直接运行,会看到提示,Shows deploying to xxx模拟器上.The premise may require that the computer has virtualization enabled,没开启的,You can refer to my other article to turn on virtualization:https://www.cnblogs.com/weskynet/p/14825081.html

 

10、运行以后的效果,如图所示.The display content is the same as the desktop side,Equivalent to a set of the same code,Multiple terminals can run at the same time.

【注意事项】MauiThe project path must not contain Chinese,Otherwise, you may be prompted that the file cannot be found ,或者 APT 2000 errors and so on.

 

11、Test the button click,Make a breakpoint,走一波,嘿,really came in.

12、新建一个Maui页面,it's called hereWesky,Write something in there.同时把AppThe home page in the constructor is changed to my own new page,Then take a wave.

 

13、Then create a new one herebutton按钮,Make a pop-up window to test the effect.

 

14、然后,Test the effect of dependency injection.新建一个Test类以及接口ITest,里面写一个GetString方法,用来返回一个字符串.然后在Program里面,进行依赖注入注册,然后在AppInject into the constructor,You can see that it has entered the constructor,And can get the instance,Indicates that dependency injection is in effect.

 

15、Maui和WPFAlmost identical twins,So it can definitely be supportedMVVM模式啦~~ 新建一个WeskyViewModel,Constructor injection is also performed insideITest接口,Then develop a binding method for the click eventClickCommand,用来测试MVVMtwo-way binding of events.点击以后,进行弹窗,弹出TestThe prompt information for getting the string inside,Do a wave at the same timeMaui自带的依赖注入+MVVMMode while validating the effect.

16、Wesky.cs文件里面(Designer code file),构造函数添加WeskyViewModel的注入,然后对BindingContextAssigned to the injected parameter instance,用来提供对MVVMA two-way bound association.

 

17、Wesky.Xamldesigner file,原来的ClickEvent kills,改成CommandMake the binding just definedClickCommand方法,用来测试MVVMThe effect of two-way binding.

 

18、App的构造函数里面,对Weskypage for injection,Then assign the instance to MainPage,Instance passing for dependency injection.

 

19、最后,在Program里面,添加Wesky页面和ViewModel的注册.注册的生命周期,可以根据自己的实际情况进行选择,包括Singleton、Scoped、Transient,跟传统的.NET 6The registration method is the same.

 

20、然后,运行一下,The program runs in the emulator,Then click the button later,效果如图所示.Explain dependency injection+MVVMAt the same time, the verification has passed.

 

21、After running the emulator,在根目录下,There will be corresponding generatedapk文件,Can be used for installation.One is that there is no signed version,One is the signed version.

 

22、Copy it to my old antique Huawei Hongmeng mobile phone,试着安装一下.

23、尴尬了,没成功.No chance of success,The high probability may be based on Huawei's Kirin chiparm架构的,And the emulator is right and wrongarm架构的.The following failure reasons,只是其中之一.

 

24、选择一个arm架构的模拟器,再创建一个,走一波

 

25、Due to the local system environment,没能启动arm架构的模拟器,So temporarily failed~~

 

26、最后,Run without an emulator,直接当作WindowsA wave of desktop programs,效果如图所示.

 

27、以上就是该文章的全部内容,If you guys find it helpful,欢迎推荐、留言.Interested people are also welcome,You can also follow my personal account:微信公众号搜索【Dotnet Dancer】即可关注.

 如果对.NET技术比较感兴趣,Also like to brag chat,Also available in that article【https://www.cnblogs.com/weskynet/p/16573873.html】最下方,点击加入QQ群,Let's brag and talk about life together~

原网站

版权声明
本文为[WeskyNet]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/222/202208102106470147.html