公司弄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啟動?？赡軋箦e。
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調用，將支付結果傳回頁面。