iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
0

讓使用者點擊書籍 Cell 時,可以在 App 中顯示到書局的網站吧!

前言:

在手機端上顯示網站畫面
常常在開發 App 的時候會遇到一種需求,該產品可能本身也有一個 Web 端的網站,所以希望可以透過 App 端的行動裝置來讓他顯示在畫面上。在 iOS 中,我們除了可以用跳出瀏覽器的方式以外,我們可以使用內建的 WebView 來讓網頁顯示在我們的手機中。

#建置 WebView

Important
Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView.
大家放心的用 WKWebView 來取代過去的 WebView 吧!

你可以使用 Apple 官方的方法來指定你的 View 作為 WebView 顯示:

class ViewController: UIViewController, WKUIDelegate {

  var webView: WKWebView!

  override func loadView() {
      // 配置 WKWebView
      let webConfiguration = WKWebViewConfiguration()
      webView = WKWebView(frame: .zero, configuration:  webConfiguration)
      webView.uiDelegate = self
      // 將我們的 view 指定為 webView
      view = webView
  }
  override func viewDidLoad() {
      super.viewDidLoad()
      // 讀取來自 URL 的網頁
      let myURL = URL(string:"要顯示的網站網址")
      let myRequest = URLRequest(url: myURL!)
      webView.load(myRequest)
  }
}

然後我們之後會在這個 Controller 設置一個 urlString: String? ,透過傳值將要開啟的 url 傳到其中。之後我們只要在的 CollectionView 設置 Cell 的didSelectItemAt 傳值方式跟跳轉到 WebView 即可,後面我們會使用 Segue 方式來傳值。

# 畫面傳值(Segue)

首先我們會在 Storyboard 上對兩個 ViewController 進行 Segue 的連線:

https://ithelp.ithome.com.tw/upload/images/20181022/20107701ake2VYFFq0.png

建立一個 Segue 的連線
接著我們可以點選這個 Segue 來設置它的 Identifier,之後我們會根據 Identifier 來跳轉畫面。

https://ithelp.ithome.com.tw/upload/images/20181022/20107701zNuseX6kPY.png

為你的 Segue 加上一個 Identifier
因為我們想要當使用者點下 Cell 的時候觸發跳轉畫面到 WebView 的 ViewController,接著我們來編寫我們 CollectionView 的 didSelectedItemAt 方法:

func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
    // 將選擇到的 book 存到一個變數中
    selectedBook = books[indexPath.row]
    // 跳轉到我們 WebView 的畫面上
    performSegue(withIdentifier: BookshelfSeugeIdenifier.linkToWebView, sender: self)
}

接下來 override 我們 prepare(for segue:)方法:

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // 判斷 Seuge 的 identifier
    switch segue.identifier {
    case BookshelfSeugeIdenifier.linkToWebView:
        // 判斷 Segue 的目的地是否為 BookWebViewController
        // 若為 true,那麼 BookWebViewController 的 urlString 就等於我們的 selectedBook?.link
        if let bookWebVC = segue.destination as? BookWebViewController {
            bookWebVC.urlString = selectedBook?.link
        }
    default:
        // 其他例外情況則 break.
        break
    }
}

接著我們來試試看能不能連到網站吧~ ??

image

在 App 中開啟天瓏書局網頁

# 加載畫面(WKNavigationDelegate)
你可以發現我們進入 WebView 的畫面之後,停了幾秒的白色畫面,但是我們想要在這邊加上一個 Loading 的畫面讓使用者知道「 正在加載畫面 」,所以首先我們客製化一個加載畫面:

客製化 Loading 畫面

https://ithelp.ithome.com.tw/upload/images/20181022/20107701SRwCZh6Lev.png

這邊我們還需要獲取 WKWebView 的加載狀態,這邊我們讓我們 WebView 的 Controller 遵循 WKNavigationDelegate,我們可以透過其 delegate 方法在獲取網路過程中實現自定的義操作。

這邊我們只想要知道開始加載、獲取失敗以及加載完成,因此我們會加上:

extension BookWebViewController: WKNavigationDelegate {
    
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        // 當開始加載,ActivityIndicator 開始旋轉動畫
        activityIndicator.startAnimating()
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 當完成加載,ActivityIndicator 停止旋轉動畫,隱藏 Loading View
        activityIndicator.stopAnimating()
        loadingView.isHidden = true
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        // 當加載失敗,ActivityIndicator 停止旋轉動畫,隱藏 Loading View
        activityIndicator.stopAnimating()
        loadingView.isHidden = true
    }
    
}

那我們來測試一下是否能出現我們的自定義的 Loading View 吧~

image

自定義 Loading View

後記:

希望透過這次教學大家知道如何在 App 中顯示網頁,只要透過簡單的 WebView 加上一段 URL 就能夠呼叫我們網頁,當網頁有響應式網頁設計( RWD )時,也能夠完美的顯示在手機上。當然 WebView 也有其他強大的功能,比如像是可以互相調用方法( JavaScript ),從網頁調用手機或是手機調用網頁的方法,如此以來就能與網頁端共同開發更多的功能。


上一篇
Day 06: 來設計我們的書架吧!
下一篇
Day 08: 使用搜尋列來找尋書籍吧!
系列文
一天一蘋果,Bug 遠離我。30

尚未有邦友留言

立即登入留言