基于最新的MAUI混合VUE3开发Android应用（2022-11-01）-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于最新的MAUI混合VUE3开发Android应用（2022-11-01）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

因为最近自己想着要整一个手机端应用来玩玩，先是使用了Uni-APP开发但是发现不怎么好使，开发了几天后浪费了大量时间结果在打包后操作HTML Document的时候没有这个属性，好吧或许是因为我没仔细看Uni-App文档它并不支持打包后在APP和小程序中支持Document，这是没仔细看文档的后果，谨记。
然后呢就找了很多可以将Vue混合到Android的框架或者什么什么的，然后就注意到了微软的MAUI，别说还行挺好使的

前提条件，我的开发环境是，visual studio 2022 + .net 6，其他的应该也可以，但是net版本注意最好是net5,net6,net7

注意！！！项目路径不能有中文！不能有中文！一定是全英文路径，这样可以减少很多莫名其妙的Bug

好的我们现在来开始吧。（文末附带项目地址）

首先创建一个项目，Blazor也可以，我们这直接用MAUI应用更好改造点

基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

创建完成后呢，Microsoft.NET.Sdk这里加上 .Razor 这个时候它会自己引入需要的包

Microsoft.NET.Sdk.Razor

基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

引入完成后大概是这样的，开始改造吧基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

打开这个页面把标签变成这样基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

打开这个xaml的cs，把这些删掉

基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

基于最新的MAUI混合VUE3开发Android应用（2022-11-01）打开MauiProgram把它变成大概这样

基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

好的接下来就是重点环节了，我们新建这几个东西，wwwroot静态文件夹， _Imports.razor，还有你自己定义的入口组件，Main.razor对应着MainPage 里面的 {x:Type local:Main}，这个是可以自己定义的 基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

这个index.html这里只是先做个示范，下面的才是用的基于最新的MAUI混合VUE3开发Android应用（2022-11-01）

Main.razor，这个里面的Test就是等会我们要调用的方法

@inject IJSRuntime JSRuntime
@implements IDisposable
@code {

    [JSInvokable]
    public static Task<string> Test()
    {
        return Task.FromResult("测试通过啦！");
    }
    public void Dispose()
    {

    }
}

_Imports.razor

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Demo01

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <div id="app">请稍等，初始化中...</div>
    <div id="blazorApp" style="display: none;">初始化服务用的</div>
    <script src="_framework/blazor.webview.js" autostart="false"></script>
</body>
</html>

注意：<script src="_framework/blazor.webview.js" autostart="false"></script>是BlazorWebView用来注册C#交互的，不可以缺少

好的环境大概差不多了，我们接下来搭建Vue项目，这里我用 npm init vue@3 指令创建基于最新的MAUI混合VUE3开发Android应用（2022-11-01） 注意！Done，Now run: 下面的指令一定要执行一遍