前言
嗯，我先看的是官方GitHub上的Demo，一脸萌B啊，之后我看标哥的Demo算是稍微的懂了一点用法，虽然我的项目中没有使用到WebViewJavascriptBridge但是我还是希望自己从标哥的demo中获得的一点理解告诉大家，让大家更快的入门嘛！
正文
我用的demo是这个标哥的demo，这个demo稍微简单明确一点，我就说说我从这里面看的。
先看下这个的运行图吧：
模拟器运行图.png
其实和官方的是差不多的，也是点击打开博文或者是上边的getBlogNameFromObjC都是呼啦啦的加上一条博文。
在这里呢我们首先明确一点：
打开博文和刷新webview是OC的button, getBlogNameFromObjC是网页上的按钮，希望官方的demo改改颜色也好吧，搞得我开始以为都是网页上的按钮呢。
OC代码
其实就是我们ViewDidLoad里面的那么几行：
前面的加载网页的我就不说了，就说两个registerHander和一个callHander
OC端端口.png
表面意思：register(注册)了两个JS可以主动调用的OC接口，call(调用)了一个JS的方法。注意call是主动调用也就是进入程序就会调用。
我们可以在看一在OC的call下面NSLog处打下断点打印出来的日志：
断点日志.png
这里面有两个SEND和两个RCVD，那么是谁发出和接受了信息呢，是我们的OC端。
我们从上向下将，第一个SEND, 数据是字典的名字标哥，也就是我们的call端口的callHander后面的data数据。接受者就是JS端的相应的同样端口名的getUserInfos端口，我贴一下H5也就是JS的代码
JS端端口代码.png
后面我会讲怎么写这个JS，现在我们就看交互这一段的东西。JS这边register了一个同名的getUserInfos里面就是打印和responseCallback（回复）给OC的字典，标哥的用户名和博客地址。打印日志里面是在后面RCVD的，因为JS这边也有一个主动调用的SEND，我们的打印会在这个函数完成之后才调用。JS端主动调用的接口是getUserIdFormObjc，传递空给OC，OC的 getUserIdFormObjc接受相应的信息也就是日志里面2的结果。这个函数回给了JS 用户名的字典也就是日志里面的3。最后就是最后接收到到的延迟日志4。
点击getUserIdFromObjC按钮
我们点击一下getUserIdFromObjC按钮，按钮日志如下：
点击网页按钮日志.png
JS这边有一个点击按钮的动作，Call了一个getBlogNameFromObjC的端口，传递过去了blogURL网址的字典。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 模块代码了，只要照着那个格式就可以了！
总结
这两篇简书我都是照着我完成的道路一步步的关注的点写的，可能也会忘记一些细节的问题或者是没有遇到，如果读者遇到了希望能在评论里面和我说明，我们一起进步！
网友评论