maui BlazorWebView+本地html (vue、uniapp等都可以) 接入支付宝sdk 进行支付宝支付 开发 Android app
首先添加支付宝sdk的绑定库
nuget 包:Chi.MauiBinding.Android.AliPay
项目地址:https://github.com/realZhangChi/MauiBinding
新建maui Blazor应用,在根目录创建一个静态类PublicMethods.cs (类名位置都可以自定义,这个静态类主要给html js 调用使用的,js调用服务端方法 从 ASP.NET Core Blazor 中的 JavaScript 函数调用 .NET 方法 | Microsoft Learn)
注意其中的 #if ANDROID IOS 指在不同的平台下执行操作
using Microsoft.JSInterop; using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Text.Encodings.Web; using System.Text.Json; using System.Text.Unicode; using System.Threading.Tasks; using static System.Runtime.InteropServices.JavaScript.JSType; namespace MauiApp7 { public static class PublicMethods { [JSInvokable] public static async Task AliPays(IJSObjectReference objRef,string aliPayStrs) { #if ANDROID _ =Task.Run(async () => { string con = aliPayStrs;//调用支付宝app支付接口返回的内容
var act = Microsoft.Maui.ApplicationModel.Platform.CurrentActivity; Com.Alipay.Sdk.App.PayTask pa = new Com.Alipay.Sdk.App.PayTask(act); var result = pa.PayV2(con, true); var resultStatus = result.TryGetValue("resultStatus",out string resultStatusDic)? resultStatusDic:"-1"; var memo = result.TryGetValue("memo",out string memoDic)? memoDic:""; if (resultStatus == "9000") { memo = "支付成功"; } else if (resultStatus == "-1") { memo = "支付失败"; } //执行前端html window上注册的回调方法 await objRef.InvokeVoidAsync("aliPayCallBack", new { resultStatus = resultStatus, memo = memo }); }); #endif } } }
1.修改MainPage.xaml 中的代码,删除BlazorWebView 下子内容,修改后的代码为
<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html" BlazorWebViewInitialized="blazorWebView_BlazorWebViewInitialized"> </BlazorWebView>
修改MainPage.xaml.cs中代码添加BlazorWebViewInitialized 事件,此事件是允许BlazorWebView在Android平台下能够同时访问http和https的混合请求,需搭配android:usesCleartextTraffic="true" 使用 具体参考 maui BlazorWebView Android 中混合使用https和http - 落叶子 - 博客园 (cnblogs.com)
private void blazorWebView_BlazorWebViewInitialized(object sender, Microsoft.AspNetCore.Components.WebView.BlazorWebViewInitializedEventArgs e) { #if ANDROID e.WebView.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow; #endif }
2. 修改 wwwroot下的index.html 具体代码为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>MauiApp7</title> <base href="/" /> <!--引用jquery 可以自行引入--> <script src="lib/jquery.min.js"></script> </head> <body> <button style="width: 100%;background: rgb(5, 200, 235);border: 0rem;" id="zhifuapp">支付宝App支付</button><br /><br /> <script src="_framework/blazor.webview.js" autostart="false" crossorigin="anonymous"></script> <script> $(function () { var jsObjectReference; $("#zhifuapp").click(function () { // 调佣服务接口获取支付宝app支付需要的请求字符串(res) returnUrl quitUrl参数忽略这是我自己测试用的 $.post("https://xxxx/ali/create-maui-app", { returnUrl:"", quitUrl: "" }, function (res) { jsObjectReference = DotNet.createJSObjectReference(window); DotNet.invokeMethodAsync('MauiApp7', 'AliPays', jsObjectReference, res) .then(data => { console.log(data); }); }).error(function (res) { alert("出现错误:" + JSON.stringify(res)); }) }) //window上注册支付回调方法 window.aliPayCallBack = (res) => { if (jsObjectReference) { DotNet.disposeJSObjectReference(jsObjectReference); } alert("执行了支付宝支付回调" + JSON.stringify(res)); } }) </script> </body> </html>
自此完成
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2016-03-21 V5客服