`

Objective-C与JavaScript交互的那些事

    博客分类:
  • ios
阅读更多
转载于:http://www.cocoachina.com/ios/20160127/15105.html
最近公司的运营瞎搞了个活动,其活动要服务端提供数据支持,web前端在微信公众账号内作为主要的运营阵地,而iOS、Android要提供相应的入口及页面进行配合。一个活动,动用了各个端的程序猿。而在这里面技术方面主要就是涉及到web端和服务端的交互,web前端和iOS、Android的交互。本人作为一个iOS开发者,今天就聊聊web、iOS、Android三端的交互,其实在说明白一点就是方法的互相调用而已。这里主要讲解iOS。Android会稍微提一下,仅作参考。

此篇文章的逻辑图

图0-0 此篇文章的逻辑图

概述

iOS原生应用和web页面的交互大致上有这几种方法iOS7之后的JavaScriptCore、拦截协议、第三方框架WebViewJavaScriptBridge、iOS8之后的WKWebView在这里主要讲解JavaScriptCore和拦截协议这两种办法。WebViewJavaScriptBridge是基于拦截协议进行的封装。学习成本相对JavaScriptCore较高,使用也不如JavaScriptCore方便本文不做叙述。WKWebView是iOS8之后推出的,还没有成为主流使用,所以本篇文章也不做详细叙述。

Objective-C执行JavaScript代码

相关方法

// UIWebView的方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
 
// JavaScriptCore中JSContext的方法
- (JSValue *)evaluateScript:(NSString *)script;
- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL

相关应用

用这些方法去执行大段的JavaScript代码是没什么必要的,但是有些小场景用起来还是比较顺手和实用的,列举两个例子作为参考:

// 获取当前页面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
 
// 获取当前页面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];

JavaScriptCore

iOS7之后苹果推出了JavaScriptCore这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android那边和iOS相对统一,web前端写一套代码就可以适配客户端的两个平台,从而减少了web前端的工作量。

web前端

在三端交互中,web前端要强势一些,一切传值、方法命名都按web前端开发人员来定义,让另外两端去做适配。在这里以调用摄像头和分享为例来详细讲解,测试网页代码取名为test.html,其代码内容如下:

test.html代码内容(因识别问题,用方括号替换了代码中的尖括号)

[!DOCTYPE html]
[html]
[head]
    [meta charset="UTF-8"]
[/head]
[body]
    [div style="margin-top: 100px"]
        [h1>Objective-C和JavaScript交互的那些事[/h1]
        [input type="button" value="CallCamera" onclick="Toyun.callCamera()"]
    [/div]       
    [div]
        [input type="button" value="Share" onclick="callShare()"]
    [/div]
     
[script]
    var callShare = function() {
        var shareInfo = JSON.stringify({"title": "标题", "desc": "内容", "shareUrl": "http://www.jianshu.com/p/f896d73c670a",
        "shareIco":"http://upload-images.jianshu.io/upload_images/1192353-fd26211d54aea8a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"});
        Toyun.share(shareInfo);
    }
     
    var picCallback = function(photos) {
        alert(photos);
    }
     
    var shareCallback = function(){
        alert('success');
    }
[/script]
[/body]
[/html]


test.html代码解释


可能有些同学对web前端的一些知识不太熟悉,稍微对这段代码做下解释,先说Toyun是iOS和Android这两边在本地要注入的一个对象【参考下面iOS的代码更容易明白】,充当原生应用和web页面之间的一个桥梁。页面上定义了两个按钮名字分别为CallCamera和Share。点击CallCamera会通过Toyun这个桥梁调用本地应用的方法- (void)callCamera,没有传参;而点击Share会先调用本文件中的JavaScript方法callShare这里将要分享的内容格式转成JSON字符串格式(这样做是为了适配Android,iOS可以直接接受JSON对象)然后再通过Toyun这个桥梁去调用原生应用的- (void)share:(NSString *)shareInfo方法这个是有传参的,参数为shareInfo。而下面的两个方法为原生方法调用后的回调方法,其中picCallback为获取图片成功的回调方法,并且传回拿到的图片photos;shareCallback为分享成功的回调方法。

iOS

iOS这边根据前端定义的方法名来写代码,但是有些时候web前端会让我们定义,但是我们定义好之后他又要修改,这时候就会很烦啊。所以碰到三端交互的时候最好就是让web前端去定义方法名,iOS和Android根据web前端定义好的去写代码。JavaScriptCore中web页面调用原生应用的方法可以用Delegate或Block两种方法,此文以按Delegate讲解。

JavaScriptCore中类及协议:

JSContext:给JavaScript提供运行的上下文环境
JSValue:JavaScript和Objective-C数据和方法的桥梁
JSManagedValue:管理数据和方法的类
JSVirtualMachine:处理线程相关,使用较少
JSExport:这是一个协议,如果采用协议的方法交互,自己定义的协议必须遵守此协议
ViewController中的代码

#import "ViewController.h"
#import [JavaScriptCore/JavaScriptCore.h](此处为尖括号)
 
@protocol JSObjcDelegate [JSExport](此处为尖括号)
 
- (void)callCamera;
- (void)share:(NSString *)shareString;
 
@end
 
@interface ViewController () [UIWebViewDelegate, JSObjcDelegate](此处为尖括号)
 
@property (nonatomic, strong) JSContext *jsContext;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
 
@end
 
@implementation ViewController
 
#pragma mark - Life Circle
 
- (void)viewDidLoad {
    [super viewDidLoad];
     
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
    [self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];
}
 
#pragma mark - UIWebViewDelegate
 
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"Toyun"] = self;
    self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
        context.exception = exceptionValue;
        NSLog(@"异常信息:%@", exceptionValue);
    };
}
 
#pragma mark - JSObjcDelegate
 
- (void)callCamera {
    NSLog(@"callCamera");
    // 获取到照片之后在回调js的方法picCallback把图片传出去
    JSValue *picCallback = self.jsContext[@"picCallback"];
    [picCallback callWithArguments:@[@"photos"]];
}
 
- (void)share:(NSString *)shareString {
    NSLog(@"share:%@", shareString);
    // 分享成功回调js的方法shareCallback
    JSValue *shareCallback = self.jsContext[@"shareCallback"];
    [shareCallback callWithArguments:nil];
}
 
@end

ViewController中的代码解释

自定义JSObjcDelegate协议,而且此协议必须遵守JSExport这个协议,自定义协议中的方法就是暴露给web页面的方法。在webView加载完毕的时候获取JavaScript运行的上下文环境,然后再注入桥梁对象名为Toyun,承载的对象为self即为此控制器,控制器遵守此自定义协议实现协议中对应的方法。在JavaStript调用完本地应用的方法做完相对应的事情之后,又回调了JavaStript中对应的方法,从而实现了web页面和本地应用之间的通讯。

JavaScriptCore使用注意

JavaStript调用本地方法是在子线程中执行的,这里要根据实际情况考虑线程之间的切换,而在回调JavaScript方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaStript方法的代码,我在实际运用中开始没注意,就被坑惨了啊。什么,说的太绕,看下面的代码解释:

//  假设此方法是在子线程中执行的,线程名sub-thread
- (void)callCamera {     
    // 这句假设要在主线程中执行,线程名main-thread
    NSLog(@"callCamera");
       
    // 下面这两句代码最好还是要在子线程sub-thread中执行啊
    JSValue *picCallback = self.jsContext[@"picCallback"];
    [picCallback callWithArguments:@[@"photos"]];
}

运行效果

运行效果如图3-1所示


图3-1 运行效果

拦截协议

拦截协议这个适合一些比较简单的一些情况,不需要引入什么框架,只需要web前端配合一下就好。但是在具体调用哪一个方法上,以及在传值的时候可能会有些不方便,而且调用完后无法在回调JavaScript的方法。

web前端

test.html中的代码(因识别问题,用方括号替换了代码中的尖括号)

[!DOCTYPE html]
[html]
[head]
    [meta charset="UTF-8"]
[/head]
[body]
    [div]
        [input type="button" value="CallCamera" onclick="callCamera()"]
    [/div]
     
[script]
    function callCamera() {
        window.location.href = 'toyun://callCamera';
    }
[/script]
[/body]
[/html]

test.html中的代码解释

这段代码相比上面的那段测试代码是很简单的,同样有一个按钮,名字为CallCamera点击之后调用自己的callCamera方法,window.location.href这里是改变主窗口的指向从而马上发出一个链接为Toyun://callCamera请求,而想要传给原生应用的参数也可已包含到此请求中,而在iOS方法中我们要拦截这个请求,根据请求内容去判断JavaStript想要做的事情,从而实现web页面和本地应用之间的交互。

iOS

iOS对应的代码

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    NSString *url = request.URL.absoluteString;
    if ([url rangeOfString:@"toyun://"].location != NSNotFound) { 
        // url的协议头是Toyun
        NSLog(@"callCamera");
        return NO;
    }
    return YES;
}

iOS对应的代码的解释

在webView的代理方法中去拦截自定义的协议Toyun://如果是此协议则据此判断JavaStript想要做的事情,调用原生应用的方法,这些都是提前约定好的,同时阻止此链接的跳转。

总结

随着手机硬件的配置越来越强大和HTML5的兴起,一个App完全可以由web页面来写。现在已经有部分应用这么干了,我是遇见过的,如古诗文网。尽管比较少但是web页面和本地应用的交互不论是iOS还是Android都是会有遇到的。iOS我还是比较推荐JavaScriptCore,这样三端可以相对统一起来,写的时候都比较简单。随着时间的推移iOS8推出的WKWebView会逐渐成为主流,这个的功能更强大。拦截协议也只能说用到比较简单的一些情况吧,复杂的情况处理相互之间参数的传递还是比较麻烦的,而且这个不能回调JavaScript的方法,确实喜欢拦截协议的同学可以研究WebViewJavaScriptBridge这个第三方库。对于Android本人也就是略知皮毛而已,就不班门弄斧了,对于一些Android开发者来说,可以看地第一段的test.html这个页面的写法完全是可以适配Android的。

参考

iOS与JS交互实战篇(ObjC版)
分享到:
评论

相关推荐

    iOS中使用JSPatch框架使Objective-C与JavaScript代码交互

    - 提供清晰的文档,解释JavaScript代码与Objective-C代码的交互逻辑。 - 在发布版本中,确保所有JSPatch脚本都经过严格测试。 总之,JSPatch是一个强大而灵活的工具,可以提升iOS开发的效率和响应速度。然而,它...

    IOS下 内嵌 HTML编辑器 Objective-C与JavaScript数据交互

    UIWebView是苹果提供的一个视图组件,它可以加载和渲染网页,同时提供了与JavaScript交互的能力。在`SimulateHTMLDemo`这个示例项目中,很可能就包含了一个使用UIWebView实现的HTML编辑器示例。 要将HTML编辑器内嵌...

    Objective-c-js-webView交互

    Objective-C与JavaScript在iOS开发中的交互是Web开发与原生应用结合的重要技术,尤其是在使用UIWebView展示网页内容时。本文将深入探讨如何实现Objective-C与JavaScript的双向通信,以实现丰富的功能集成和优化用户...

    iOS中js与objective-c的交互

    在iOS开发中,JavaScript与Objective-C的交互是一个常见的需求,特别是在构建混合应用或者利用Web技术增强原生应用功能时。本篇文章将详细讲解如何在iOS中实现JavaScript与Objective-C的双向通信,主要涉及Webview的...

    Objective-J 面向对象javascript

    虽然Objective-J并非JavaScript的标准部分,但它为那些习惯于Objective-C语法或Cappuccino框架的开发者提供了一种新的选择。在实际开发中,结合Cappuccino提供的各种组件和API,开发者可以构建出具有桌面级用户体验...

    Android代码-Objective-C与JavaScript交互在Android端的扩展

    WebViewJavascriptBridge for Android is Cross-platform WebViewJavascriptBridge for Android Extension,the JavaScript interface compatible with WebViewJavascriptBridge 。 Usage Add following to the ...

    [DEPRECATED] JavaScript bindings for Objective-C and C.zip

    JavaScript bindings for Objective-C and C是一种技术,它允许JavaScript与Objective-C和C语言进行交互,从而在Web应用中利用iOS和macOS平台的原生功能。虽然这个项目已被废弃,但理解其工作原理仍然有助于开发者更...

    Visual Studio 2015 编译 objective-c

    由于Objective-C通常与C++混合使用,可能需要在项目设置中指定编译器选项,以及将Objective-C编译器与Visual C++的链接器进行适配。 5. 编译和链接代码。使用Visual Studio的构建系统编译Objective-C代码,并链接...

    Objective-C 代码与Javascript 代码相互调用实例

    Objective-C作为iOS开发中较为传统的编程语言,在与网页的交互中常常需要调用JavaScript代码,同样JavaScript也可能需要调用Objective-C代码。这种相互调用技术在提供更为丰富的用户体验和功能实现方面发挥着重要...

    JavaScript与Objective-c互相调用

    首先,我们要理解JavaScript与Objective-C交互的基本原理。UIWebView不仅用于展示网页内容,还提供了JavaScriptCore框架,使得JavaScript可以与Objective-C对象进行通信。主要通过两种方式实现:`...

    iOS Javascript与Objective-C互操作

    本文将深入探讨如何在iOS中实现JavaScript与Objective-C的交互。 首先,iOS提供了WebKit框架,它包含了WKWebView组件,可以用来加载和执行JavaScript代码。这个组件不仅用于展示网页内容,还支持JavaScript与原生...

    这是适用于Mac的下一代VLC,也称为Lunettes_Objective-C_JavaScript_下载.zip

    "Objective-C"和"JavaScript"的提及表明这个项目可能结合了这两种编程语言,Objective-C用于构建Mac OS X的应用程序,而JavaScript则可能用于增强用户界面或者实现某些功能。 Objective-C是Apple的首选语言,用于...

    JSPatch bridge Objective-C

    这项技术的核心是通过Bridge,将JavaScript与Objective-C的世界连接起来,实现了动态更新功能,提高了开发效率并降低了维护成本。 **一、JSPatch的工作原理** JSPatch基于Google的V8 JavaScript引擎,它将...

    swift-JS-OC交互相互传递参数里面差不多都换成中文了

    `WKWebView`允许在Swift应用中内嵌网页内容,并提供了与JavaScript交互的能力。通过实现`WKScriptMessageHandler`协议,我们可以监听和响应JavaScript发送的消息。例如,当JavaScript调用`window.webkit.message...

    The Node.js ⇆ Objective-C bridge.zip

    1. **源代码**:可能包含Node.js的C++扩展或绑定,用于与Objective-C代码交互。这些代码可能包括`.cpp`或`.h`文件,实现了JavaScript调用Objective-C方法的接口。 2. **示例项目**:可能有一个或多个示例项目,展示...

    Objective-C.xmind.zip

    9. **Objective-C与Swift的交互**:了解如何在Swift项目中导入和使用Objective-C代码。 通过详细解读并实践这个XMind文件,开发者可以构建一个清晰的学习路径,从而深入理解Objective-C,并提升在Apple平台上的开发...

    The Objective-C 2.0 Programming Language

    Objective-C 2.0 是一种通用、面向对象的编程语言,它结合了C语言的基础特性和Smalltalk的对象模型及动态特性。Objective-C 2.0 由 Apple Inc. 开发并维护,广泛应用于开发 macOS 和 iOS 应用程序。 #### 二、...

    object-c 与 js 简单交互demo

    在iOS开发中,Objective-C(简称ObjC)与JavaScript(简称JS)的交互是一个常见的需求,特别是在混合式应用开发中。这个"object-c 与 js 简单交互demo"提供了一个基础示例,帮助开发者了解如何在原生Objective-C代码...

Global site tag (gtag.js) - Google Analytics