如何制作带有微信支付的h5网页

Posted 2023-04-16

方法/步骤

点击制作栏目，进入模板选择页
1、选择空模板，自由创作；
2、选择主题模板，更快速的创作出炫丽的展示。

选择模板后，进入创作界面

预览树操作
1、显示的页面的显示顺序；
2、右键调整页面的显示顺序；
3、点击页面右上角的X,可以把不需要的页面删除。

功能—添加修改文字
1、添加文字：点击右侧的文字选项→主编辑区会出现文字输入框→双击修改
2、文字属性修改：右侧文字属性修改选项，包括字体种类，字体大小、颜色等等。

功能—添加修改图片
1、上传图片：点击右侧图片选项→上传按钮→选择图片→确定
2、截图：点击截图按钮→选择图片区域→双击

功能—添加修改按钮
添加按键：点击右侧按钮选项→点击编辑区的按钮→修改文字、链接

功能—添加修改表单
1、添加表单：点击右侧的添加表单按钮，在弹出的窗口中填写提交数据的名称
2、修改表单样式：在右侧的属性栏中，修改表单的显示样式
3、查看及下载数据：客户提交数据后，可以在表单数据中看到，并提供下载

功能—添加修改底图
1、修改背景颜色：点击右侧底图选项→选择颜色
2、上传底图：点击右侧底图选项→点击上传按钮→确定

功能—添加修改背景音乐
添加背景音乐：点击右侧音乐选项→点击选择文件按钮→确定→点击上传按钮

功能—添加修改切换效果
添加切换效果：选择页面→点击配置选项→选择切换效果

功能—添加修改动画效果
添加动画效果：点击添加动画的组件→点击动画选项→点击动画效果

保存
点击导航栏的保存按钮→再点击预览按钮→进入发布页面

生成
1、添加标题、描述、缩略图
2、生成的二维码和链接可以用于分享到微信、微博等
3、点击生成按钮，即完成了一个作品的制作过程。

END
注意事项
关于层叠关系：右击主编辑区的组件，可以修改组件间的层叠关系。
关于保存：建议每创建完成一个组件后，点击左上角的保存，保存一次。
关于预览：点击左侧的预览树页面，可以预览该页面的展示效果。 参考技术A 点击制作栏目，进入模板选择页
1、选择空模板，自由创作；
2、选择主题模板，更快速的创作出炫丽的展示。
选择模板后，进入创作界面
预览树操作
1、显示的页面的显示顺序；
2、右键调整页面的显示顺序；
3、点击页面右上角的X,可以把不需要的页面删除。

功能—添加修改文字
1、添加文字：点击右侧的文字选项→主编辑区会出现文字输入框→双击修改
2、文字属性修改：右侧文字属性修改选项，包括字体种类，字体大小、颜色等等。

功能—添加修改图片
1、上传图片：点击右侧图片选项→上传按钮→选择图片→确定
2、截图：点击截图按钮→选择图片区域→双击

功能—添加修改按钮
添加按键：点击右侧按钮选项→点击编辑区的按钮→修改文字、链接

功能—添加修改表单
1、添加表单：点击右侧的添加表单按钮，在弹出的窗口中填写提交数据的名称
2、修改表单样式：在右侧的属性栏中，修改表单的显示样式
3、查看及下载数据：客户提交数据后，可以在表单数据中看到，并提供下载

功能—添加修改底图
1、修改背景颜色：点击右侧底图选项→选择颜色
2、上传底图：点击右侧底图选项→点击上传按钮→确定

功能—添加修改背景音乐
添加背景音乐：点击右侧音乐选项→点击选择文件按钮→确定→点击上传按钮

功能—添加修改切换效果
添加切换效果：选择页面→点击配置选项→选择切换效果

功能—添加修改动画效果
添加动画效果：点击添加动画的组件→点击动画选项→点击动画效果

保存
点击导航栏的保存按钮→再点击预览按钮→进入发布页面

生成
1、添加标题、描述、缩略图
2、生成的二维码和链接可以用于分享到微信、微博等
3、点击生成按钮，即完成了一个作品的制作过程。 参考技术B 首先需要开通微信支付的功能，制作H5网页时调用这个接口。 参考技术C 在网页下端将微信支付二维码P上去不就行了， 参考技术D 找第三方支付公司申请微信h5支付，申请资料，到帐时间等来问

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

在微信的支付中有种支付叫微信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里面唤起 微信支付完成