12xamarin form中实现H5 网页唤醒微信支付的方法

Posted 2020-11-07 保持好奇保持求知，愿天下没有难搞的界面

在微信的支付中有种支付叫微信H5支付。方便用户在网页中轻松唤起微信进行支付。

当然微信不推荐大家使用这样的方式唤起微信支付。建议app还是使用正常的微信支付sdk即可

服务端与其他的建议参考微信支付官网进行适配我这里只讨论如何在xamarin forms 中嵌入html5 实现支付

这里面有个问题就是如果没有安装微信app 是需要进行一些判断的

开始建立相关的代码

打开 MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:WeChatPayDemo"
             x:Class="WeChatPayDemo.MainPage">

    <StackLayout>
        <WebView x:Name="wb" IsVisible="True" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            
        </WebView>
    </StackLayout>

</ContentPage>

  public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            wb.Source = new UrlWebViewSource
            {
                Url = "http://wxpay.wxutil.com/mch/pay/h5.v2.php"
            };

        }

    }

然后安卓项目里面增加

WebRenderer.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Webkit;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Internals;
using Xamarin.Forms.Platform.Android;
using AWebView = Android.Webkit.WebView;
[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(WeChatPayDemo.Droid.WebRenderer))]
namespace WeChatPayDemo.Droid
{
    public class WebRenderer : ViewRenderer<Xamarin.Forms.WebView, AWebView>
    {
        Context _context;

        public WebRenderer(Context context) : base(context)
        {
            _context = context;
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                var webView = new AWebView(_context);
                webView.SetWebViewClient(new WebViewClient(_context));
                webView.Settings.javascriptEnabled = true;
                SetNativeControl(webView);
            }
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (Control != null && e.PropertyName == "Source")
            {
                var src = Element.Source as UrlWebViewSource;
                Control.LoadUrl(src.Url);
            }
        }
    }

    public class WebViewClient : Android.Webkit.WebViewClient
    {
        private Context _context;
        public WebViewClient(Context context)
        {
            _context = context;
        }
        public override bool ShouldOverrideUrlLoading(AWebView view, IWebResourceRequest request)
        {
            if (request.Url.Scheme == "weixin")
            {
                Intent intent = new Intent() { };
                intent.SetAction(Intent.ActionView);
                intent.SetData(request.Url);
                this._context.StartActivity(intent);
                return true;
            }
            return base.ShouldOverrideUrlLoading(view, request);
        }

        [Obsolete]
        public override bool ShouldOverrideUrlLoading(AWebView view, string url)
        {
            if (url.StartsWith("weixin"))
            {
                Intent intent = new Intent() { };
                intent.SetAction(Intent.ActionView);
                intent.SetData(Android.Net.Uri.Parse(url));
                this._context.StartActivity(intent);
                return true;
            }
            return base.ShouldOverrideUrlLoading(view, url);
        }
    }

}

在ios里面增加

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Foundation;
using UIKit;
using Xamarin.Forms.Platform.iOS;
[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.Forms.WebView), typeof(WeChatPayDemo.iOS.WebRenderer))]
namespace WeChatPayDemo.iOS
{
    public class WebRenderer : WebViewRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            if (NativeView != null && e.NewElement != null)
                SetupControlSettings();

        }

        private void SetupControlSettings()
        {
            var webView = ((UIWebView)NativeView);
            if (webView == null) return;
            webView.Delegate = new CustomWebDelegate();
        }
    }


    public class CustomWebDelegate : UIWebViewDelegate
    { 

        public override bool ShouldStartLoad(UIWebView webView, NSUrlRequest request, UIWebViewNavigationType navigationType)
        {
            if (request.Url.Scheme== "weixin")
            {
                UIApplication.SharedApplication.OpenUrl(request.Url);
            } 
            return true;
        }


        public override void LoadingFinished(UIWebView webView)
        {

        }
        public override void LoadFailed(UIWebView webView, NSError error)
        {

        }
    }
}

 

 记得配置 iOS 的网络访问权限 和安卓的访问权限 至此 web里面唤起 微信支付完成