IOS js and native interaction (complete)

The importance of hybrid development is self-evident, a mobile-side development of the understanding of front-end development is a trend, in short, everyone is yearning to become a full stack of engineers, nonsense not much to say, directly on the topic

First, interaction (UIWebView)

1, OC Call JS

　 (1) OC Calling code

[Self.webview stringbyevaluatingjavascriptfromstring:@ "occalljsfunction ({' name ': ' Xiaoxiao ')"];

(2) JS code

</script>
function Occalljsfunction (data) {
var obj = eval (data);
alert (obj.name);
}
<script>

2, JS call OC

(1) OC Code

-(void) Webviewdidfinishload: (UIWebView *) WebView {

Jscontext *context = [WebView valueforkeypath:@ "DocumentView.webView.mainFrame.javaScriptContext"];

context[@ "jscallocfunction"] = ^ () {

NSLog (@ "JS call oc Success");

Nsarray *args = [Jscontext currentarguments];

For (Jsvalue *jsval in args) {

NSLog (@ "%@", jsval.todictionary);

}

};

}

(2) JS calling code

</script>

var message = {
' method ': ' Hello ',
' param1 ': ' Dada ',
};
Jscallocfunction (message);

<script>

Ii. Interaction (Wkwebview)

1, OC Call JS

(1) OC Calling code

[Self.wkwebview evaluatejavascript:@ "occalljsfunction ({' name ': ' Xiaoxiao '} ')" completionhandler:^ (id _Nullable obj, Nserror * _nullable error) {

NSLog (@ "evaluatejavascript, obj =%@, error =%@", obj, error);

}];

(2) JS code

</script>
function Occalljsfunction (data) {
var obj = eval (data);
alert (obj.name);
}
<script>

2, JS call OC

(1) OC Code

Initialize Wkwebview

Wkwebviewconfiguration *config = [[Wkwebviewconfiguration alloc] init];

[Config.usercontentcontroller addscriptmessagehandler:self name:@ "Jscallocfunction"];

Wkwebview *wkwebview = [[Wkwebview alloc] Initwithframe:cgrectzero configuration:config];

　　

#pragma mark-wkscriptmessagehandler

-(void) Usercontentcontroller: (Wkusercontentcontroller *) Usercontentcontroller didreceivescriptmessage: ( Wkscriptmessage *) Message {

NSLog (@ "name =%@", message.name);

NSLog (@ "BODY =%@", message.body);

NSLog (@ "frameinfo =%@", message.frameinfo);

}

(2) JS calling code

</script>

var message = {
' method ': ' Hello ',
' param1 ': ' Dada ',
};
Window.webkit.messageHandlers.jsCallOCFunction.postMessage (message);

<script>

Iii. Interaction (Webviewjavascriptbridge)

Function Summary:

OC Tune JS Call succeeds, JS can callback data to OC

JS to make the OC call successful, OC can callback data to JS

1, OC Call JS

(1) OC Calling code

_bridge = [Webviewjavascriptbridge Bridgeforwebview:wkwebview];

ID data = @{@ "name": @ "Xiaoxiao"};

[_bridge callhandler:@ "Occalljsfunction" Data:data responsecallback:^ (ID response) {

NSLog (@ "Here is the OC call JS success, JS callback parameters:%@", response);

}];

　(2) JS code

</script>

Registering the JS method for OC Invocation
Bridge.registerhandler (' Occalljsfunction ', function (data, responsecallback) {
var obj = eval (data);
alert (Obj.userid);

var responsedata = {' Code ': ' 200 '}
Responsecallback (ResponseData)
})

<script>

2, JS call OC

(1) OC Code

[_bridge registerhandler:@ "Jscallocfunction" handler:^ (ID data, Wvjbresponsecallback responsecallback) {

NSLog (@ "JS pass over the parameters:%@", data);

Responsecallback (@ "This is JS call OC Success, OC callback parameters");

}];

(2) JS calling code

JS Call OC Registration method
Bridge.callhandler (' jscallocfunction ', {' name ': ' Dada '}, function Responsecallback (responsedata) {

alert (responsedata);
})

IOS js and native interaction (complete)