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>

自此完成

maui BlazorWebView+本地html (vue、uniapp等都可以) 接入支付寶sdk 進行支付寶支付 開發 Android app

maui BlazorWebView+本地html (vue、uniapp等都可以) 接入支付寶sdk 進行支付寶支付開發 Android app