WKJSWebView
iOS UIWebView逐漸被淘汰, WKWebView成為主流. 本文參考EasyJSWebView的交互方式, 對(duì)其進(jìn)行了修改和增加. 可以實(shí)現(xiàn)原生調(diào)用JS, 也可以JS調(diào)用原生.
一. 使用方法
JS調(diào)原生
- 創(chuàng)建一個(gè)交互類, 定義給js的交互接口
// OC
#import <Foundation/Foundation.h>
#import "WKJSWebView.h"
@interface JSInterface : NSObject
- (void)testWithParams:(NSString*)_params callback:(WKJSDataFunction*)_callback;
@end
#import "JSInterface.h"
#import "MJExtension.h"
@implementation JSInterface
- (void)testWithParams:(NSString*)_params callback:(WKJSDataFunction*)_callback
{
//接收h5 參數(shù)
NSLog(@"H5 調(diào) native, 參數(shù) : %@", _params);
NSString *letter = [NSString stringWithFormat:@"%C", (unichar)(arc4random_uniform(26) + 'A')];
NSDictionary* p1 = @{@"letter": letter, @"b": @"bb", @"c": @"cc"};
NSString* p2 = @"param_p2";
NSString* p3 = @"param_p3";
NSArray* nativeParams = @[p1, p2, p3];
//執(zhí)行h5回調(diào)函數(shù)
[_callback executeWithParams:nativeParams completionHandler:^(id response, NSError *error) {
NSLog(@"completionHandler");
}];
}
@end
- 初始化webView
// OC
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
CGRect rect = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height-150);
self.webView = [[WKJSWebView alloc] initWithFrame:rect configuration:[WKWebViewConfiguration new] scripts:nil withJavascriptInterfaces:@{@"native":[JSInterface new]}];
self.webView.navigationDelegate = self;
[self.view addSubview:self.webView];
NSString* _urlStr = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURLRequest* request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:_urlStr]];
[self.webView loadRequest:request];
}
- JS調(diào)原生接口
<script>
// js
window.native.testWithParamscallback('abc', (p1, p2, p3) => {
console.log(p1, p2, p3);
var obj1 = JSON.parse(p1);
let div = document.getElementById("op");
div.innerHTML = obj1.letter;
});
</script>
原生調(diào)JS
- js注冊(cè)方法
<script>
// js
function changeColor(param) {
let div = document.getElementById("oi");
div.style.backgroundColor = param.color;
};
window.EasyJS.mount("divChangeColor", changeColor);
</script>
- 原生調(diào)用JS
// OC
NSDictionary* args = @{@"color": [self Ox_randomColor]};
[self.webView invokeJSFunction:@"divChangeColor" params:args completionHandler:^(id response, NSError *error) {
NSLog(@"原生調(diào)用JS方法完成.");
}];
二. 原理解析
基本思想就是將需要交互的接口掛載到瀏覽器的window上, 然后通過(guò)js代碼調(diào)用.
原生將js代碼編譯成字符串, 再通過(guò)下面的方法執(zhí)行js:
// OC
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
js調(diào)原生
注入橋接js
首先看下面的js代碼:
// js
!function () {
if (window.EasyJS) {
return;
}
window.EasyJS = {
/**
* 存放JS的回調(diào)函數(shù)
*/
__callbacks: {},
/**
* 存放JS注冊(cè)給native的方法
*/
__events: {},
/**
* JS執(zhí)行此方法,將JS函數(shù)掛載到__events供原生調(diào)用
* @param {String} funcName js方法名
* @param {Function} handler js方法
*/
mount: function (funcName, handler) {
EasyJS.__events[funcName] = handler;
},
/**
* 原生執(zhí)行此方法 調(diào)用JS函數(shù)
* @param {String} funcID js方法名
* @param {JSON} paramsJson 參數(shù)
*/
invokeJS: function (funcID, paramsJson) {
let handler = EasyJS.__events[funcID];
if (handler && typeof (handler) === 'function') {
let args = '';
try {
if (typeof JSON.parse(paramsJson) == 'object') {
args = JSON.parse(paramsJson);
} else {
args = paramsJson;
}
return handler(args);
} catch (error) {
console.log(error);
args = paramsJson;
return handler(args);
}
} else {
console.log(funcID + '函數(shù)未定義');
}
},
/**
* native通過(guò)此方法執(zhí)行JS回調(diào)函數(shù)
* @param {String} cbID 函數(shù)ID
* @param {Boolean} removeAfterExecute 執(zhí)行后是否從__callbacks中否移除此回調(diào)函數(shù)
*/
invokeCallback: function (cbID, removeAfterExecute) {
let args = Array.prototype.slice.call(arguments);
args.shift(); // __cb1577786915804
args.shift(); // false
for (let i = 0, l = args.length; i < l; i++) {
args[i] = decodeURIComponent(args[i]);
}
let cb = EasyJS.__callbacks[cbID];
if (removeAfterExecute) {
EasyJS.__callbacks[cbID] = undefined;
}
return cb.apply(null, args);
},
/**
* 調(diào)用原生obj對(duì)象的方法
* @param {String} obj
* @param {String} functionName
* @param {Array} args
*/
call: function (obj, functionName, args) {
let formattedArgs = [];
for (let i = 0, l = args.length; i < l; i++) {
if (typeof args[i] == 'function') {
formattedArgs.push('f');
let cbID = '__cb' + (+new Date) + Math.random();
EasyJS.__callbacks[cbID] = args[i];
formattedArgs.push(cbID);
} else {
formattedArgs.push('s');
formattedArgs.push(encodeURIComponent(args[i]));
}
}
let argStr = (formattedArgs.length > 0 ? ':' + encodeURIComponent(formattedArgs.join(':')) : '');
/** NativeListener 要與原生中addScriptMessageHandler的name保持一致 */
window.webkit.messageHandlers.NativeListener.postMessage(obj + ':' + encodeURIComponent(functionName) + argStr);
let ret = EasyJS.retValue;
EasyJS.retValue = undefined;
if (ret) {
return decodeURIComponent(ret);
}
},
/**
* native用來(lái)給window添加obj的對(duì)象與方法
* @param {String} obj 添加到window上的對(duì)象
* @param {Array<String>} methods 添加到obj上的方法數(shù)組
*/
inject: function (obj, methods) {
window[obj] = {};
let jsObj = window[obj];
for (let i = 0, l = methods.length; i < l; i++) {
(function () {
let method = methods[i];
let jsMethod = method.replace(new RegExp(':', 'g'), '');
jsObj[jsMethod] = function () {
return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
};
})();
}
}
};
}()
這段js在webView初始化時(shí)注入到瀏覽器, 在window上增加一個(gè)EasyJS對(duì)象, 為交互搭建橋梁.
// OC
//EASY_JS_INJECT_STRING是上面的js代碼串
[configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:EASY_JS_INJECT_STRING injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES]];
注入原生交互方法
然后, 繼續(xù)注入原生交互類:
// OC
// interfaces : @{@"native":[JSInterface new]}
NSMutableString* injectString = [[NSMutableString alloc] init];
for(NSString *key in [interfaces allKeys]) {
[injectString appendString:@"EasyJS.inject(\""];
[injectString appendString:key];
[injectString appendString:@"\", ["];
NSObject* interfaceObj = [interfaces objectForKey:key];
if ([interfaceObj isKindOfClass:[NSObject class]]) {
Class cls = object_getClass(interfaceObj);
while (cls != [NSObject class]) {
unsigned int mc = 0;
Method * mlist = class_copyMethodList(cls, &mc);
for (int i = 0; i < mc; i++) {
[injectString appendString:@"\""];
[injectString appendString:[NSString stringWithUTF8String:sel_getName(method_getName(mlist[i]))]];
[injectString appendString:@"\""];
if ((i != mc - 1) || (cls.superclass != [NSObject class])) {
[injectString appendString:@", "];
}
}
free(mlist);
cls = cls.superclass;
}
}
[injectString appendString:@"]);"]; //@"EasyJS.inject(\"native\", [\"testWithParams:callback:\"]);"
}
#ifdef DEBUG
NSLog(@"injectString :\n%@", injectString);
#endif
[configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:injectString injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES]];
上面代碼調(diào)用了EasyJS.inject()方法:
// js
inject: function (obj, methods) {
window[obj] = {};
let jsObj = window[obj];
for (let i = 0, l = methods.length; i < l; i++) {
(function () {
let method = methods[i];
let jsMethod = method.replace(new RegExp(':', 'g'), '');
jsObj[jsMethod] = function () {
return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
};
})();
}
}
在window增加native對(duì)象,并且把JSInterface的交互方法都加到native對(duì)象.這里的native相當(dāng)于JSInterface在h5中的鏡像, 通過(guò)native,就可以調(diào)用原生方法:
// js
window.native.testWithParamscallback('abc', (p1, p2, p3) => {
// h5回調(diào)函數(shù)
});
發(fā)送消息給原生
但是, native.testWithParamscallback長(zhǎng)這樣的:
// js
function() {
return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));
};
這是鏡像native的testWithParamscallback方法, 它并不能換起原生, 真正調(diào)用原生的是EasyJS.call().
// js
call: function (obj, functionName, args) {
let formattedArgs = [];
for (let i = 0, l = args.length; i < l; i++) {
if (typeof args[i] == 'function') {
formattedArgs.push('f');
let cbID = '__cb' + (+new Date) + Math.random();
EasyJS.__callbacks[cbID] = args[i];
formattedArgs.push(cbID);
} else {
formattedArgs.push('s');
formattedArgs.push(encodeURIComponent(args[i]));
}
}
let argStr = (formattedArgs.length > 0 ? ':' + encodeURIComponent(formattedArgs.join(':')) : '');
/** NativeListener 要與原生中addScriptMessageHandler的name保持一致 */
window.webkit.messageHandlers.NativeListener.postMessage(obj + ':' + encodeURIComponent(functionName) + argStr);
let ret = EasyJS.retValue;
EasyJS.retValue = undefined;
if (ret) {
return decodeURIComponent(ret);
}
}
Easy.call()將js的回調(diào)函數(shù)生成唯一ID對(duì)應(yīng)保存到EasyJS.__callbacks,再將唯一ID和參數(shù)按約定的方式編譯放入數(shù)組 ,然后用原生約定的監(jiān)聽(tīng)名字NativeListener發(fā)送消息給原生window.webkit.messageHandlers.NativeListener.postMessage(obj + ':' + encodeURIComponent(functionName) + argStr);
NativeListener在初始化webView時(shí)指定, 同時(shí)將原生交互類映射interfaces掛載到監(jiān)聽(tīng)者.
// OC
// add message handler
WKJSListener *listener = [[WKJSListener alloc] init];
listener.javascriptInterfaces = interfaces;
[configuration.userContentController addScriptMessageHandler:listener name:WKJSMessageHandler];
原生接收消息并執(zhí)行
js發(fā)出消息后, 原生的監(jiān)聽(tīng)WKJSListener可以接收到:
// OC
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSMutableArray <WKJSDataFunction *>* _funcs = [NSMutableArray new];
NSMutableArray <NSString *>* _args = [NSMutableArray new];
if ([message.name isEqualToString:WKJSMessageHandler]) {
__weak WKJSWebView *webView = (WKJSWebView *)message.webView;
NSString *requestString = [message body];
// native:testWithParams%3Acallback%3A:s%3Aabc%3Af%3A__cb1577786915804
NSArray *components = [requestString componentsSeparatedByString:@":"];
//NSLog(@"req: %@", requestString);
NSString* obj = (NSString*)[components objectAtIndex:0];
NSString* method = [(NSString*)[components objectAtIndex:1] stringByRemovingPercentEncoding];
NSObject* interface = [self.javascriptInterfaces objectForKey:obj];
SEL selector = NSSelectorFromString(method);
NSMethodSignature* sig = [interface methodSignatureForSelector:selector];
if (sig.numberOfArguments == 2 && components.count > 2) {
NSString *assertDesc = [NSString stringWithFormat:@"*** -[%@ %@]: %@",NSStringFromClass([interface class]),method,@"實(shí)際接收參數(shù)個(gè)數(shù)與js傳參數(shù)不相等"];
assertDesc = assertDesc ? : @"";
NSAssert(NO, assertDesc);
return;
}
if (!sig) {
NSString *assertDesc = [NSString stringWithFormat:@"*** -[%@ %@]:%@",NSStringFromClass([interface class]),method,@"method signature argument cannot be nil"];
NSAssert(NO, assertDesc);
return;
}
if (![interface respondsToSelector:selector]) {
NSAssert(NO, @"該方法未實(shí)現(xiàn)");
return;
}
NSInvocation* invoker = [NSInvocation invocationWithMethodSignature:sig];
invoker.selector = selector;
invoker.target = interface;
if ([components count] > 2){
NSString *argsAsString = [(NSString*)[components objectAtIndex:2] stringByRemovingPercentEncoding];
NSArray* formattedArgs = [argsAsString componentsSeparatedByString:@":"];
if ((sig.numberOfArguments - 2) != [formattedArgs count] / 2) {
NSString *assertDesc = [NSString stringWithFormat:@"*** -[%@ %@]: 實(shí)際接收參數(shù)個(gè)數(shù)%@，js傳參個(gè)數(shù)%@",NSStringFromClass([interface class]),method,@(sig.numberOfArguments - 2),@([formattedArgs count] / 2)];
assertDesc = assertDesc ? : @"";
NSAssert(NO, assertDesc);
return;
}
for (unsigned long i = 0, j = 0, l = [formattedArgs count]; i < l; i+=2, j++){
NSString* type = ((NSString*) [formattedArgs objectAtIndex:i]);
NSString* argStr = ((NSString*) [formattedArgs objectAtIndex:i + 1]);
if ([@"f" isEqualToString:type]){
WKJSDataFunction *func = [[WKJSDataFunction alloc] initWithWebView:webView];
func.funcID = argStr;
[_funcs addObject:func];
[invoker setArgument:&func atIndex:(j + 2)];
}else if ([@"s" isEqualToString:type]){
NSString* arg = [argStr stringByRemovingPercentEncoding];
[_args addObject:arg];
[invoker setArgument:&arg atIndex:(j + 2)];
}
}
}
[invoker retainArguments];
[invoker invoke];
if ([sig methodReturnLength] > 0){
__unsafe_unretained NSString* tmpRetValue;
[invoker getReturnValue:&tmpRetValue];
NSString *retValue = tmpRetValue;
if (retValue == NULL || retValue == nil){
[webView wk_evaluateJavaScript:@"EasyJS.retValue=null;" completionHandler:nil];
}else{
retValue = [retValue stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet letterCharacterSet]];
retValue = [@"" stringByAppendingFormat:@"EasyJS.retValue=\"%@\";", retValue];
[webView wk_evaluateJavaScript:retValue completionHandler:nil];
}
}
}
[_funcs removeAllObjects];
[_args removeAllObjects];
}
在這里取出對(duì)象,方法,參數(shù), 通過(guò)javascriptInterfaces映射取原生對(duì)象(也就是JSInterface),然后執(zhí)行方法.
執(zhí)行js回調(diào)
原生方法執(zhí)行后回調(diào)js:
// OC
[_callback executeWithParams:nativeParams completionHandler:^(id response, NSError *error) {
}];
executeWithParams:completionHandler:方法如下:
// OC
- (void)executeWithParams:(NSArray *)params completionHandler:(void (^)(id response, NSError *error))completionHandler {
NSMutableArray * args = [NSMutableArray arrayWithArray:params];
for (int i=0; i<params.count; i++) {
NSString* json = [params[i] mj_JSONString];
[args replaceObjectAtIndex:i withObject:json];
}
NSMutableString* injection = [[NSMutableString alloc] init];
[injection appendFormat:@"EasyJS.invokeCallback(\"%@\", %@", self.funcID, self.removeAfterExecute ? @"true" : @"false"];
if (args) {
for (unsigned long i = 0, l = args.count; i < l; i++){
NSString* arg = [args objectAtIndex:i];
NSCharacterSet *chars = [NSCharacterSet characterSetWithCharactersInString:@"!*'();:@&=+$,/?%#[]"];
NSString *encodedArg = [arg stringByAddingPercentEncodingWithAllowedCharacters:chars];
[injection appendFormat:@", \"%@\"", encodedArg];
}
}
[injection appendString:@");"];
if (_webView){
[_webView wk_evaluateJavaScript:injection completionHandler:^(id response, NSError *error) {
if (completionHandler) {completionHandler(response, error);}
}];
}
}
通過(guò)EasyJS.invokeCallback()傳入回調(diào)函數(shù)唯一ID, 取出__callbacks中對(duì)應(yīng)的方法并執(zhí)行:
// js
invokeCallback: function (cbID, removeAfterExecute) {
let args = Array.prototype.slice.call(arguments);
args.shift(); // __cb1577786915804
args.shift(); // false
for (let i = 0, l = args.length; i < l; i++) {
args[i] = decodeURIComponent(args[i]);
}
let cb = EasyJS.__callbacks[cbID];
if (removeAfterExecute) {
EasyJS.__callbacks[cbID] = undefined;
}
return cb.apply(null, args);
},
args.shift()移除多余的參數(shù).
至此, js調(diào)原生流程結(jié)束.
原生調(diào)js
js注冊(cè)函數(shù)
原生調(diào)用js, 需要js將方法注冊(cè)到window, 注入js中提供了mount()方法給js注冊(cè)函數(shù)用:
// js
mount: function (funcName, handler) {
EasyJS.__events[funcName] = handler;
},
mount()方法將JS函數(shù)handler存放到__events, 以便提供給原生調(diào)用.
js中注冊(cè)也很簡(jiǎn)單:
// js
window.EasyJS.mount("divChangeColor", changeColor);
這樣就將divChangeColor函數(shù)注冊(cè)了, 它對(duì)應(yīng)js中的changeColor()方法:
// js
function changeColor(param) {
let div = document.getElementById("oi");
div.style.backgroundColor = param.color;
};
原生調(diào)js
原生調(diào)用js函數(shù)divChangeColor:
// OC
[self.webView invokeJSFunction:@"divChangeColor" params:@{@"color": [self Ox_randomColor]} completionHandler:^(id response, NSError *error) {
NSLog(@"原生調(diào)用JS方法完成.");
}];
invokeJSFunction:params:completionHandler:方法如下:
// OC
- (void)invokeJSFunction:(NSString*)jsFuncName params:(id)params completionHandler:(void (^)(id response, NSError *error))completionHandler {
NSString *paramJson = @"";
if (params) { paramJson = [params mj_JSONString]; }
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
NSString *script = [NSString stringWithFormat:@"%@('%@', '%@')", @"window.EasyJS.invokeJS", jsFuncName, paramJson];
[self wk_evaluateJavaScript:script completionHandler:completionHandler];
}
通過(guò)EasyJS.invokeJS(),取出__events中對(duì)應(yīng)divChangeColor的函數(shù)并執(zhí)行.
// js
invokeJS: function (funcID, paramsJson) {
let handler = EasyJS.__events[funcID];
if (handler && typeof (handler) === 'function') {
let args = '';
try {
if (typeof JSON.parse(paramsJson) == 'object') {
args = JSON.parse(paramsJson);
} else {
args = paramsJson;
}
return handler(args);
} catch (error) {
console.log(error);
args = paramsJson;
return handler(args);
}
} else {
console.log(funcID + '函數(shù)未定義');
}
}
至此, 原生調(diào)用js完成.
三. WKJSWebView代碼
WKJSWebView.h
#import <WebKit/WebKit.h>
#import <Foundation/Foundation.h>
#pragma mark - WKJSWebView
@interface WKJSWebView : WKWebView
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration*)configuration scripts:(NSArray<NSString*>*)scripts withJavascriptInterfaces:(NSDictionary*)interfaces;
/// 主線程執(zhí)行js
- (void)wk_evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *))completionHandler;
/// native 調(diào)用 h5 方法
- (void)invokeJSFunction:(NSString*)jsFuncName params:(id)params completionHandler:(void (^)(id response, NSError *error))completionHandler;
@end
#pragma mark - WKJSListener
@interface WKJSListener : NSObject<WKNavigationDelegate,WKScriptMessageHandler>
@property (nonatomic) NSDictionary *javascriptInterfaces;
@end
#pragma mark - WKJSDataFunction
@interface WKJSDataFunction : NSObject
@property (nonatomic, copy) NSString* funcID;
@property (nonatomic, strong) WKJSWebView *webView;
@property (nonatomic, assign) BOOL removeAfterExecute;
- (instancetype)initWithWebView:(WKJSWebView*)webView;
// 回調(diào)JS
- (void)execute:(void (^)(id response, NSError* error))completionHandler;
- (void)executeWithParam:(NSString *)param completionHandler:(void (^)(id response, NSError* error))completionHandler;
- (void)executeWithParams:(NSArray *)params completionHandler:(void (^)(id response, NSError* error))completionHandler;
@end
WKJSWebView.m
#import "WKJSWebView.h"
#import <objc/runtime.h>
#import "MJExtension.h"
static NSString * const EASY_JS_INJECT_STRING = @"!function () {\
if (window.EasyJS) {\
return;\
}\
window.EasyJS = {\
__callbacks: {},\
__events: {},\
mount: function (funcName, handler) {\
EasyJS.__events[funcName] = handler;\
},\
invokeJS: function (funcID, paramsJson) {\
let handler = EasyJS.__events[funcID];\
if (handler && typeof (handler) === 'function') {\
let args = '';\
try {\
if (typeof JSON.parse(paramsJson) == 'object') {\
args = JSON.parse(paramsJson);\
} else {\
args = paramsJson;\
}\
return handler(args);\
} catch (error) {\
console.log(error);\
args = paramsJson;\
return handler(args);\
}\
} else {\
console.log(funcID + '函數(shù)未定義');\
}\
},\
invokeCallback: function (cbID, removeAfterExecute) {\
let args = Array.prototype.slice.call(arguments);\
args.shift();\
args.shift();\
for (let i = 0, l = args.length; i < l; i++) {\
args[i] = decodeURIComponent(args[i]);\
}\
let cb = EasyJS.__callbacks[cbID];\
if (removeAfterExecute) {\
EasyJS.__callbacks[cbID] = undefined;\
}\
return cb.apply(null, args);\
},\
call: function (obj, functionName, args) {\
let formattedArgs = [];\
for (let i = 0, l = args.length; i < l; i++) {\
if (typeof args[i] == 'function') {\
formattedArgs.push('f');\
let cbID = '__cb' + (+new Date) + Math.random();\
EasyJS.__callbacks[cbID] = args[i];\
formattedArgs.push(cbID);\
} else {\
formattedArgs.push('s');\
formattedArgs.push(encodeURIComponent(args[i]));\
}\
}\
let argStr = (formattedArgs.length > 0 ? ':' + encodeURIComponent(formattedArgs.join(':')) : '');\
window.webkit.messageHandlers.NativeListener.postMessage(obj + ':' + encodeURIComponent(functionName) + argStr);\
let ret = EasyJS.retValue;\
EasyJS.retValue = undefined;\
if (ret) {\
return decodeURIComponent(ret);\
}\
},\
inject: function (obj, methods) {\
window[obj] = {};\
let jsObj = window[obj];\
for (let i = 0, l = methods.length; i < l; i++) {\
(function () {\
let method = methods[i];\
let jsMethod = method.replace(new RegExp(':', 'g'), '');\
jsObj[jsMethod] = function () {\
return EasyJS.call(obj, method, Array.prototype.slice.call(arguments));\
};\
})();\
}\
}\
};\
}()";
static NSString * const WKJSMessageHandler = @"NativeListener";
#pragma mark - WKJSWebView
@implementation WKJSWebView
/**
初始化WKWwebView,并將交互類的方法注入JS
*/
- (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration*)configuration scripts:(NSArray<NSString*>*)scripts withJavascriptInterfaces:(NSDictionary*)interfaces
{
if (!configuration) {
configuration = [[WKWebViewConfiguration alloc] init];
}
if (!configuration.userContentController) {
configuration.userContentController = [[WKUserContentController alloc] init];
}
// add script
for (NSString* script in scripts) {
[configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:script injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES]];
}
[configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:EASY_JS_INJECT_STRING injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES]];
NSMutableString* injectString = [[NSMutableString alloc] init];
for(NSString *key in [interfaces allKeys]) {
[injectString appendString:@"EasyJS.inject(\""];
[injectString appendString:key];
[injectString appendString:@"\", ["];
NSObject* interfaceObj = [interfaces objectForKey:key];
if ([interfaceObj isKindOfClass:[NSObject class]]) {
Class cls = object_getClass(interfaceObj);
while (cls != [NSObject class]) {
unsigned int mc = 0;
Method * mlist = class_copyMethodList(cls, &mc);
for (int i = 0; i < mc; i++) {
[injectString appendString:@"\""];
[injectString appendString:[NSString stringWithUTF8String:sel_getName(method_getName(mlist[i]))]];
[injectString appendString:@"\""];
if ((i != mc - 1) || (cls.superclass != [NSObject class])) {
[injectString appendString:@", "];
}
}
free(mlist);
cls = cls.superclass;
}
}
[injectString appendString:@"]);"]; //@"EasyJS.inject(\"native\", [\"testWithParams:callback:\"]);"
}
#ifdef DEBUG
NSLog(@"injectString :\n%@", injectString);
#endif
[configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:injectString injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES]];
// add message handler
WKJSListener *listener = [[WKJSListener alloc] init];
listener.javascriptInterfaces = interfaces;
[configuration.userContentController addScriptMessageHandler:listener name:WKJSMessageHandler];
// init
self = [super initWithFrame:frame configuration:configuration];
return self;
}
- (void)wk_evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *))completionHandler {
if (![NSThread isMainThread]) {
dispatch_async(dispatch_get_main_queue(), ^{
[self evaluateJavaScript:javaScriptString completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (completionHandler) {completionHandler(response, error);}
}];
});
} else {
[self evaluateJavaScript:javaScriptString completionHandler:^(id _Nullable response, NSError * _Nullable error) {
if (completionHandler) {completionHandler(response, error);}
}];
}
}
- (void)invokeJSFunction:(NSString*)jsFuncName params:(id)params completionHandler:(void (^)(id response, NSError *error))completionHandler {
NSString *paramJson = @"";
if (params) { paramJson = [params mj_JSONString]; }
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\\" withString:@"\\\\"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\"" withString:@"\\\""];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\n" withString:@"\\n"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\r" withString:@"\\r"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\f" withString:@"\\f"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\u2028" withString:@"\\u2028"];
paramJson = [paramJson stringByReplacingOccurrencesOfString:@"\u2029" withString:@"\\u2029"];
NSString *script = [NSString stringWithFormat:@"%@('%@', '%@')", @"window.EasyJS.invokeJS", jsFuncName, paramJson];
[self wk_evaluateJavaScript:script completionHandler:completionHandler];
}
@end
#pragma mark - WKJSListener
@implementation WKJSListener
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSMutableArray <WKJSDataFunction *>* _funcs = [NSMutableArray new];
NSMutableArray <NSString *>* _args = [NSMutableArray new];
if ([message.name isEqualToString:WKJSMessageHandler]) {
__weak WKJSWebView *webView = (WKJSWebView *)message.webView;
NSString *requestString = [message body];
// native:testWithParams%3Acallback%3A:s%3Aabc%3Af%3A__cb1577786915804
NSArray *components = [requestString componentsSeparatedByString:@":"];
//NSLog(@"req: %@", requestString);
NSString* obj = (NSString*)[components objectAtIndex:0];
NSString* method = [(NSString*)[components objectAtIndex:1] stringByRemovingPercentEncoding];
NSObject* interface = [self.javascriptInterfaces objectForKey:obj];
// execute the interfacing method
SEL selector = NSSelectorFromString(method);
NSMethodSignature* sig = [interface methodSignatureForSelector:selector];
if (sig.numberOfArguments == 2 && components.count > 2) {
// 方法簽名獲取到實(shí)際實(shí)現(xiàn)的方法無(wú)參數(shù) && js調(diào)用的方法帶參數(shù)
NSString *assertDesc = [NSString stringWithFormat:@"*** -[%@ %@]: %@",NSStringFromClass([interface class]),method,@"oc的交互方法不帶參數(shù)，但是js調(diào)用的方法傳了參數(shù)"];
// 因?yàn)閜od報(bào)警告，所以加上這句，實(shí)際沒(méi)有意義
assertDesc = assertDesc ? : @"";
NSAssert(NO, assertDesc);
return;
}
if (!sig) {
NSString *assertDesc = [NSString stringWithFormat:@"*** -[%@ %@]:%@",NSStringFromClass([interface class]),method,@"method signature argument cannot be nil"];
NSAssert(NO, assertDesc);
return;
}
if (![interface respondsToSelector:selector]) {
NSAssert(NO, @"該方法未實(shí)現(xiàn)");
return;
}
NSInvocation* invoker = [NSInvocation invocationWithMethodSignature:sig];
invoker.selector = selector;
invoker.target = interface;
if ([components count] > 2){
NSString *argsAsString = [(NSString*)[components objectAtIndex:2] stringByRemovingPercentEncoding];
NSArray* formattedArgs = [argsAsString componentsSeparatedByString:@":"];
if ((sig.numberOfArguments - 2) != [formattedArgs count] / 2) {
// 方法簽名獲取到實(shí)際實(shí)現(xiàn)的方法的參數(shù)個(gè)數(shù) != js調(diào)用方法時(shí)傳參個(gè)數(shù)
NSString *assertDesc = [NSString stringWithFormat:@"*** -[%@ %@]: oc的交互方法參數(shù)個(gè)數(shù)%@，js調(diào)用方法時(shí)傳參個(gè)數(shù)%@",NSStringFromClass([interface class]),method,@(sig.numberOfArguments - 2),@([formattedArgs count] / 2)];
// 因?yàn)閜od報(bào)警告，所以加上這句，實(shí)際沒(méi)有意義
assertDesc = assertDesc ? : @"";
NSAssert(NO, assertDesc);
return;
}
for (unsigned long i = 0, j = 0, l = [formattedArgs count]; i < l; i+=2, j++){
NSString* type = ((NSString*) [formattedArgs objectAtIndex:i]);
NSString* argStr = ((NSString*) [formattedArgs objectAtIndex:i + 1]);
if ([@"f" isEqualToString:type]){
WKJSDataFunction *func = [[WKJSDataFunction alloc] initWithWebView:webView];
func.funcID = argStr;
//do this to force retain a reference to it
[_funcs addObject:func];
[invoker setArgument:&func atIndex:(j + 2)];
}else if ([@"s" isEqualToString:type]){
NSString* arg = [argStr stringByRemovingPercentEncoding];
//do this to force retain a reference to it
[_args addObject:arg];
[invoker setArgument:&arg atIndex:(j + 2)];
}
}
}
[invoker retainArguments];
[invoker invoke];
//return the value by using javascript
if ([sig methodReturnLength] > 0){
__unsafe_unretained NSString* tmpRetValue;
[invoker getReturnValue:&tmpRetValue];
NSString *retValue = tmpRetValue;
if (retValue == NULL || retValue == nil){
[webView wk_evaluateJavaScript:@"EasyJS.retValue=null;" completionHandler:nil];
}else{
retValue = [retValue stringByAddingPercentEncodingWithAllowedCharacters:[NSCharacterSet letterCharacterSet]];
retValue = [@"" stringByAppendingFormat:@"EasyJS.retValue=\"%@\";", retValue];
[webView wk_evaluateJavaScript:retValue completionHandler:nil];
}
}
}
//clean up any retained funcs
[_funcs removeAllObjects];
//clean up any retained args
[_args removeAllObjects];
}
@end
#pragma mark - WKJSDataFunction
@implementation WKJSDataFunction
- (instancetype)initWithWebView:(WKJSWebView *)webView {
self = [super init];
if (self) {
_webView = webView;
}
return self;
}
- (void)execute:(void (^)(id response, NSError *error))completionHandler {
[self executeWithParam:nil completionHandler:^(id response, NSError *error) {
if (completionHandler) {
completionHandler(response, error);
}
}];
}
- (void)executeWithParam:(NSString *)param completionHandler:(void (^)(id response, NSError *error))completionHandler {
[self executeWithParams:param ? @[param] : nil completionHandler:^(id response, NSError *error) {
if (completionHandler) {
completionHandler(response, error);
}
}];
}
- (void)executeWithParams:(NSArray *)params completionHandler:(void (^)(id response, NSError *error))completionHandler {
NSMutableArray * args = [NSMutableArray arrayWithArray:params];
for (int i=0; i<params.count; i++) {
NSString* json = [params[i] mj_JSONString];
[args replaceObjectAtIndex:i withObject:json];
}
NSMutableString* injection = [[NSMutableString alloc] init];
[injection appendFormat:@"EasyJS.invokeCallback(\"%@\", %@", self.funcID, self.removeAfterExecute ? @"true" : @"false"];
if (args) {
for (unsigned long i = 0, l = args.count; i < l; i++){
NSString* arg = [args objectAtIndex:i];
NSCharacterSet *chars = [NSCharacterSet characterSetWithCharactersInString:@"!*'();:@&=+$,/?%#[]"];
NSString *encodedArg = [arg stringByAddingPercentEncodingWithAllowedCharacters:chars];
[injection appendFormat:@", \"%@\"", encodedArg];
}
}
[injection appendString:@");"];
if (_webView){
[_webView wk_evaluateJavaScript:injection completionHandler:^(id response, NSError *error) {
if (completionHandler) {completionHandler(response, error);}
}];
}
}
@end
四. demo代碼
iOS
//
// ViewController.m
// TMEasyJSWebView
//
// Created by 吉久東 on 2019/8/13.
// Copyright ? 2019 JIJIUDONG. All rights reserved.
//
#import "ViewController.h"
#import "WKJSWebView.h"
#import "JSInterface.h"
#import "MJExtension.h"
@interface ViewController ()<WKNavigationDelegate>
@property (nonatomic, strong) WKJSWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];
CGRect rect = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height-150);
self.webView = [[WKJSWebView alloc] initWithFrame:rect configuration:[WKWebViewConfiguration new] scripts:nil withJavascriptInterfaces:@{@"native":[JSInterface new]}];
self.webView.navigationDelegate = self;
[self.view addSubview:self.webView];
NSString* _urlStr = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURLRequest* request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:_urlStr]];
[self.webView loadRequest:request];
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
UILabel* l = [UILabel new];
l.text = @"這里灰色部分是原生界面";
l.frame = CGRectMake(5, self.view.bounds.size.height - 150, 310, 20);
[self.view addSubview:l];
UIButton * b = [UIButton buttonWithType:UIButtonTypeCustom];
b.backgroundColor = [UIColor yellowColor];
[b setTitle:@"黃色是原生按鈕" forState:UIControlStateNormal];
[b setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[b setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];
[b addTarget:self action:@selector(nativeButtonClicked) forControlEvents:UIControlEventTouchUpInside];
b.frame = CGRectMake(5, self.view.bounds.size.height-100, 310, 50);
[self.view addSubview:b];
}
- (void)nativeButtonClicked {
NSLog(@"點(diǎn)擊了原生按鈕");
[self.webView invokeJSFunction:@"divChangeColor" params:@{@"color": [self Ox_randomColor]} completionHandler:^(id response, NSError *error) {
NSLog(@"原生調(diào)用JS方法完成.");
}];
}
- (NSMutableString*)Ox_randomColor {
NSMutableString* color = [[NSMutableString alloc] initWithString:@"#"];
NSArray * STRING = @[@"0",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"A",@"B",@"C",@"D",@"E",@"F"];
for (int i=0; i<6; i++) {
NSInteger index = arc4random_uniform((uint32_t)STRING.count);
NSString *c = [STRING objectAtIndex:index];
[color appendString:c];
}
return color;
}
@end
h5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a {
width: 300px;
height: 80px;
font-size: 32px;
text-align: center;
line-height: 80px;
margin-bottom: 10px;
}
</style>
<script>
function getCharacter() {
window.native.testWithParamscallback('abc', (p1, p2, p3) => {
console.log(p1, p2, p3);
var obj1 = JSON.parse(p1);
let div = document.getElementById("op");
div.innerHTML = obj1.letter;
});
};
function changeColor(param) {
let div = document.getElementById("oi");
div.style.backgroundColor = param.color;
};
window.EasyJS.mount("divChangeColor", changeColor);
</script>
</head>
<body>
<p>這里是 h5 web 頁(yè)面</p>
<p>1.點(diǎn)擊下面按鈕,調(diào)用原生方法獲取隨機(jī)字母并顯示到h5</p>
<div id="op" class="a" style="background-color: pink;" onclick="getCharacter()"></div>
<p>2.原生調(diào)用h5方法,改變?cè)撛乇尘吧?lt;/p>
<div id="oi" class="a" style="background-color: aqua;" onclick="changeColor()"></div>
</body>
</html>
