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

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

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

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

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

android studio和vue Android studio和vue混合开发_android studio和vue

 

android studio和vue Android studio和vue混合开发_c#_02

 

android studio和vue Android studio和vue混合开发_开发语言_03

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

Microsoft.NET.Sdk.Razor

android studio和vue Android studio和vue混合开发_android studio和vue_04

android studio和vue Android studio和vue混合开发_c#_05

引入完成后大概是这样的,开始改造吧

android studio和vue Android studio和vue混合开发_开发语言_06

打开这个页面把标签变成这样 

android studio和vue Android studio和vue混合开发_android studio和vue_07

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

android studio和vue Android studio和vue混合开发_c#_08

android studio和vue Android studio和vue混合开发_android_09

 打开MauiProgram把它变成大概这样

android studio和vue Android studio和vue混合开发_开发语言_10

好的接下来就是重点环节了,我们新建这几个东西,wwwroot静态文件夹, _Imports.razor,还有你自己定义的入口组件,Main.razor对应着MainPage 里面的 {x:Type local:Main},这个是可以自己定义的

android studio和vue Android studio和vue混合开发_c#_11

android studio和vue Android studio和vue混合开发_c#_12

android studio和vue Android studio和vue混合开发_开发语言_13

 这个index.html这里只是先做个示范,下面的才是用的

android studio和vue Android studio和vue混合开发_javascript_14

 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 指令创建

android studio和vue Android studio和vue混合开发_开发语言_15

 注意!Done,Now run: 下面的指令一定要执行一遍 

android studio和vue Android studio和vue混合开发_android_16

android studio和vue Android studio和vue混合开发_android_17

执行成功应该是这样的

接下来让我们编写对应的js调用C#代码

打开App.vue,DotNet也可以是window["DotNet"]看你自己想用什么

android studio和vue Android studio和vue混合开发_c#_18

 接下来打包到MAUI

android studio和vue Android studio和vue混合开发_javascript_19

android studio和vue Android studio和vue混合开发_android studio和vue_20

 

android studio和vue Android studio和vue混合开发_android_21

 把这些文件复制到MAUI

稍微改造一下,前面忘记改了

android studio和vue Android studio和vue混合开发_android_22

变成这样就可以了,你可以把
     

<div id="blazorApp" style="display: none;">初始化服务用的</div>
       <script src="_framework/blazor.webview.js" autostart="false"></script>

加到你的vue里面的index.html去

接下来就是运行了

android studio和vue Android studio和vue混合开发_android_23

你可以选择Android还是什么设备运行,我这直接以Window运行了 

android studio和vue Android studio和vue混合开发_android studio和vue_24

运行成功,按F12可以调出调试器,因为我们加了

#if DEBUG
         builder.Services.AddBlazorWebViewDeveloperTools();
 #endif

android studio和vue Android studio和vue混合开发_c#_25

好的,调用js代码完成了,怎么调用C#代码就自己去看看官网教程吧,因为我自己也还没有调用js这个需求,很抱歉!