iT 邦幫忙鐵人賽 Day 07: 連到書局的網站吧!

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

Jeremy Xue
4 min readOct 21, 2018

前言:

在手機端上顯示網站畫面

常常在開發 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 顯示:

註解:這邊我們是使用 storyboard 方式來加入 WKWebView,因為我們之後想再我們的畫面上做額外的操作,所以沒有使用官方的方式。

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

# 畫面傳值( Segue)

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

建立一個 Segue 的連線

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

為你的 Segue 加上一個 Identifier

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

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

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

在 App 中開啟天瓏書局網頁

# 加載畫面(WKNavigationDelegate)

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

客製化 Loading 畫面

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

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

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

自定義 Loading View

後記:

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

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

Hi, I’m Jeremy. [好想工作室 — iOS Developer]

No responses yet