最近采用原生控件+前端技术开发Android、iOS客户端的方式很流行,其实这种技术方案出现很久了;后来随着html5的发布,采用前端技术也可以渲染出炫丽的视觉界面,这种方案就更加流行起来;另外,复用性高,节约成本,也是其得以流行的原因之一。
原生控件和前端技术结合的实现方式有两种:
1、前端静态资源在客户端
将静态文件(html、js、css、图片等)放在assets目录下,用下面方法将WebView和html文件绑定:
//Android实现:
public WebView initWebView(WebView webView){
android.view.ViewGroup.LayoutParams layoutParams = new LayoutParams(
android.view.ViewGroup.LayoutParams.FILL_PARENT,
android.view.ViewGroup.LayoutParams.FILL_PARENT);
webView.setLayoutParams(layoutParams);
WebSettings webSettings = webView.getSettings();
webSettings.setRenderPriority(RenderPriority.HIGH);
//java script
webSettings.setJavaScriptEnabled(true);
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);
// access Assets and resources
webSettings.setAllowFileAccess(true);
webSettings.setAppCacheEnabled(false);
webView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);//隐藏滚动条
webView.loadUrl("file:///android_asset/XXX.html");
}
//iOS实现:
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[myWebView loadHTMLString:html baseURL:baseURL];
到此,你可以启动你的程序了,正常情况下XXX.html页面会显示在你的手机上。
这种方式让你可以用前端技术代替原生控件实现界面效果;
另外,如果你的应用需要服务端数据,这种方式可以提高应用程序响应速度,特别是在带宽有限(如:2G/3G网络)的情况下比较明显;因为很多静态文件已经在本地了,不需要在程序运行时从服务端下载。
2、前端静态资源在服务端
直接用webview加载一个链接就可以了:
//Android实现:
webView.loadUrl("http://ringw.iteye.com/blog/2072310");
//iOS实现:
NSURL* url = [NSURL URLWithString:@"http://ringw.iteye.com/blog/2072310"];//创建URL
NSURLRequest* request = [NSURLRequest requestWithURL:url]; //创建NSURLRequest
[myWebView loadRequest:request];
这种方式简单易懂;更新升级方便。
-----------
对于第一种方式,我发现如果页面上有ajax请求,在iOS上或者android的targetSdkVersion设置为17及以上时,会出现
ajax跨域问题,目前还没找到解决方法,
欢迎一起讨论
采用原生控件+前端技术开发Android、iOS客户端
猜你喜欢
转载自ringw.iteye.com/blog/2072310
今日推荐
周排行