基于最新的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应用更好改造点

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

Microsoft.NET.Sdk.Razor

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

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

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

打开MauiProgram把它变成大概这样

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

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

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 指令创建 注意！Done，Now run: 下面的指令一定要执行一遍

执行成功应该是这样的

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

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

接下来打包到MAUI

把这些文件复制到MAUI

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

变成这样就可以了，你可以把
<div id="blazorApp" style="display: none;">初始化服务用的</div>
<script src="_framework/blazor.webview.js" autostart="false"></script>

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

接下来就是运行了

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

运行成功，按F12可以调出调试器，因为我们加了
#if DEBUG
builder.Services.AddBlazorWebViewDeveloperTools();
#endif

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

参考链接：

使用 BlazorWebView 在 .NET MAUI 应用中托管 Blazor Web 应用 - .NET MAUI | Microsoft Learn

ASP.NET Core Razor 组件 | Microsoft Learn

在 ASP.NET Core Blazor 中从 .NET 方法调用 JavaScript 函数 | Microsoft Learn

从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法 | Microsoft Learn

第一次写文，请多包涵

项目链接：MauiVueProjectDemo: MAUI混合VUE3开发

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

基于Quartus Prime的NiosII基础开发流程
基于Quartus Prime的NiosII基础开发流程 2018年11月23日 21:44:13 bt_ 阅读数 2246 更多分类专栏: FPGA 版权声明:本文为博主原创文章,遵循 CC 4. ...
android 版本使用报告,『独家首发』基于最新Android5.1版本 Mate7 EMUI3.1轻度体验报告...
本帖最后由关山聆月于 2015-6-16 20:17 编辑 Top.png (330.24 KB, 下载次数: 156) 2015-6-13 14:50 上传日前,Mate7最新基于Androi ...
android最新面试题及答案，Android项目开发如何设计整体架构
首先,讲讲为什么我们要讲JAVA的语言进阶,从整体来讲,Java和Android的区别在于Android程序是基于组件和配置的,而且Android开发以Java语言为开发工具,表面上看他们有点同宗不同 ...
IDEA基于kotlin开发android程序配置小结
IDEA功能极其强大,和微软的宇宙第一IDE不相上下.用了很长时间,对它配置的完善性产生了近乎迷信的感情.似乎只要走正常渠道,用它来配置,没有不成功的. IDEA是开发android原生程序的利器,a ...
《Linux设备驱动开发详解(第3版)》（即《Linux设备驱动开发详解：基于最新的Linux 4.0内核》）网购链接
<Linux设备驱动开发详解:基于最新的Linux 4.0内核> china-pub 天猫 dangdang 京东 China-pub 8月新书销售榜推荐序一技术日新月 ...
openfire android 发送图片,基于openfire+smack开发Android即时聊天应用[四]-单人聊天、群聊、发送接收文件等...
这篇文章主要介绍如何实现点对点单人聊天.多人的群聊.以及如何给对方发送文件,如何发送图片消息和语音消息等功能. 1.单人聊天 1.首先创建聊天对象 /** * 创建聊天窗口 * @param jid ...
kotlin与java混合开发_使用kotlin和Java混合开发Android项目爬坑记录
使用kotlin和Java混合开发Android项目爬坑记录不定期将开发过程中遇到的问题添加在此处,加深记忆. 主要内容包括但不限于java与kotlin语言的一些区别,以及在使用android-s ...
基于NDK、C++、FFmpeg的android视频播放器开发实战-夏曹俊-专题视频课程
基于NDK.C++.FFmpeg的android视频播放器开发实战-1796人已学习课程介绍课程包含了对流媒体(拉流)的播放,演示了播放rtmp的香港卫视,支持rtsp摄像头和ht ...
视频教程-基于NDK、C++、FFmpeg的android视频播放器开发实战-Android
基于NDK.C++.FFmpeg的android视频播放器开发实战夏曹俊:南京捷帝科技有限公司创始人,南京大学计算机硕士毕业,有15年c++跨平台项目研发的经验,领导开发过大量的c++虚拟仿真,计算 ...

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

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

最新文章

热门文章