android webview和iOS uiwebview/wkwebview 访问支付宝跳转到app

公司弄H5的应用，ios／android端分别打包成app，上头要求封装一个固定webview壳，让后续H5应用，直接打包，上架。要求需要考虑支付宝支付，微信支付，，朋友圈，微博分享之类，还有调用一些原生的方法，推送，比如一些弹出框，修改顶部statusbar颜色之类的。自己想到当然是用js，调用原生代码啦，但是发现支付宝，微信在浏览器打开直接可以打开对应客服端。懂得当然用scheme跳转啦，我现在要做的，模拟浏览器，就好了。当然存在一些问题，自己一个个处理啦。

android端处理(相对简单点)

1. 拦截url，在webviewClient中重写，启动拨打电话，启动qq，都兼容

webView.setWebViewClient(new WebViewClient(){
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
Log.w("webview",url);
boolean isShow=true;
if(onWebviewListener!=null)
isShow=onWebviewListener.onShow(url);
if (!isShow){ //外部是否需要拦截
if(parseScheme(url)){ //非http或者https的网络请求拦截，用action_view启动。可能报错。
try {
Uri uri = Uri.parse(url);
Intent intent =new Intent(Intent.ACTION_VIEW, uri);
view.getContext().startActivity(intent);
}catch (Exception e){
e.printStackTrace();
if (url.startsWith("alipay")){
Toast.makeText(view.getContext(), "请确认是否安装支付 宝",Toast.LENGTH_SHORT).show();
}else if (url.startsWith("mqqwpa")){
Toast.makeText(view.getContext(), "请确认是否安装QQ",Toast.LENGTH_SHORT).show();
}
}
} else{
view.loadUrl(url);
}
}
return true;}
}

android相对简单点，最后启动传参数，都可以在ur拦截到，直接start对应的actionview的uri即可

2. ios处理
   原来思路跟android也是类似，发现不行，拦截到url

alipay://alipayclient/?{"dataString":"h5_route_token="5ca0bf28bad7cdb27e9069853cfb***"&is_h5_route="true"","requestType":"SafePay","fromAppUrlScheme":"alipays"}

直接start不成功，后面我参考android 拦截到信息

alipays://platformapi/startApp?appId=20000***&orderSuffix=h5_route_token%3D%22b0ba5799343f4caf910854c772ed9579%22%26is_h5_route%3D%22true%22#Intent;scheme=alipays;package=com.eg.android.AlipayGphone;end

我去掉#后面的intent信息，直接在ios的application openurl 居然成功（猜想，ios支付宝客户端也有对android类似的数据格式做了解析）。昨天思路还是把ios拦截到json数据，解析了，拼接成android格式，启动支付宝，是可以的。这个只是巧合，还是不合理，于是我想爬支付宝的js，怎么生成这个scheme的。用手机版的safari没法调试。于是chrome模拟safari的useragent，爬到支付宝的js代码
/**

• open client
  */
  var o;
  if (typeof params === 'object') {
  o = {
  'ios': encodeURIComponent(JSON.stringify(params)),//ios json的数据格式
  'android': encodeURIComponent(params.dataString)// android的数据格式
  };
  } else {
  console.error('params error, pls use JSON format!')
  }

    // params fault tolerance
    if (typeof o.ios !== 'string') {
        o.ios = '';
    } else if(typeof o.android !== 'string') {
        o.android = '';
    }
  
    // nonsupport Android intent
    if (!canIntent) {
        if(isAndroid) {
            var alipaysUrl = 'alipays://platformapi/startApp?appId=20000125&orderSuffix=' + o.android +'#Intent;scheme=alipays;package=com.eg.android.AlipayGphone;end';
        }
        //fix for iOS QQ browser 解释了为啥android的参数格式也是可以的，后段为了兼容qqbrowser
        else if (ua.indexOf('mqqbrowser') > -1) {
            var alipaysUrl = 'alipay://alipayclient/?' + o.android;
        }
        else {
            var alipaysUrl = 'alipay://alipayclient/?' + o.ios;
        }
  
        if ( ua.indexOf('qq/') > -1 || ( ua.indexOf('safari') > -1 && ua.indexOf('os 9_') > -1 ) || ( ua.indexOf('safari') > -1 && ua.indexOf('os 10_') > -1 ) ) {
            var openSchemeLink = document.getElementById('openSchemeLink');
            if (!openSchemeLink) {
                openSchemeLink = document.createElement('a');
                openSchemeLink.id = 'openSchemeLink';
                openSchemeLink.style.display = 'none';
                document.body.appendChild(openSchemeLink);
            }
            openSchemeLink.href = alipaysUrl;
            // trigger click
            openSchemeLink.dispatchEvent(customClickEvent());
        } else {
            var ifr = document.createElement('iframe');
            ifr.src = alipaysUrl;
            ifr.style.display = 'none';
            document.body.appendChild(ifr);
        }
    }
    //support Android intent
    else {
        var packageKey = 'AlipayGphone';
        var intentUrl = 'alipays://platformapi/startApp?appId=20000125&orderSuffix='+o.android+'#Intent;scheme=alipays;package=com.eg.android.'+ packageKey +';end';
  
  
        var openIntentLink = document.getElementById('openIntentLink');
        if (!openIntentLink) {
            openIntentLink = document.createElement('a');
            openIntentLink.id = 'openIntentLink';
            openIntentLink.style.display = 'none';
            document.body.appendChild(openIntentLink);
        }
        openIntentLink.href = intentUrl;
        // trigger click
        openIntentLink.dispatchEvent(customClickEvent());
    }
  
    setTimeout(function () {
        locked = false;
    }, 2500)
  

  }‘

DC78DE8C-5C91-4F5A-AF70-C67D42207567.png

1. 确认在decidePolicyForNavigationAction方法里头
2. 其次url要取navigationAction.request.URL.absoluteString
3. 然后，如果是alipayclient开头，直接openUrl即可
   大功告成。

ps:微信暂时不支持这种调整，
我们采取的措施：

1. 后台统一下单生成订单
2. 通过js方法调用原生的app接入微信支付完成微信支付。
3. 在h5端预留方法，给原生app调用，将支付结果传回页面。