iOS開發-------基於WKWebView的原生與JavaScript數據交互
WKWebView是iOS8.0之後用以替代UIWebView的網頁浏覽器，包含在WebKit中，可以通過 @import WebKit 導入。 如果工程需要適配iOS7,那麼請在iOS7中使用UIWebView。 如果是iOS8.0以上，請果斷的選擇WKWebView吧，無論是從功能，加載速度還是性能上，它都是不二的選擇。
畢業回公司有段時間了，與其說比較忙，不如說最近接觸的東西有點小多，並且還是多數自己之前聞所未聞的，整個人就顯得比較浮躁，所以就沒有對見識到的東西進行整理，感覺挺對不住自己的，知錯就改，之後會慢慢的將看到的、學到的比較好的東西進行整理，記錄一下，希望能在幫助俺那不靠譜的記性同時，也能夠幫助有同樣困惑的小伙伴。
不過這裡並不會非常具體的介紹WKWebView如何使用以及各種協議對象是什麼作用，畢竟Google一下就會有很多介紹WKWebView的文章，並且他們都寫得很好很詳細，大家感興趣的可以Google一下。給大家推薦一個WKWebView的新特性與使用
這裡記錄的交互僅僅的是進行一些數據的交互，對於其他的UI交互以及響應交互，請查看一下上面推薦的博文，寫的真的很詳細；如果大家有更好的交互方式，也麻煩大家告知一下3Q
iOS客戶端 -> Web端
iOS客戶端 -> Web端言歸正傳，我們用WKWebView加載一個HTML文件(加載網絡網頁其實是一個道理的)，萬一進行某個操作的時候需要原生給web傳遞一個數據(至於什麼數據，需要根據具體的需求來確定)，這裡就以一個字符串進行舉例:
在需要與Web進行復雜交互的時候，通常都需要在實例化WKWebView的之前，先實例化一個WKWebView的配置對象(WKWebViewConfiguration類型)，對javaScript的注入第一步就是需要處理一下這個配置對象:
//初始化webView的配置對象
let configuration = WKWebViewConfiguration()
//比如這就是需要傳遞給web的參數
let name = "RITL"
//聲明一個WKUserScript對象
let script:WKUserScript = WKUserScript(source: "function callJavaScript() {ObjCToJavaScript('\(name)');}", injectionTime: .AtDocumentStart, forMainFrameOnly: true)
//對Script對象進行添加
configuration.userContentController.addUserScript(script)
因為自己的Demo中的觸發點在於導航欄中的Do按鈕(開發中，這個觸發點是由實際需求確定的):
//響應Do
@IBAction func doTap(sender: AnyObject)
{
//調用的JS方法，執行
let js = "callJavaScript()";
webView.evaluateJavaScript(js) { (object, error) in
}//與iOS8之前的UIWebView類似
}
It’s OK? 總感覺還是還差一步的，既然有addXXX這句，是不是應該有removeXXX呢，還真有，也就差這麼一步
deinit
{
//刪除注入的JS
webView.configuration.userContentController.removeAllUserScripts()
}
Demo的HTML語句比較low，但僅僅的就是為了測試，所以就忍了吧0.0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我是HTML標題</title>
</head>
<script> //原生調用該方法，並通過接收傳入的參數進行下一步操作 function ObjCToJavaScript(name) { //修改label顯示的title document.getElementById("Text").innerText = name; } </script>
<body>
<label id ="Text" style = "margin-top: 100px ; display: block; font-size:100px;">Text</label>
</body>
</html>
<!-- 總結一下，其實從上面的描述也就看出來了，所謂的原生對JS進行傳值的實質說白了就是修改了響應JS的觸發點>
最後看一下傳值交互的效果，由客戶端將字符串“RITL"傳遞給web，經由JS方法修改label標簽的值:
- 上一頁:MacOS的菜單狀態欄App添加餅型進度
- 下一頁:iOS-JS調用OC
