IOS ，Android + html5

最近，公司在做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