iOS开发(1) WebView和HTML 显示

iOS 7 已经release了。如今学习iOS开发仍是很是热门的。处处也有些团队在寻找iOS开发的人才。

那么，iOS开发.....省略了1万字....

HTML5 +CSS3+JS...再省略1万字....

这里先介绍iOS7 的WebView开发。

1. 建立一个工程，选择SingleViewApplication。

2. 拖动一个UIWebView到ViewController上。

3. 选择Assistant Editor，右侧关联选择~ViewController.h文件

4. 按住control，用鼠标左键拖动一个线到~ViewController.h里，

   增长一个Outlet，起名webView

5. 切换到~ViewController.m文件

 6. 在viewDidLoad中写以下代码：

1 NSURLRequest * request =[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]];
2 [self.webView loadRequest:request];

7. 运行，界面以下所示：

   

9. command + 3才可以显示这个尺寸的界面（25%）。

上面是显示外部网页的作法，而开发的时候颇有可能要显示内部的HTML文件。

那么，首先要找到该HTML文件，而后将HTML文件以URL的方式加载到WebView上，下面是显示内部页面用的代码。

1  
2     NSString *resourcePath = [[NSBundle mainBundle]bundlePath];
3     NSString *filePath = [resourcePath stringByAppendingPathComponent:@"home.html"];
4     NSString *htmlString = [[NSString alloc]initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
5     [self.webView loadHTMLString:htmlString baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle]bundlePath]]];

页面显示效果如图所示。

能够看到这里显示的并不正确，并且点击的时候也没有反应。

1. 图片没有显示的缘由是在WebView中不区分路径，

   因此要把在HTML浏览器中所写的带有路径的代码，改成去掉路径。

2. 页面显示不完整的缘由是，屏幕分辨率尽管是 640 x 960，可是HTML的pixel在这里只能显示320 x 480(还得考虑顶部留白)

3. JavaScript不能执行的缘由是jQuery不能直接执行，须要采用jQueryMobile。

4. WebView拖动的时候会自动滚动，这时候会有一个问题：它看起来并不像一个App -> 由于App顶部的NavigatorBar是不会跟动的。   要么改成（NavigatorBar + WebView共同组成），要么考虑如何改进HTML。