2017年6月6日 星期二

Swift3 UIWebView 和 WKWebView的基本運用(觸發超連結)

      今天要來講如何運用UIWebViewWKWebView的套用(讀取網頁)跟點擊後觸發要做的事情。一般新手或是因為方便也可能是習慣多數人都是使用UIWebView,而小弟我也是習慣用UIWebView,可是用過的人應該都會發現UIWebView在效能上來講並沒有比較好。又剛好某些原因需要做到觸發,於是發現了WKWebView,他效能上比UIWebView好,也是很多高手比較推薦使用的。
最下面會放上我開啟網頁的圖片,注意請使用實機測試會比較好喔!

這邊而外提一下,我所使用的網頁是利用firebase所製作出來的,所以並會停供測試的url。可能需要您自己去建立唷^^怎麼建立就不多說了,畢竟這裡主要講的是swift3

直接先附上storyboard的截圖,非常的簡單。我是為了一次呈現兩種所以做了兩個頁面給各位參考。

上圖中兩個都是ViewController,但一個有加入UIWebView

先來說UIWebView的運用吧!下面直接就附上Code並有附帶註解所以不而外做說明了

import UIKit

class WebViewController: UIViewController,UIWebViewDelegate {

    @IBOutlet weak var webView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //加入delegate因為要做觸發判斷
        webView.delegate = self
        //載入網頁
        let url = URL(string: "你的網頁位子");
        webView.loadRequest(URLRequest(url: url!))
        
    }

    //當用戶點擊觸發事件(我本身自己做的是觸發連結)
    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        
        //判斷觸發的連結
        if (navigationType == .linkClicked){
            let str:String = (request.url?.scheme)!
            switch str {//利用switch判斷點擊後傳出來的url而決定動作
            case "mailto"://信箱
                //如果沒有要特地加載主旨或內容可以忽略下面內容直接跳掉開啟url即可
                let subject = "UIWebViewDome"//主旨
                let body = "這是UIWebView運用於點擊事件是發送mail"//信件內文
                let coded = "\(request)?subject=\(subject)&body=\(body)".addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)
                //開啟信箱
                //(因為openURL前方有帶入字串"mailto:"所以系統會自動判斷開啟信箱而非safari)
                if let emailURL:URL = URL(string: coded!){
                    if UIApplication.shared.canOpenURL(emailURL){
                        UIApplication.shared.openURL(emailURL)
                    }
                }
                case "tel"://電話
                    //一般來講網頁端如果有做好就不用做下面的動作,做了其實是多餘的。除非網頁端只有提供一般電話號碼的字串並沒有帶tel:那樣的話就需要自己在做url並作下面的動作
                    
//                    let url = URL(string: (request.url?.scheme!)!)
                    let tel = "0987654321"
                    let url = URL(string: "tel:\(tel)")
                    if UIApplication.shared.canOpenURL(url!){
                        UIApplication.shared.openURL(url!)
                }
            default:
                break
            }
            
        }
        return true

    }

再來就是WKWebView這邊會多做一點說明。因為做法稍微不同
就一般新手來說使用WKWebView會感到困擾就是要都用寫的而選擇不用。
但是其實官方的教學就顯而易懂,而且不用特地在做constraints。
而我也直接用官方範例的方法寫,再參考Code裡面loadView()的內容吧!這個func會執行得比viewdidload還早唷!
注意!!!記得要import WebKit 並且宣告var webView:WKWebView! 並且加入代理人WKUIDelegate,WKNavigationDelegate

接下來就直接附上code了,一樣內有註解

import UIKit
import WebKit

@available(iOS 10.0, *)
class ViewController: UIViewController,WKUIDelegate,WKNavigationDelegate {

    var webView:WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        webView.navigationDelegate = self
        view = webView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //載入網頁
        let url = URL(string: "你的網頁位子");
        webView.load(URLRequest(url: url!))
        
    }
   
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        print("webview:\(webView) decidePolicyFornavigationAction:\(navigationAction) decisionHandler:\(decisionHandler)")
        //判斷點擊觸發事件
        switch navigationAction.navigationType {
        case .linkActivated://點擊事件
            if navigationAction.targetFrame == nil{
                self.webView.load(navigationAction.request)
            }
            let url = navigationAction.request.url
            let str:String = (url?.scheme!)!
            switch str {//判斷點擊到的事件是什麼要幹嘛
            case "mailto"://信箱
                print("mail")
                let subject = "UIWebViewDome"//主旨
                let body = "這是UIWebView運用於點擊事件是發送mail"//信件內文
                let coded = "\(navigationAction.request)?subject=\(subject)&body=\(body)".addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed)
                
                //開啟信箱
                //(因為openURL前方有帶入字串"mailto:"所以系統會自動判斷開啟信箱而非safari)
                if let emailURL = URL(string: coded!){
                    if UIApplication.shared.canOpenURL(emailURL){
                        UIApplication.shared.openURL(emailURL)
                    }
                }

                decisionHandler(.cancel)
                return
            case "tel"://電話
                //一般來講網頁端如果有做好就不用做下面的動作,做了其實是多餘的。除非網頁端只有提供一般電話號碼的字串並沒有帶tel:那樣的話就需要自己在做url並作下面的動作
                //但是!wkWebView是不管怎樣都必須要告知你要做的動作所以下面動作必須要做!
                print("tel")
              let number:String = (url?.absoluteString)!
                //因為apple一般會要求開發者在用戶做某些特定動作時必須要有提醒(例如取用相機之類的),所以在這做了一個AlertController來提醒用戶撥出通話。
                let alertController = UIAlertController(title: nil, message: "\(number.replacingOccurrences(of: "tel:", with: ""))", preferredStyle: .alert)
                alertController.addAction(UIAlertAction(title: "取消", style: .default, handler: nil));
                alertController.addAction(UIAlertAction(title: "通話", style: .default, handler: { (action:UIAlertAction) in
                    if UIApplication.shared.canOpenURL(navigationAction.request.url!){
                        UIApplication.shared.openURL(navigationAction.request.url!)
                    }
                }));
                
                
               self.present(alertController, animated: true, completion: nil)
                
            default:
                break
            }
             default:
            break
        }

        decisionHandler(.allow)

    }



沒有留言:

張貼留言