[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了。

[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发_第1张图片

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作为目标框架。

[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发_第2张图片

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

[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发_第3张图片

将其放置在wwwroot目录下,然后在index.html中引入
[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发_第4张图片

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

创建Vue应用

在Views目录下创建 HomePage.xaml作为Vue应用的容器,在页面中创建视图元素,并设置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语法。
[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发_第5张图片

我们在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的根元素名称相同,否则会报错。

[MAUI]深入了解.NET MAUI Blazor与Vue的混合开发_第6张图片

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

请勿将

你可能感兴趣的:(.NET,MAUI,.NET,移动开发,.net,vue.js,xamarin,maui)