公司弄H5的應用，ios／android端分別打包成app，上頭要求封裝一個固定webview殼，讓后續H5應用，直接打包，上架。要求需要考慮支付寶支付，微信支付，，朋友圈，微博分享之類，還有調用一些原生的方法，推送，比如一些彈出框，修改頂部statusbar顏色之類的。自己想到當然是用js，調用原生代碼啦，但是發現支付寶，微信在瀏覽器打開直接可以打開對應客服端。懂得當然用scheme跳轉啦，我現在要做的，模擬瀏覽器，就好了。當然存在一些問題，自己一個個處理啦。
android端處理(相對簡單點)
- 攔截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即可
- ios處理
原來思路跟android也是類似，發現不行，攔截到url
alipay://alipayclient/?{"dataString":"h5_route_token="5ca0bf28bad7cdb27e9069853cfb***"&is_h5_route="true"","requestType":"SafePay","fromAppUrlScheme":"alipays"}
直接start不成功，后面我參考android 攔截到信息
我去掉#后面的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)}‘
- 確認在decidePolicyForNavigationAction方法里頭
- 其次url要取navigationAction.request.URL.absoluteString
- 然后，如果是alipayclient開頭，直接openUrl即可
大功告成。
ps:微信暫時不支持這種調整，
我們采取的措施：
- 后臺統一下單生成訂單
- 通過js方法調用原生的app接入微信支付完成微信支付。
- 在h5端預留方法，給原生app調用，將支付結果傳回頁面。
