如何在iOS APP中瀏覽網頁

手機APP的開發者如果要快速將既有的伺服器網頁程式轉移至APP， 除了在網頁加入RWD響應式的網站設計及Jquery Mobile等元素外，APP如何載入這些網頁當然是必要的。然而在iOS APP開發上所需要的技術就是透過UIWebView來瀏覽這些網頁，以下範例就是如何使用UIWebView瀏覽網頁。

• 建立Single View Application

  1. 開啟Xcode，點選主選單「File」「New」「Project」。
     建立一個「Single View Application」
  2. 「Product Name」設為「WebViewApp」，
     「Team」選擇登入的開發者帳號或建立一個新的帳號，
     「Language」選擇「Objective-C」或「Swift」，
     「Devices」選擇「iPhone」，其他設定請參考以下畫面。按下「Next」
  3. 設定專案儲存位置。按下「Create」

• 設計使用者介面

  1. 開啟Main.storyboard
  2. 在畫面中自右下角的「Object library」加入一個Web View到既有的畫面上
     
  3. 並讓Web View填滿整個畫面，如下：
     
  4. 勾選「Scales Page To Fit」
  5. 點選 assistant editor的 圖示，會出現下方為開啟相關的程式碼檔ViewController.m(Objective-C) 或ViewController.swift(Swift)
     
  6. 若是Objective-C的開發者，按下control鍵不放， 連同View Controller Scene 內的Web View拖放到@interface …@end之間的第一行位置。建立名為webView的Outlet：在「Name」中輸入「webView」，按下「Connect」
  7. 若是Swift的開發者，按下control鍵不放， 連同View Controller Scene 內的Web View拖放到至UIViewController程式碼{}內的第一行位置。建立名為 webView 的 Outlet：
     在「Name」中輸入「webView」，按下「Connect」。

• 載入網頁

  1. 開啟ViewController.m(Objective-C) 或ViewController.swift(Swift)
  2. 若是Objective-C的開發者，在viewDidLoad方法中加入以下部分程式：

     - (void)viewDidLoad
     {
         [super viewDidLoad];
         NSURL *url = [NSURL URLWithString:@"http://www.apple.com/"];
         NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
         [self.webView loadRequest: urlRequest];
     }
     
     

  3. 若是Swift的開發者，在viewDidLoad方法中加入以下粗黑體部分程式：
     注意: 在Swift 3.0的版本中已將NSURL改成URL，NSURLRequest 改成 URLRequest。

     override func viewDidLoad() {
         super.viewDidLoad()
     	    let url = URL (string: "http://www.apple.com/");
             let urlRequest = URLRequest(url: url!);
             webView.loadRequest(urlRequest);
     }
     
     

• 測試

  1. 點選Xcode主選單「Product」「Run」
  2. 點選Xcode主選單「Product」「Stop」結束測試

相關學習資源

• 【iOSSWF】iOS App開發基礎-使用Swift程式語言-附Objective-C範例
• 【iOSSWA】iOS App開發進階-使用Swift程式語言-附Objective-C範例
• 【ObjectiveC】Objective-C程式語言
• 【SWLan】Swift程式語言