Android WebView中的H5支付实践

随着行业发展，支付功能已是APP必备功能之一，接入支付SDK，如微信支付SDK、支付宝SDK等成本较大，很多公司选择通过WebView进行H5支付减少了接入成本。本文只介绍微信和支付宝的H5支付，废话不多说，直接进入正题。

相信你已经了解过下面的webview创建方式：

WebView相关配置：

这是WebView一些基础配置，具体配置需要看具体业务需求，这里推荐两篇WebView的文章
如何设计一个优雅健壮的Android WebView？（上）
如何设计一个优雅健壮的Android WebView？（下）
文章是网易考拉移动团队出品的，是我见过最好的全面讲解WebView文章

不能忘了WebViewClient：

当然不能忘了处理WebView的生命周期：

相信你在其他文章中看到的是这个样子的：

但是前不久支付宝改了H5支付的方式，之前是直接能在APP中调起支付界面的，现在调整为进入支付宝APP才能掉起支付界面，而且相应的URL格式发生变化，从startApp 变为了startapp，为了适应新的变化，只能两个都加上判断了（这个得看支付宝的脸色，没办法）

这只是一篇简单的总结记录H5支付的文章，没有什么高深的技术，但是有时间会一直维护下去(万一哪天微信和支付宝又做了什么变化呢，也许都不会变化了，这样可以投个懒了)。

目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。其实很简单的，只不过是调自己后台的一个接口而已（后台根据支付宝文档，写好支付接口）。
触发支付宝支付调用后台接口，后台会返回支付宝提供的form表单，我们只要在vue里面创建新节点，将返回的form表单append进去，并提交就可以唤起支付宝支付。另在此说一下这个
returnUrl
,
它是支付后支付宝回调的页面。具体可以根据自身业务，后台写死或者由前端控制。
methods
()
{
/

支付宝支付
/
goAlipay
()
{
this$loadingshow()
const
data
=
{
/
自身接口所需的一些参数
/

amount:
thisprice,
/
支付后支付宝return的url
/
//
returnUrl:
'$>