前言
嗯阻肿，我先看的是官方GitHub上的Demo丛塌，一臉萌B啊，之后我看標(biāo)哥的Demo算是稍微的懂了一點用法哨坪，雖然我的項目中沒有使用到WebViewJavascriptBridge但是我還是希望自己從標(biāo)哥的demo中獲得的一點理解告訴大家乍楚，讓大家更快的入門嘛届慈！
正文
我用的demo是這個標(biāo)哥的demo，這個demo稍微簡單明確一點臊泌，我就說說我從這里面看的揍拆。
先看下這個的運行圖吧：
其實和官方的是差不多的，也是點擊打開博文或者是上邊的getBlogNameFromObjC都是呼啦啦的加上一條博文播揪。
在這里呢我們首先明確一點：
打開博文和刷新webview是OC的button, getBlogNameFromObjC是網(wǎng)頁上的按鈕筒狠，希望官方的demo改改顏色也好吧，搞得我開始以為都是網(wǎng)頁上的按鈕呢雇庙。
OC代碼
其實就是我們ViewDidLoad里面的那么幾行：
前面的加載網(wǎng)頁的我就不說了灶伊，就說兩個registerHander和一個callHander
表面意思：register(注冊)了兩個JS可以主動調(diào)用的OC接口聘萨，call(調(diào)用)了一個JS的方法。注意call是主動調(diào)用也就是進入程序就會調(diào)用匈挖。
我們可以在看一在OC的call下面NSLog處打下斷點打印出來的日志：
這里面有兩個SEND和兩個RCVD，那么是誰發(fā)出和接受了信息呢舶吗，是我們的OC端。
我們從上向下將检激，第一個SEND, 數(shù)據(jù)是字典的名字標(biāo)哥腹侣，也就是我們的call端口的callHander后面的data數(shù)據(jù)。接受者就是JS端的相應(yīng)的同樣端口名的getUserInfos端口饺律，我貼一下H5也就是JS的代碼
后面我會講怎么寫這個JS跺株，現(xiàn)在我們就看交互這一段的東西。JS這邊register了一個同名的getUserInfos里面就是打印和responseCallback（回復(fù)）給OC的字典巧颈，標(biāo)哥的用戶名和博客地址袖扛。打印日志里面是在后面RCVD的，因為JS這邊也有一個主動調(diào)用的SEND唇礁，我們的打印會在這個函數(shù)完成之后才調(diào)用娶吞。JS端主動調(diào)用的接口是getUserIdFormObjc，傳遞空給OC妒蛇，OC的 getUserIdFormObjc接受相應(yīng)的信息也就是日志里面2的結(jié)果绣夺。這個函數(shù)回給了JS 用戶名的字典也就是日志里面的3。最后就是最后接收到到的延遲日志4陶耍。
點擊getUserIdFromObjC按鈕
我們點擊一下getUserIdFromObjC按鈕，按鈕日志如下：
JS這邊有一個點擊按鈕的動作泊碑，Call了一個getBlogNameFromObjC的端口，傳遞過去了blogURL網(wǎng)址的字典臭脓。1上面的form js是OC call里面NSLog出來了斷點位置問題腹忽。下面的好多是我自己加的方法，我們只要看OC這邊的registerHandler：getBlogNameFromObjC端口就好了嘹锁，下面判斷之后會給JS了一個字典是博客的名字着裹。就有了日志2。
JS代碼的編寫
我分成四個部分來寫瘤运，就是從空白頁來弄匠题，手打手打但金。
前三個部分都固定的，不同的就是你自定義的名字之類的冷溃。
第一個部分：
<!doctype html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0", maximum-scale=1.0">
<style type='text/css'>
html { font-family:Helvetica; color:#222; }
h1{ color:steelblue:font-size:24px; margin-top:24px; }
button{ margin:0 3px 10px; font-size:12px;}
.logLine{ border-bottom:1px solid #ccc; padding:4px 2px;font-family:courier; font-size:11px;}
</style>
</head>
<h1>Test</h1>
<script>
window.onerror = function(err){
log ('window.onerror:'+err)
}
第二部分
function setupWebViewJavascriptBridge(callback){
if(window.WebViewJavascriptBridge){ return callback(WebViewJavascriptBridge);}
if(window.WVJBCallbacks){return window.WVJBCallbacks.push(callback);}
window.WVJBCallbacks =[callback];
var WVJBIframe =document.createElement('iframe');
WVJBIframe.style.display='none';
WVJBIframe.src ='wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }
}, 0)
}
第三部分
setupWebViewJavascriptBridge(function(bridge){
var uniqueId = 1
function log(message, data) {
var log = document.getElementById('log')
var el = document.createElement('div')
el.className = 'logLine'
el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
if (log.children.length) {
log.insertBefore(el, log.children[0])
} else {
log.appendChild(el)
}
}
第四部分
第四部分也就是上面的 js 模塊代碼了盖淡，只要照著那個格式就可以了凿歼！
總結(jié)
這兩篇簡書我都是照著我完成的道路一步步的關(guān)注的點寫的，可能也會忘記一些細節(jié)的問題或者是沒有遇到答憔，如果讀者遇到了希望能在評論里面和我說明，我們一起進步心俗！
