采用原生控件+前端技术开发Android、iOS客户端

最近采用原生控件+前端技术开发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跨域问题，目前还没找到解决方法，欢迎一起讨论

更多相关文章

随机推荐