在 APP 中，免不了與 H5頁面打交道，所以掌握 與 JS 交互就顯的至關(guān)重要，本文總結(jié)了常見的與 JS 交互方式。
富錦網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
注意事項(xiàng)
在 OC 原生中
在 html 文件中
早期的JS與原生交互的開源庫很多都是用得這種方式來實(shí)現(xiàn)的，例如：PhoneGap、 WebViewJavascriptBridge 。
效果圖
使用WKNavigationDelegate中的代理方法，攔截自定義的 URL 來實(shí)現(xiàn) JS 調(diào)用 OC 方法。
注意點(diǎn)
關(guān)于如何區(qū)分執(zhí)行不同的OC 方法，也與UIWebView的處理方式一樣,通過URL 的host 來區(qū)分執(zhí)行不同的方法：
JS 調(diào)用OC 方法后，有的操作可能需要將結(jié)果返回給JS。這時(shí)候就是OC 調(diào)用JS 方法的場(chǎng)景。
WKWebView 提供了一個(gè)新的方法 evaluateJavaScript:completionHandler: ，實(shí)現(xiàn)OC 調(diào)用JS 等場(chǎng)景。
注意點(diǎn)
運(yùn)行結(jié)果
在iOS 7之后，apple添加了一個(gè)新的庫JavaScriptCore，用來做JS交互，因此JS與原生OC交互也變得簡(jiǎn)單了許多。
首先導(dǎo)入JavaScriptCore庫, 然后在OC中獲取JS的上下文。
再然后定義好JS需要調(diào)用的方法，例如JS要調(diào)用share方法：
則可以在UIWebView加載url完成后，在其代理方法中添加要調(diào)用的share方法：
OC 調(diào)用 JS 方法有多種，首先介紹使用JavaScriptCore框架的方式。
使用JSContext 的方法 -evaluateScript ，可以實(shí)現(xiàn) OC 調(diào)用 JS 方法
效果圖
使用WKWebView的時(shí)候，如果想要實(shí)現(xiàn)JS調(diào)用OC方法，除了攔截URL之外，還有一種簡(jiǎn)單的方式。那就是利用WKWebView的新特性MessageHandler來實(shí)現(xiàn)JS調(diào)用原生方法。
創(chuàng)建 WKWebViewConfiguration 對(duì)象，配置各個(gè)API對(duì)應(yīng)的MessageHandler。
然后在界面即將顯示的時(shí)候添加MessageHandler
需要注意的是addScriptMessageHandler很容易引起循環(huán)引用，導(dǎo)致控制器無法被釋放，所以需要移除MessageHandler
這里實(shí)現(xiàn)了兩個(gè)協(xié)議 WKUIDelegate,WKScriptMessageHandler ， WKUIDelegate 是因?yàn)槲以贘S中彈出了alert 。 WKScriptMessageHandler 是因?yàn)槲覀円幚鞪S調(diào)用OC方法的請(qǐng)求。
WKScriptMessage 有兩個(gè)關(guān)鍵屬性 name 和 body 。
因?yàn)槲覀兘o每一個(gè)OC 方法取了一個(gè)name，那么我們就可以根據(jù)name 來區(qū)分執(zhí)行不同的方法。body 中存著JS 要給OC 傳的參數(shù)。
關(guān)于參數(shù)body 的解析，我就舉一個(gè)body中放字典的例子，其他的稍后可以看demo。
解析JS 調(diào)用OC 實(shí)現(xiàn)分享的參數(shù)：
message.boby 就是JS 里傳過來的參數(shù)。我們不同的方法先做一下容錯(cuò)性判斷。然后正常取值就可以了。
下面只列舉一個(gè)shareClick()方法，其他看Demo
這里使用WKWebView 實(shí)現(xiàn)OC 調(diào)用JS方法與之前說的文章一樣，通過
- evaluateJavaScript:completionHandler:
效果圖如下圖所示
詳情看下面文章鏈接
iOS下 JS 與 OC 互相調(diào)用(五) - UIWebView+WebViewJavascriptBridge
詳情看下面文章鏈接
iOS下 JS 與 OC 互相調(diào)用(六) - WKWebView+WKWebViewJavascriptBridge
iOS下 JS 與OC 互相調(diào)用(一) - UIWebView 攔截 URL
iOS下 JS 與OC 互相調(diào)用(二) - JavaScriptCore
iOS 下 JS 與 OC 互相調(diào)用(三) - WKWebView 攔截 URL
iOS下JS與OC互相調(diào)用(四)-MessageHandler
iOS下 JS 與 OC 互相調(diào)用(五) - UIWebView+WebViewJavascriptBridge
iOS下 JS 與 OC 互相調(diào)用(六) - WKWebView+WKWebViewJavascriptBridge
1、初始化wkwebview
2、獲取js返回的信息
3、原生調(diào)用js方法
4、攔截url（可在此方法中實(shí)現(xiàn)判斷url執(zhí)行相應(yīng)的oc方法）：js會(huì)嘗試加載某個(gè)URL，客戶端在加載前攔截這個(gè)URL，通過解析這個(gè)URL識(shí)別它的內(nèi)容，調(diào)用相應(yīng)的原生方法，并阻止瀏覽器加載這個(gè)URL
Demo：
不論是在創(chuàng)業(yè)團(tuán)隊(duì)中快速試錯(cuò)，還是在成熟團(tuán)隊(duì)中快速迭代復(fù)雜需求，還或者是其他原因，WebView在APP中的大量使用已經(jīng)成為了一個(gè)明顯的趨勢(shì)，這也應(yīng)該算是大前端融合的一個(gè)表象吧。筆者在工作中也遇到過很多AppJs交互的問題，粗淺的研究了一下，這里也分享給大家，如果有錯(cuò)誤的地方還請(qǐng)下方留言指出，共同進(jìn)步。
眾所周知，iOS有 UIWebView 、 WKWebView 兩個(gè)組件可以用來渲染嵌入頁面。前者使用甚廣，出生的也早，后者是iOS8推出的，優(yōu)化了加載速度和內(nèi)存，安全性上也有所提升。具體的兩者比較百度、上都很多，這里不做贅述。
前兩種方法到此就介紹完了，很簡(jiǎn)單，但是在項(xiàng)目大了之后攔截跳轉(zhuǎn)的代理方法中會(huì)有非常多的判斷。冗余、可維護(hù)性差，硬編碼重。所以我們會(huì)有下面的其他方法。
JSContext即JavaScriptContext，這個(gè)東西在UIWebView中可以拿到，但是在WKWebView中卻是取不到了，所以只能用在UIWebView中。除此以外Android里也有類似的一個(gè)東西，所以使用JSContext就有了在JS端多平臺(tái)統(tǒng)一的可能，這里不多說，在《App與Js交互（三）》中會(huì)有詳細(xì)說明。
JSContext的原理就是iOS暴露出去一個(gè)遵守 JSExport 協(xié)議的對(duì)象給JS，JS可以直接調(diào)用該對(duì)象的public方法。
window.webkit.messagehandlers.name.postMessage 是apple推薦使用的WKWebView的JS交互方式，使用起來比較簡(jiǎn)單，不支持callback回調(diào)。
重慶分公司
重慶分公司
