最近,公司在做webapp 开发,主要采用原生Native + html5(只用Jquery,无easyUI之类);
做的时候大概有两种方案:
1.页面放在服务端,app只是webview嵌套
2.页面放置本地资源文件(IOS + Android 同一页面)
问题:
方案1:
页面在网速卡的时候,根本加载不出来,大白页,及时加上好看的加载框,用户体验也很差!(拍死)
方案2:
1.在做的时候本来是想直接ajax访问数据,但会出现跨域问题,到时数据无法获取!
2.原生与html交互bridge
最终采取方案2.
解决方案:
ajax的数据获取,只需铺好原生与html的连通的路,就OK了,原生获取数据,注入页面!
Android 与 h5 的交互:
拿注册举例:
html页面中代码:
$('#regist').click(function(){
window.android.register();
});
Android中代码:
mWebView.addJavascriptInterface(new JSInvokeService(), "android");
这句话标示拦截html页面中含android标签的点击事件(Android只是标识,可以是IOS,ISO无所谓,但必须两者对应),所有拦截到的方法,在class JSInvokeService中有与之对应的方法
/*** 注册*/
@JavascriptInterface(不加此句话,Android4.0以上无法调用,且方法必须为public)
public void register(){
mLoginActivity.runOnUiThread(new Runnable() {
@Override
public void run() {
loginNormal(ConstantURL.CHOOSEREGISTER_PAGE);;//原生要处理的事项
}
});
}
注意:1.webview必须设置match_parent
2.WebView.setWebChromeClient() 不加此方法无法拦截页面
3.页面传参至原生:window.android.share($('#username').text(),storeNotice,$('#useraddress').text(),$('#headurl').text());
原生接收数据方法
@JavascriptInterface
public void share(final String title,final String content,final String storeUrl,final String storeLogo){}
4.原生注入数据
mWebView.loadUrl("javascript:"+method+"("+result+")");此处的method为html中与之对应的方法名,而result即使获取的数据,其实也就是参数!
例如method是login,那与之对应在页面中应该有function login()这个方法,参数与java中参数一个意思
以上即可做Android 与 h5的app
待优化:下拉列表等仍需改善,使用h5,页面下拉过度灵敏(这不是反话),按钮等触发的效果
IOS
2.2