ios原生调用jsapi,ios原生app

本文目录一览：

• 1、如何用js调用ios
• 2、iOS – OC 与 JS 交互六种方式总结
• 3、原生APP中js怎样与Android和ios进行交互
• 4、如何用JS调用几十万原生API

如何用js调用ios

基本流程：

先看一下Web中，我们给h1标签添加一个onclick事件，让它在被点击之后，修改当前的url。

Web中的HTML代码：

html

head

script

function getInfo(name)

{

window.location = “/getInfo/”+name;

}

/script

/head

body

h1 onclick=”getInfo(‘why’)”Name/h1

/body

/html

iOS中，先拖拽WebView，访问localhost，然后通过WebView的委托事件监听url跳转操作，并且把跳转截取下来。

也就是说，在onclick的时候，普通浏览器灰跳转到那个url，但是在iOS的这个WebView里面，这个跳转会被拦截，

用这种方式可以巧妙地实现JS调用iOS的原生代码：

//

// DWViewController.m

// DareWayApp

//

// Created by why on 14-6-3.

// Copyright (c) 2014年 DareWay. All rights reserved.

//

#import “DWViewController.h”

@interface DWViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *myWebview; // 主页面

@end

@implementation DWViewController

– (void)viewDidLoad

{

[super viewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

// 适配iOS6的状态栏

if ([[[UIDevice currentDevice] systemVersion] floatValue] = 7) {

_myWebview.frame = CGRectMake(0,20,self.view.frame.size.width,self.view.frame.size.height-20);

}

// 加载制定的URL

NSURL *url =[NSURL URLWithString:@””];

NSURLRequest *request =[NSURLRequest requestWithURL:url];

[_myWebview setDelegate:self];

[_myWebview loadRequest:request];

}

// 网页中的每一个请求都会被触发

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

{

// 每次跳转时候判断URL

if([request.mainDocumentURL.relativePath isEqualToString:@”/getInfo/why”])

{

NSLog(@”why”);

return NO;

}

return YES;

}

– (void)didReceiveMemoryWarning

{

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

iOS – OC 与 JS 交互六种方式总结

在 APP 中，免不了与 H5页面打交道，所以掌握 与 JS 交互就显的至关重要，本文总结了常见的与 JS 交互方式。

注意事项

在 OC 原生中

在 html 文件中

早期的JS与原生交互的开源库很多都是用得这种方式来实现的，例如：PhoneGap、 WebViewJavascriptBridge 。

效果图

使用WKNavigationDelegate中的代理方法，拦截自定义的 URL 来实现 JS 调用 OC 方法。

注意点

关于如何区分执行不同的OC 方法，也与UIWebView的处理方式一样,通过URL 的host 来区分执行不同的方法：

JS 调用OC 方法后，有的操作可能需要将结果返回给JS。这时候就是OC 调用JS 方法的场景。

WKWebView 提供了一个新的方法 evaluateJavaScript:completionHandler: ，实现OC 调用JS 等场景。

注意点

运行结果

在iOS 7之后，apple添加了一个新的库JavaScriptCore，用来做JS交互，因此JS与原生OC交互也变得简单了许多。

首先导入JavaScriptCore库, 然后在OC中获取JS的上下文。

再然后定义好JS需要调用的方法，例如JS要调用share方法：

则可以在UIWebView加载url完成后，在其代理方法中添加要调用的share方法：

OC 调用 JS 方法有多种，首先介绍使用JavaScriptCore框架的方式。

使用JSContext 的方法 -evaluateScript ，可以实现 OC 调用 JS 方法

效果图

使用WKWebView的时候，如果想要实现JS调用OC方法，除了拦截URL之外，还有一种简单的方式。那就是利用WKWebView的新特性MessageHandler来实现JS调用原生方法。

创建 WKWebViewConfiguration 对象，配置各个API对应的MessageHandler。

然后在界面即将显示的时候添加MessageHandler

需要注意的是addScriptMessageHandler很容易引起循环引用，导致控制器无法被释放，所以需要移除MessageHandler

这里实现了两个协议 WKUIDelegate,WKScriptMessageHandler ， WKUIDelegate 是因为我在JS中弹出了alert 。 WKScriptMessageHandler 是因为我们要处理JS调用OC方法的请求。

WKScriptMessage 有两个关键属性 name 和 body 。

因为我们给每一个OC 方法取了一个name，那么我们就可以根据name 来区分执行不同的方法。body 中存着JS 要给OC 传的参数。

关于参数body 的解析，我就举一个body中放字典的例子，其他的稍后可以看demo。

解析JS 调用OC 实现分享的参数：

message.boby 就是JS 里传过来的参数。我们不同的方法先做一下容错性判断。然后正常取值就可以了。

下面只列举一个shareClick()方法，其他看Demo

这里使用WKWebView 实现OC 调用JS方法与之前说的文章一样，通过

– evaluateJavaScript:completionHandler:

效果图如下图所示

详情看下面文章链接

iOS下 JS 与 OC 互相调用(五) – UIWebView+WebViewJavascriptBridge

详情看下面文章链接

iOS下 JS 与 OC 互相调用(六) – WKWebView+WKWebViewJavascriptBridge

iOS下 JS 与OC 互相调用(一) – UIWebView 拦截 URL

iOS下 JS 与OC 互相调用(二) – JavaScriptCore

iOS 下 JS 与 OC 互相调用(三) – WKWebView 拦截 URL

iOS下JS与OC互相调用(四)-MessageHandler

iOS下 JS 与 OC 互相调用(五) – UIWebView+WebViewJavascriptBridge

iOS下 JS 与 OC 互相调用(六) – WKWebView+WKWebViewJavascriptBridge

原生APP中js怎样与Android和ios进行交互

一、对于Android和ios我们要执行不同的操作，下面是判断系统的js代码

// alert(ismobile(1)); 1表示Android，0表示ios

function ismobile(test){

var u = navigator.userAgent, app = navigator.appVersion;

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){

if(window.location.href.indexOf(“?mobile”)lt;0){

try{

if(/iPhone|mac|iPod|iPad/i.test(navigator.userAgent)){

return ‘0’;

}else{

return ‘1’;

}

}catch(e){}

}

}else if( u.indexOf(‘iPad’) gt; -1){

return ‘0’;

}else{

return ‘1’;

}

}

二、js调用app端函数，下面是js代码

if(ismobile(1)==1){

Android.setTypeActivity(id,type,href);

}else{

jsToios(id,type,href);

}

setTypeActivity是Android端定义的函数，jsToios是ios端定义的函数，括号里是js端传递的参数。

三、至于js端怎样获取app端的数据，只需在js端提供给app端函数名字，在通知app端调用即可

四、还有一种方法可以不通过app的方法将数据传递给另一个页面，那就是通过URL的方式

在本页面将数据拼接在ip后面

在另外一个页面通过下面方法获取URL后的参数

function GetRequest() {

var url = location.search; //获取url中”?”符后的字串

var theRequest = new Object();

if (url.indexOf(“?”) != -1) {

var str = url.substr(1);

strs = str.split(“”);

for(var i = 0; i strs.length; i ++) {

theRequest[strs[i].split(“=”)[0]]=decodeURIComponent(strs[i].split(“=”)[1]);

}

}

return theRequest;

}

// 获取URL参数

var Request = new Object();

Request = GetRequest();

var name;

name = Request[‘name’];

如何用JS调用几十万原生API

《近匠》HBuilder：如何用JS调用几十万原生API？

　近匠访谈开发工具HBuilder王安DCloudHTML5

摘要：《近匠》第25期：HBuilder是DCloud开发的一套Web开发IDE，它通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、JS、css的开发效率。更有意思的是，它可以利用JS调用原生API。

CSDN：请讲讲团队和您以往的从业经历？

DCloud CEO王安：我们团队从03年起开始做手机App，从J2me、Symbian、Win mobile、Brew一直做到现在的Android、iOS和WP。之前一直在为企业市场提供跨平台手机App的无线中间件。

后来我们看好HTML5的前途，而且也经不住toC市场的诱惑，就毅然出来二次创业。成立了 DCloud.io，开始做基于HTML5的生态系统服务，包括开发工具和云服务。

我们是W3C的会员，也是HTML5中国产业联盟的发起单位。我们是一个典型的轻团队，人不多，但极客化。我们的合伙人之一王淮也在Facebook工作了很久，给我们带来了很多硅谷的模式。

CSDN：为什么要做HBuilder这样一款工具？

王安：人称HTML5是“性、工、能”缺失，其中“工”指工具不给力，确实如此。

任何主流编程语言，都有优秀的开发IDE，不管是java、.net、Obj-C，但HTML5领域却一直在用低效的文本编辑器开发。我个人用了十几年文本编辑器，对比我熟悉的其他语言的IDE，效率也实在让我受不了。我们就动手开发了HBuilder。

HTML十几年前初生时，是简单的标记语言，确实文本编辑器足矣。那时候写页面的人都不被视为真正的程序员。但时代不同了，现在JS、css已经发展为真正的编程语言，一个工程会非常庞大，此时没有IDE会很低效。就像用文本编辑器写java或Obj-C一样，效率比专业IDE差很多。

过去也确实没有太好的HTML5 IDE，更不用提免费的好工具。因为web IDE开发确实很困难，web语法库没有统一标准，月月更新，JS是无类型的动态语言……

但是有问题，就会有解决问题的人。所以我们花费大力气，建立最全的语法库和浏览器兼容数据库，开发动态JS解析引擎，开源框架语法库。并且我们在开发效率提升上下了非常大的功夫，快是HBuilder最大的特点，能提升数倍开发效率。

另一方面，HTML5的重要价值是开发手机App，HBuilder为开发者提供移动App开发的全套支持，支持插上数据线真机联调，不需xcode等原生开发环境就能打包手机App。此外，我们有项创新的技术是JS调用几十万原生API。

CSDN：HBuilder是针对移动应用的哪一个环节？在这个环节中，现在是一种什么状况？格局是什么样的？

王安：使用HTML5、JS、css开发跨平台手机App，这类工具其实之前已经有Phonegap、Titanium。从品类相比，Phonegap只有Runtime没有IDE，Titanuim的IDE是为其特殊API而制作的专有工具。但HBuilder是一个通用的HTML5开发IDE且又内置了手机runtime。也就是开发者只需要HBuilder就够了，PC web、Mobile web、App，一个工具一套代码。

我们推崇一个理念叫“响应式应用”：一套代码根据不同运行环境调用不同能力来优化用户体验。比如文本框，在普通浏览器下就是一个文本输入框，在Chrome浏览器下运行时加个判断调Chrome的语音输入，而运行在App模式下，则再加一个判断调用原生的语音识别SDK，比如plus.speech。这样一个应用可以根据设备的不同而最大化的优化用户体验，这种模式很有魅力，对用户而言体验更好，对开发者而言成本更低。

当然，比其他同类产品更神奇的一点是，HBuilder里能通过JS代码的写法操作几十万原生API，即Obj-C和Android原生的对象。

CSDN：HTML5在跨平台App开发上有哪些问题？

王安：前景美好，但却有四个致命缺点阻碍它的爆发，就是“性、工、能”缺失，碎片化严重。相对于原生，HTML5的App性能低，工具差，能力弱。原生虽然不跨平台，但HTML5的浏览器兼容性也让开发者挠头。HBuilder为了解决这些难题做了很多努力。

1. 先说工具

HBuilder大幅提升了HTML5开发效率。并且也拥有最全且实时更新的HTML5新语法库。浏览器更新版本后一周内其新增的语法就可以被HBuilder提示出来。

HBuilder追求快，还有一个目的，就是降低开发者对框架的依赖。PC Web里框架非常流行，很多框架简化了开发。但是框架的简化开发建立在性能下降的基础上，手机上HTML5本来就慢，层层封装后只会越来越慢。但开发者使用HBuilder会发现，在HBuilder里不用框架开发的速度，比用其他开发编辑器配合框架的速度，更快。

目前主流HTML5开发工具都更新在没有手机真机联调等功能，HBuilder提供了这些功能才能有效的语法库里帮助开发者开发手机App。

2. 浏览器兼容性

由于浏览器内核不同，自有扩展语法多，新语法增加速度快，导致碎片化很严重，而且是持续性的给开发者造成困扰。HBuilder里每个语法，都有浏览器兼容性说明，是目前最全的浏览器兼容数据库。见下图，-webkit-user-select这个属性的值域all，IE和Firefox自然不支持，图标为灰色。但同为webkit内核，Chrome支持；而Android浏览器不支持，图标为灰色；Safari也只有7.0以上才支持，图标是半亮。

有人说手机上都是webkit内核浏览器，应该没有兼容性问题。但上图告诉开发者残酷的真相：iOS、Safari、Android浏览器、Chrome安卓版，主流的3款手机浏览器一样有兼容性问题。Google和Apple联手打破IE的垄断后，又开始分裂，Chrome去年另起了Blink引擎，开始独立扩展语法。另外虽然Safari的Mac版和iOS版有点差别，但不多；而Chrome的Android版和Android系统自带的浏览器完全是2个产品。作为开发者，我甚至有点怀念IE垄断市场的日子。

我们努力做出这个浏览器兼容库，希望可以帮助到广大开发者。

3. 能力

HTML5规范的好处是跨平台的，但坏处是规范能力比原生差非常多。为了解决这个问题，我们推出了两套方案：HTML5+的跨平台规范和JS直调原生API。

HTML5+的跨平台规范：开发者常用的手机能力，封装在HTMLplus.org规范里，包括二维码、语音输入等，比如在JS里输入plus.barcode调用二维码，plus.speech调用语音输入。开发一次在不同手机上都可以运行。

JS直调原生API：我们提供了plus.ios和plus.android这2个很神奇的对象，使得web开发者不用学习Obj-C，不用买Mac设备，就能在JS里调用原生对象。我们可以这么定义一个JS变量，但实际上是Obj-C对象：我们可以这么定义一个JS变量，但实际上是Obj-C对象：JS直调原生API：我们提供了plus.ios和plus.android这2个很神奇的对象，使得web开发者不用学习Obj-C，不用买Mac设备，就能在JS里调用原生对象。我们可以这么定义一个JS变量，但实际上是Obj-C对象：

var a = plus.ios.implements(“NSObject”,{“authenticationChanged:”:authenticationChanged});

或者如下图中的：var Intent = plus.android.import(“android.content.Intent”);其中的”android.content.Intent”是Android的原生类。这段代码就是使用JS方式给在安卓手机桌面创建一个App快捷方式。

这样，使用HTML5编程的App，在能力方面就和原生一样强大了。 以前用HTML5做的游戏都无法调用Game Center，O2O应用也调不了Passbook，现在这些都轻而易举。我们相信这对于web工程师而言，是极大的能力解放，充满机会的一扇新窗口！

4. 性能

HTML5应用的性能一直是这个产业发展的瓶颈。

手机硬件比PC差、HTML5作为解释性语言比原生的编译型语言性能差、手机浏览器的默认控件样式未优化导致需要在应用层重新封装UI。这一系列问题叠加在一起，使得性能成为所有HTML5开发者心头的痛。

另外前端工程师大多长于UI，相比服务器工程师，他们的代码性能也要低不少。比如前端工程师很习惯使用框架，框架层层封装越来越慢，性能如何上的去。HBuilder在解决这个问题上也花费了很多心血：

a. 调用原生绘制界面

在HTML5+规范里有一个plus.ui的子集。一些原生样式或动画，比如翻页动画或下拉刷新，使用HTML5+JS+css模拟要写很多代码，执行起来很慢，此时通过plus.ui扩展就可以在窗体上设置一块区域，交给原生绘制。性能可大幅提升。

b. 性能第一的UI库

以前宣称为手机优化的框架，其实都不是把性能作为产品取舍的第一优先，或者为了框架使用者方便、或者为了框架维护者方便而牺牲了执行性能。我们决定自己做一个。这个项目我们还在开发中，不久会上线。

我们没有把它称为框架而是叫UI库，是因为这里的控件都是使用最简单的css样式的，直接写　class=”xxx”。相比于写成data-role，然后在JS运行时才替换Dom，使用class的方式要高效的　多。

控件含有的必要的JS代码，也是本着性能优先的原则开发的，代码极其精简高效，没有$等三方框架，但又可以跨手机浏览器。并且这套UI库会和HBuilder的打包机、Runtime深度整合，做到更高性能的优化。

CSDN：相对于编写大量JS实现来说，HBuilder利用JS调用原生API，有哪些优点？

王安：JS调用原生API，最大的优点，是大大强化了HTML5的能力，突破了浏览器的限制，原生有几十万API，数量远多于HTML5。比如拦截Android来电。

JS的执行效率肯定还是低于原生的，提升性能需要使用前述方案。

这项技术对于JS程序员来讲是非常友好易学的，他不需要学习原生语言和配置开发环境，只需要查询每个原生对象是做什么用的，然后在JS的plus.ios或plus.andriod里把原生类名作为参数传进去，就可以通过JS调用该原生对象的方法。

我们还制作了一批常用原生代码模板，包括创建快捷方式、登录game center的样例代码已经预置在HBuilder里。

CSDN：JS调用原生API，是如何实现的？

王安：这个非常复杂，不同的api需要不同的方法，手机、云、IDE的共同配合。IDE的显示代码、打包机编译、runtime实际运行这几种情况下执行码是不同的。

CSDN：HTML5跨平台开发领域的趋势是怎么的？

王安：HTML5的光明前途是毋庸置疑的，当Java被拦在iOS门外时、当终端和屏幕越来越多样时，HTML5的简单易用和跨平台这些特点都代表了未来的方向。

现在的问题仅仅是阻碍HTML5发展的那几个难题，会在何时、会被哪些人解决。当性能、工具、能力、兼容性得到有效突破时，HTML5必将迎来发展爆发。

CSDN：接下来针对HBuilder，Dcloud还有哪些计划？

王安：除了上面提到的高性能手机UI框架，HBuilder下一步会引入SNS和UGC，强化插件体系，联合众多开发者打造大家更满意的工具和服务。我们很认真的开发着这个免费工具，也希望所有开发者都参与到这个工具的打造中来。目前HBuilder已经在 github.com/dcloudio上设立了3个开源项目，欢迎大家一起打造自己满意的工具。

转载仅供参考，版权属于原作者。祝你愉快，满意请采纳哦