[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发

文章目录

    • Vue在混合开发中的特点
    • 创建MAUI项目
    • 创建Vue应用
    • 使用element-ui组件库
    • JavaScript和原生代码的交互
      • 传递根组件参数
      • 从设备调用Javascript代码
      • 从Vue页面调用原生代码
    • 读取设备信息
    • 项目地址

.NET MAUI结合Vue的混合开发可以使用更加熟悉的Vue的语法代替Blazor语法,你现有项目不必重写。之前写过一篇 [MAUI] 在.NET MAUI中结合Vue实现混合开发 ,其中介绍了如何创建一个vue应用并将其打包至MAUI项目,这种方式依赖vue-cli创建和打包静态站点,好处是可以使用Node.js 的构建但MAUI仅仅作为容器。开发应用需要一个独立的host项目

这次用集成的方式。将vue作为MAUI的一部分,这样就可以在MAUI项目中直接使用vue了。

在这里插入图片描述

Vue在混合开发中的特点

首先要说的是,Vue框架是渐进性的,所谓渐进性,就是Vue不会强求你使用所有的框架特性,你可以根据需要逐步使用。

同样地,element-ui也可以通过引入样式和组件库,配合Vue使用

因此我们不需要Vue Router、Vuex、Vue CLI、单文件组件这些高级特性,仅仅引入Vue.js即可使用Vue模板语法。我们将利用Blazor引擎的如下功能:

  • 组件化开发
  • 静态资源管理
  • js代码的注入
  • js调用C#代码
  • C#调用js代码

由.NET MAUI提供的功能:

  • 路由管理
  • 状态管理

由Vue提供模板语法,事件处理,计算属性/侦听器等,以及Element-UI提供交互组件。

创建MAUI项目

创建一个MAUI项目,这里使用的是Visual Studio 2022 17.7.3,创建一个Blazor MAUI App项目命名MAUI-Vue-Hybriddev-Integrated,选择Android和iOS作为目标平台,选择.NET 7.0作为目标框架。

在这里插入图片描述

从Vue官网下载最新的Vue.js

在这里插入图片描述

将其放置在wwwroot目录下,然后在index.html中引入
在这里插入图片描述

    <script src="lib/vuejs/vue.js"></script>

创建Vue应用

在Views目录下创建 HomePage.xaml作为Vue应用的容器,在页面中创建<BlazorWebView>视图元素,并设置HostPagewwwroot/index.html,这样就可以在MAUI中使用Vue了。

<BlazorWebView x:Name="blazorWebView"HostPage="wwwroot/index.html"><BlazorWebView.RootComponents><RootComponent Selector="#app"x:Name="rootComponent"ComponentType="{x:Type views:HomePageWeb}" /></BlazorWebView.RootComponents>
</BlazorWebView>

每个BlazorWebView控件包含根组件(RootComponent)定义,ComponentType是在应用程序启动时加载页面时的类型,该类型需要继承自Microsoft.AspNetCore.Components.IComponent,由于我们的导航是由MAUI处理的,因此我们不需要使用Blazor路由,直接使用Razor组件

在Views目录下创建HomePageWeb.razor,这是Vue应用页面相当于Vue的单文件组件,这里可以使用Vue的模板语法,而不是Blazor的Razor语法。
在这里插入图片描述

我们在HomePageWeb.razor中写下Vue官方文档中Hello Vue示例代码


<div id="vue-app">{{ message }}
</div><script type="text/javascript">var app = new Vue({el: '#vue-app',data: {message: 'Hello Vue!',}})</script>

注意:Vue的根元素名称不要跟Blazor的根元素名称相同,否则会报错。

在这里插入图片描述

此时更改JavaScript里的内容,你会发现Blazor页面不会热加载。

请勿将 <script> 标记置于 Razor 组件文件 (.razor) 中,因为 <script> 标记无法由Blazor 动态更新。

于是需要将script部分代码放置在外部,此时有两种方案,一个是放在wwwroot/js目录下,然后在wwwroot/index.html中引入,还有一种是使用并置的js文件,这种方式是所谓的"CodeBehind",因为更利于组织代码,这里我们使用并置的js文件。

创建一个HomePageWeb.razor.js文件,将script部分代码放置在其中,然后在HomePageWeb.razor中引入

在这里插入图片描述

protected override async Task OnAfterRenderAsync(bool firstRender)
{if (firstRender){await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./Views/HomePageWeb.razor.js");}
}

发布应用后,框架会自动将脚本移动到 Web 根目录。 在此示例中,脚本被移动到./wwwroot/Views/HomePageWeb.razor.js

使用element-ui组件库

同样,我们在element-ui官方CDN下载样式文件和组件库,首先在index.html中引入样式和组件库

<link href="css/app.css" rel="stylesheet" />
...
<script src="lib/element-ui/index.js"></script>

然后在HomePageWeb.razor中使用组件

<div id="vue-app">{{ message }}<el-input v-model="input" placeholder="请输入内容"></el-input><el-button @click="showDialog = true">提交</el-button><el-dialog :visible.sync="showDialog" title="消息"><p>{{input}}</p><p>提交成功</p></el-dialog>
</div>

CodeBehind中引入组件

var app = new Vue({el: '#vue-app',data: {message: 'Hello Vue!',showDialog: false,input: 'text message from vue'}
})

运行效果如下:

在这里插入图片描述

在这里插入图片描述

JavaScript和原生代码的交互

Blazor组件中的代码可以通过注入IJSRuntime来调用JavaScript代码,JavaScript代码可以通过调用DotNet.invokeMethodAsync来调用C#代码。

传递根组件参数

如果被调用的代码位于其他类中,需要给这个Blazor组件传递实例,还记得刚才提及的根组件(RootComponent)吗?我们用它来传递这个实例,称之为根组件参数,详情请查看官方文档 在 ASP.NET Core Blazor Hybrid 中传递根组件参数

创建SecondPage.xaml,根据刚才的步骤创建一个BlazorWebView并注入vuejs代码
html部分创建一个el-dialog组件,当消息被接收时,显示对话框


@using Microsoft.Maui.Controls
@inject IJSRuntime JSRuntime<div id="vue-app">{{ message }}<el-dialog :visible.sync="showDialog" title="Native device msg recived!"><p>{{msg}}</p></el-dialog>
</div>

在@code代码段中创建SecondPage对象。


@code {[Parameter]public SecondPage SecondPage { get; set; }...
}

回到SecondPage.xaml.cs,在构造函数中将自己传递给根组件参数

public SecondPage()
{InitializeComponent();rootComponent.Parameters =new Dictionary<string, object>{{ "SecondPage", this }};
}

从设备调用Javascript代码

在SecondPage.xaml中,创建一个Post按钮,点击按钮后将文本框PostContentEntry的内容传递给Vue代码

<StackLayout Grid.Row="1"><Entry x:Name="PostContentEntry" Text="Hello,this is greetings from native device"></Entry><Button Text="Post To Vue"HorizontalOptions="Center"VerticalOptions="End"HeightRequest="40"Clicked="Post_Clicked"></Button></StackLayout>

在这里插入图片描述

在SecondPage.razor.js中, 创建greet方法,用于接收从原生代码传递过来的参数,并显示在对话框中。

window.app = new Vue({el: '#vue-app',data: {message: 'Vue Native interop',showDialog: false,msg: ''},methods: {greet: function (content) {this.msg = content;this.showDialog = true;}},

在SecondPage.xaml.cs中,创建一个OnPost事件,当Post按钮被点击时触发该事件


public event EventHandler<OnPostEventArgs> OnPost;private void Post_Clicked(object sender, EventArgs args)
{OnPost?.Invoke(this, new OnPostEventArgs(this.PostContentEntry.Text));
}

在SecondPage.razor中,订阅OnPost事件,当事件被触发时,调用greet方法,将参数传递给JavaScript代码


public async void Recived(object o, OnPostEventArgs args)
{await JSRuntime.InvokeAsync<string>("window.app.greet", args.Content);
}protected override async Task OnAfterRenderAsync(bool firstRender)
{try{if (firstRender){SecondPage.OnPost += this.Recived;await JSRuntime.InvokeAsync<IJSObjectReference>(
"import", "./Views/SecondPageWeb.razor.js");}}catch (Exception ex){Console.WriteLine(ex);}}

在页面销毁时,要取消订阅事件,避免内存泄漏。


@implements IDisposable...public void Dispose()
{SecondPage.OnPost -= this.Recived;
}

运行效果如下

在这里插入图片描述

从Vue页面调用原生代码

原生代码指的是.NET MAUI平台的C#代码,比如要在设备上显示一个弹窗,需要调用Page.DisplayAlert方法,它隶属于Microsoft.Maui.Controls命名空间,属于MAUI组件库的一部分。

因此需要将MAUI类型的对象通过引用传递给JavaScript调用,调用方式是通过将对象实例包装在 DotNetObjectReference 中传递给JavaScript。使用该对象的invokeMethodAsync从 JS 调用 .NET 实例方法。详情请查看官方文档 JavaScript 函数调用 .NET 方法

在@code代码段中,界面加载时创建DotNetObjectReference对象

@code {private DotNetObjectReference<SecondPageWeb>? objRef;protected override void OnInitialized(){objRef = DotNetObjectReference.Create(this);}

页面加载完成时,将DotNetObjectReference对象传递给JavaScript代码


protected override async Task OnAfterRenderAsync(bool firstRender)
{try{if (firstRender){SecondPage.OnPost += this.Recived;await JSRuntime.InvokeAsync<IJSObjectReference>(
"import", "./Views/SecondPageWeb.razor.js");await JSRuntime.InvokeAsync<string>("window.initObjRef", this.objRef);}}catch (Exception ex){Console.WriteLine(ex);}}

window.app = new Vue({...data: {...objRef: null},})
window.initObjRef = function (objRef) {window.app.objRef = objRef;
}

在SecondPage.razor中,创建el-input组件和el-button组件,当按钮被点击时,调用Post方法,将文本框的内容传递给原生代码

<div id="vue-app">{{ message }}<el-input v-model="input" placeholder="请输入内容"></el-input><el-button @click="post">Post To Native</el-button><el-dialog :visible.sync="showDialog" title="Native device msg recived!"><p>{{msg}}</p></el-dialog>
</div>

按钮和对话框的显示逻辑与之前相同,不再赘述。

在这里插入图片描述

在SecondPage.razor中,创建Post方法,方法被调用时,将触发MAUI组件库的原生代码

[JSInvokable]
public async Task Post(string content)
{await SecondPage.DisplayAlert("Vue msg recived!", content, "Got it!");}

vue绑定的函数中,调用DotNet.invokeMethodAsync将文本框的内容传递给原生代码


window.app = new Vue({el: '#vue-app',data: {message: 'Vue Native interop',showDialog: false,msg: '',input: 'Hi, I am a text message from Vue',deviceDisplay: null,objRef: null},methods: {greet: function (content) {this.msg = content;this.showDialog = true;},post: function () {this.objRef.invokeMethodAsync('Post', this.input);}}
})

运行效果如下

在这里插入图片描述

读取设备信息

可以使用Vue的watch属性监听数据变化,当MAUI对象加载完成时,调用原生代码,读取设备信息

<div id="vue-app">...<p>Device Display</p><p>{{deviceDisplay}}</p>
</div>

CodeBehind代码如下:

watch: {objRef: async function (newObjRef, oldObjRef) {if (newObjRef) {var deviceDisplay = await this.objRef.invokeMethodAsync('ReadDeviceDisplay');console.warn(deviceDisplay);this.deviceDisplay = deviceDisplay;}}
},

原生代码如下:


[JSInvokable]
public async Task<string> ReadDeviceDisplay()
{return await Task.FromResult(SecondPage.ReadDeviceDisplay());}

在ReadDeviceDisplay方法中,我们读取设备分辨率、屏幕密度、屏幕方向、屏幕旋转、刷新率等信息

public string ReadDeviceDisplay()
{System.Text.StringBuilder sb = new System.Text.StringBuilder();sb.AppendLine($"Pixel width: {DeviceDisplay.Current.MainDisplayInfo.Width} / Pixel Height: {DeviceDisplay.Current.MainDisplayInfo.Height}");sb.AppendLine($"Density: {DeviceDisplay.Current.MainDisplayInfo.Density}");sb.AppendLine($"Orientation: {DeviceDisplay.Current.MainDisplayInfo.Orientation}");sb.AppendLine($"Rotation: {DeviceDisplay.Current.MainDisplayInfo.Rotation}");sb.AppendLine($"Refresh Rate: {DeviceDisplay.Current.MainDisplayInfo.RefreshRate}");var text = sb.ToString();return text;
}

当页面加载时,会在HTML页面上显示设备信息

在这里插入图片描述

项目地址

Github:maui-vue-hybirddev

关注我,学习更多.NET MAUI开发知识!

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

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

相关文章

国内外Scrum管理工具大全

​ 敏捷开发涉及多个阶段和活动&#xff0c;因此有许多工具可以帮助团队有效地规划、跟踪和管理工作。以下是一些常用的敏捷开发工具&#xff1a; Trello&#xff1a; Trello是一种直观的项目管理工具&#xff0c;它使用卡片和面板来帮助团队协作和可视化项目进度。适合小型团…

数据图册页面(左边一列图片缩略图,右边展示图片大图)

最近要写这么一个页面&#xff0c;左侧一列图片缩略图&#xff0c;点击左侧缩略图后有选中效果&#xff0c;然后右侧展示图片原图&#xff0c;还能够左右翻页查看。 最后写了一个demo出来&#xff0c;demo还不是很完善&#xff0c;需要自己修改&#xff0c;后面我也给出了修改建…

如何处理前端SEO(搜索引擎优化)?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

使用OkHttp和Java来下载

以下是一个使用OkHttp和Java来下载内容的下载器程序&#xff0c;同时使用了jshk.com.cn/get_proxy来获取代理服务器。请注意&#xff0c;为了简化代码&#xff0c;我们将忽略一些异常处理和安全性检查。 import java.io.File;import java.io.FileOutputStream;import java.io.I…

块状数据结构学习笔记

分块 分块的思想和珂朵莉树很类似&#xff0c;就是把原序列分成若干个块&#xff0c;对块进行操作的奇妙思想。复杂度通常带根号。分块的块长也有讲究&#xff0c;通常对于大小为 n n n 的数组&#xff0c;取距离 n \sqrt n n ​ 最近的 2 2 2 的幂数或直接取 n \sqrt n n…

第一节——vue安装+前端工程化

作者&#xff1a;尤雨溪 官网&#xff1a;简介 | Vue.js 脚手架文档 创建一个项目 | Vue CLI 一、概念&#xff08;了解&#xff09; 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&…

在Kubernetes(k8s)上部署整个SpringCloud微服务应用

视频教程地址&#xff1a;https://www.bilibili.com/video/BV1Xh4y1q7aW/ 文章目录 项目准备打成使用Docker打成镜像准备Docker仓库打包项目为Docker镜像 部署应用到k8s创建nfs挂载目录创建一些基本资源创建命名空间创建拉取镜像的secret创建java运行环境的profile 部署mysql创…

c++_learning-c++标准库STL和boost库

c的标准库 STL标准库&#xff1a;#include<iostream>&#xff1a;#include<iomanip>&#xff1a;#include<cstdlib>&#xff1a;#include<cmath>&#xff1a;#include<tuple>&#xff1a;利用可变参数模板&#xff0c;借助“递归继承”或“递归组…

面试经典150题——Day16

文章目录 一、题目二、题解 一、题目 42. Trapping Rain Water Given n non-negative integers representing an elevation map where the width of each bar is 1, compute how much water it can trap after raining. Example 1: Input: height [0,1,0,2,1,0,1,3,2,1,2,…

vue的v-for中循环修改变量(this.xxx)的给子组件传值覆盖重复的问题

遇到问题 使用v-for&#xff0c;其中需要根据不同的item修改某个变量(this.xxx)&#xff0c;然后向子组件中传值&#xff0c;但是发现传到子组件中的值却全是重复一样的&#xff1a; 我们循环qsList&#xff0c;其中<qs-form>是我自定义的一个组件&#xff0c;想向该子组…

Godot 官方2D C#重构(1):雪花碰撞

前言 Godot 官方 教程 Godot 2d 官方案例C#重构 专栏 Godot 2d 重构 github地址 实现效果 难点介绍 Godot GDScript和C# 对应关系大部分靠猜 文件导入 资源地址&#xff1a;默认为res://开头2D贴图导入类型&#xff1a;Texture2D public Texture2D Bullet_Image new Textu…

【通信、算法、旅游、人工智能、图像处理、机械、医疗】EI会议(2023)

1. EIECT 2023 (2023 3rd International Conference on Electronic Information Engineering and Computer Technology) 地点&#xff1a;中国深圳 时间&#xff1a;2023年11月17 - 19日 EI检索&#xff1a;是官方网站 2. AIAC 2023 (The 2023 International Conference on Ar…

超全整理,服务端性能测试-tomcat部署项目/查看日志(细致)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 tomcat部署单项目…

TechSmith Camtasia Studio 23.3.2.49471 Crack

全新的Camtasia 2023.2 Camtasia Studio是专业的屏幕录像和视频编辑的软件套装。软件提供了强大的屏幕录像&#xff08;Camtasia Recorder&#xff09;、视频的剪辑和编辑&#xff08;Camtasia Studio&#xff09;、视频菜单制作&#xff08;Camtasia MenuMaker&#xff09;、视…

Spring framework :基于 jdk 动态代理实现连接池复用

前言 在数据库开发中&#xff0c;连接池是一种重要的技术手段&#xff0c;它可以提高数据库连接的复用性和性能。连接池的原理是在应用启动时创建一定数量的数据库连接&#xff0c;并将这些连接保存在一个池中&#xff0c;应用程序需要数据库连接时&#xff0c;从连接池中获取…

Oracle数据库修改序列,Oracle中的主键值和序列中的值对应不上时的处理方式

select max(stu.id) maxid from student stu; //查询student表中id的最大值select XXX_SEQ.nextval from dual; //查询student表中id对应序列XXX_SEQ的下一个值alter sequence XXX_SEQ increment by 1000; //将序列XXX_SEQ步长改为1000&#xff0c;对应 student表中id的最大值s…

全波形反演培训的思考与总结

一. InversionNet: 最简单的端到端DL_FWI 1. 网络结构&#xff1a; 图1 构建了一个具有编码器-解码器结构的卷积神经网络&#xff0c;根据地震波动数据模拟地下速度结构。编码器主要由卷积层构建&#xff0c;它从输入地震数据中提取高级特征并将其压缩为单个高维向量。解码器然…

推荐《机动战士高达SEED DESTINY》

《机动战士高达SEED DESTINY》是《机动战士高达SEED》的续集&#xff0c;于日本时间2004年10月9日—2005年10月1日每周六下午六点在每日放送、TBS电视台系列电视台播出&#xff0c;全50话。 [1] 台湾版权由博英社取得&#xff0c;并于2005年10月8日起由中国电视公司在每周六播…

面试题-React(十四):什么是高阶组件(HOC)及其作用

一、高阶组件的概念 高阶组件&#xff08;HOC&#xff09;是一种函数&#xff0c;接受一个组件作为参数&#xff0c;并返回一个新的组件。这个新的组件具有一些增强的特性或功能。简而言之&#xff0c;高阶组件就是用来“包装”其他组件的函数。 二、高阶组件的作用 高阶组件…

float、double类型的转化和判断为零问题

1、将字符串转化为float、double 浮点数在内存中的存储机制和整形数据不同&#xff0c;有舍入误差&#xff0c;在计算机中用近似表示任意某个实数。具体来说&#xff0c;这个数由一个整数或定点数&#xff08;即尾数&#xff09;乘以某个基数&#xff08;计算机中通常是2&…