基于WebViewJavascriptBridge框架的JS与O
2017-01-03 本文已影响59人
李连毛
前言
最近开始接触hybrid相关的知识，感觉混生是一种趋势啊（我已经落伍了），不过Facebook的React Native十分的强势，不知道会不会一统江湖。我是基于WebViewJavascriptBridge做的一个demo，刚刚学习，可能有很多知识点没有学到，也可能有很多坑没踩到，以后会慢慢来。
安装
使用pod安装
platform :ios, '7.0'
target ‘JSOCBridge’ do
pod 'WebViewJavascriptBridge', '~>5.0'
end
代码
工程结构
工程的结构
JS代码
首先是setupWebViewJavascriptBridge这个function的代码是固定的，当所有DOM节点加载完毕后，运行$(document).ready里面的内容，这里我们写了一个alert弹窗，同时还注册了个bridge。这里可以通过callback回调来进行数据传递。
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
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)
}
$(document).ready(function(){
alert('document ready');
setupWebViewJavascriptBridge(function(bridge){
bridge.registerHandler('js_handler', function(data, callback){
alert('JS Receive:'+data);
callback('<data after calculate>');
})
});
});
</script>
</body>
OC代码
这里是ViewController的代码，首先初始化一个webView，然后选择要加载的路径，最后和JS搭桥，并且可以在block里面处理JS返回的数值。
//
// ViewController.m
// JSOCBridge
//
// Created by 李林 on 2017/1/3.
// Copyright © 2017年 lee. All rights reserved.
//
#import "ViewController.h"
#import <WebViewJavascriptBridge/WebViewJavascriptBridge.h>
@interface ViewController () <UIWebViewDelegate>
@property (nonatomic, strong) UIWebView *webView;
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// common Init
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectZero];
webView.delegate = self;
self.webView = webView;
// webView
NSURL *url = [NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil]];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[webView loadRequest:request];
// Bridge
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];
[self.bridge callHandler:@"js_handler" data:@"<data from objc>" responseCallback:^(id responseData) {
NSLog(@"收到来自js的回调数据 %@", responseData);
}];
}
最后提醒一下，我这里用到了jQuery，大家引入一下这个库。
代码的地址在我的github
特别鸣谢
http://www.jianshu.com/p/b723e2be37c7
http://www.jianshu.com/users/6c03952ed6a8/latest_articles
