公司弄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调用，将支付结果传回页面。
