maui BlazorWebView+本地html 打包Android app 实现支付宝H5支付

 

 

 

 

   <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html" UrlLoading="blazorWebView_UrlLoading" BlazorWebViewInitialized="blazorWebView_BlazorWebViewInitialized">
       
    </BlazorWebView>

 

 private void blazorWebView_BlazorWebViewInitialized(object sender, Microsoft.AspNetCore.Components.WebView.BlazorWebViewInitializedEventArgs e)
        {
　　　　　　//允许BlazorWebView 在Android平台下 访问http请求，需搭配android:usesCleartextTraffic="true" 使用
#if ANDROID
          e.WebView.Settings.MixedContentMode = Android.Webkit.MixedContentHandling.AlwaysAllow;
#endif
        }
        private async void blazorWebView_UrlLoading(object sender, Microsoft.AspNetCore.Components.WebView.UrlLoadingEventArgs e)
        {
            if (e.Url.Host != "0.0.0.0")
            {

                if (e.Url.ToString().StartsWith("alipays:") || e.Url.ToString().StartsWith("alipay"))
                {
                    await Launcher.OpenAsync(e.Url);
                    return;
                }
                else {
                    e.UrlLoadingStrategy = UrlLoadingStrategy.OpenInWebView;
                    
                }
               
            }
           
        }

 

 

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>MauiApp3</title>
  
    <script src="lib/jquery.min.js"></script>
    <script src="lib/lib-flexible-2.0/index.js"></script>
</head>

<body>
   
    <button style="width: 100%;background: rgb(5, 200, 235);border: 0rem;" id="zhifu">支付宝支付</button><br /><br />
    <script src="_framework/blazor.webview.js" autostart="false" crossorigin="anonymous"></script>
    <script>
        $(function () {
            //调用服务端的支付宝H5支付接口 returnUrl：即支付成功后回跳的页面；quitUrl：即取消支付时回跳的页面，这2个参数是支付宝H5支付时的参数
            $("#zhifu").click(function () {
                $.post("https://xxxxx/ali/alipay", { returnUrl: "https://0.0.0.0/return.html", quitUrl: "https://0.0.0.0/quit.html" }, function (res) {
                    $("body").append(res);
                }).error(function (res) {
                    alert("出现错误:" + JSON.stringify(res));
                })
            })
        })
    </script>
</body>

</html>

微信H5支付应该和支付宝的差不多应该都可行

posted on 2023-03-16 11:16  落叶子  阅读(323)  评论(1)  编辑  收藏  举报

导航