2

maui BlazorWebView+本地html (vue、uniapp等都可以) 接入支付宝sdk 进行支付宝支付...

 1 year ago
source link: https://www.cnblogs.com/lkd3063601/p/17241939.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

 

481626-20230321225126354-1681223457.gif

首先添加支付宝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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK