maui BlazorWebView+本地html (vueuniapp等都可以) 接入支付宝sdk 进行支付宝支付 开发 Android app

Posted 落叶子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了maui BlazorWebView+本地html (vueuniapp等都可以) 接入支付宝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>

 自此完成

以上是关于maui BlazorWebView+本地html (vueuniapp等都可以) 接入支付宝sdk 进行支付宝支付 开发 Android app的主要内容，如果未能解决你的问题，请参考以下文章

如何远程调试 MAUI blazor / Blazor Hybrid

MAUI Blazor 加载本地图片的解决方案

疯狂吐槽 MAUI 以及 MAUI 入坑知识点

Maui正式版创建可跨平台的Maui程序，以及有关依赖注入MVVM双向绑定的实现和演示...

.NET MAUI 安卓 UI 资源设置

MAUI播放音频