iOS移动端WebApp的JS与Native交互（JS与OC）

来源：互联网发布：java socket链接不上编辑：程序博客网时间：2024/05/18 11:37

不论是纯webApp还是hybrid，js与原生的交互都不可避免，这里做一个自己的学习记录吧。js与OC的交互。

这里就以一个最基础的web页面获取移动端设备号UUID为例。

JS代码如下：

 var mobilePort; var uuid; var getUuid = function(sender){ uuid = sender; }

注意这里的mobilePort指的便是容纳webView的原生对象，在链接好之后在JS页面中便可以随意使用mobilePort来调用原生对象中遵循交互协议的方法。

链接js页面主要是在OC代码中处理。

首先在.h文件中导入JavaScriptCore框架，然后定义一个交互协议，协议中的方法便是JS可以调用的了。

#import <JavaScriptCore/JavaScriptCore.h>@protocol JSCommunicationDelegate <JSExport>- (void)sendUUID;@end

.m文件中实现:

@interface BFRootViewController ()<UIWebViewDelegate,JSCommunicationDelegate>@property (nonatomic,strong) JSContext *jsContext;@end

遵循UIWebViewDelegate与.h中定义的协议，再定义一个存储JS页面上下文的对象。

#pragma mark JSCommunicateDelegate- (void)sendUUID{    NSString *uuidStr = [[[UIDevice currentDevice] identifierForVendor] UUIDString];    //获取UUID后调用js方法传出    JSValue *getUuid = self.jsContext[@"getUuid"];    [getUuid callWithArguments:@[uuidStr]];    }#pragma mark - WebViewDelegate- (void)webViewDidFinishLoad:(UIWebView *)webView {    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    self.jsContext[@"mobilePort"] = self;    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {        context.exception = exceptionValue;        NSLog(@"异常信息：%@", exceptionValue);    };}

在webView当前页面加载完成后，获取当前web页面的js上下文对象，并将该对象中的mobilePort设置为自身。然后当js文件调用交互方法时，原生代码获取设备号，并且作为参数传入JS页面。

mobilePort.sendUUID();alert(uuid);

获取设备号就完成了。同样的需求还可用于调用系统相册，相机拍照，获取通讯录等场景。将调用方法写在原生的交互协议中，将数据传回JS即可。

0 0