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。