javascript与原生的交互小知识

IOS

你在你的iOS应用程序使用UIWebView和你想做一些JavaScript在Web视图之间的通信和Objective-C。你会怎么做？
在Objective-C运行JavaScript，你可以使用–stringbyevaluatingjavascriptfromstring：方法。运行Objective-C方法，这有点棘手，你需要实现uiwebviewdelegate和shouldstartloadwithrequest方法。
easyjswebview是一个库，允许你在Objective-C一样下载下来试试。我保证。这是很简单的工作！！！
你可以在这里找到样本项目。

证明的一些代码
所以基本上你需要的是创建一个类，像这样。
@interface MyJSInterface : NSObject

- (void) test;
- (void) testWithParam: (NSString*) param;
- (void) testWithTwoParam: (NSString*) param AndParam2: (NSString*) param2;

- (NSString*) testWithRet;

@end

然后将接口添加到你的UIWebView。

MyJSInterface* interface = [MyJSInterface new];
[self.myWebView addJavascriptInterfaces:interface WithName:@"MyJSTest"];
[interface release];

在JavaScript中，你可以通过简单的代码调用Objective-C方法。

MyJSTest.test();
MyJSTest.testWithParam("ha:ha");
MyJSTest.testWithTwoParamAndParam2("haha1", "haha2");

var str = MyJSTest.testWithRet();

就这么简单！！！easyjswebview会帮你注射。你甚至不需要使用异步方式写作得到返回值！！！
当然，有时我们可能需要使用异步方式代码。它也支持。你甚至可以从回调函数得到返回值。

- (void) testWithFuncParam: (EasyJSDataFunction*) param{
  NSLog(@"test with func");

    NSString* ret = [param executeWithParam:@"blabla:\"bla"];

    NSLog(@"Return value from callback: %@", ret);
}

然后在javascript中

MyJSTest.testWithFuncParam(function (data){
    alert(data); //data would be blabla:"bla
    return "some data";
});

相对来说在android中实现与js的交互就简单点。
Android：
1.用WebView来显示HTML代码
2.允许WebView执行JavaScript

 webView.getSettings().setJavaScriptEnabled(true);

3.获取到HTML文件，也可从网络中获取

webView.loadUrl("file:///android_asset/index.html");   //HTML文件存放在assets文件夹中

4.添加一个对象, 让JS可以访问该对象的方法, 该对象中也可以调用JS中的方法

webView.addJavascriptInterface(new Contact(), "contact");

---

以上是 移动端跟html页面交互的一个做法；那么在前端这方面需要做些什么呢？

1.统一定义好“接口名”（例如：Js_Interactive），在html中调用原生方法的方式：
window.Js_Interactive.method();
*在前期移动端未能配合测试的时候，可以自己定义一个Js_Interactive对象来测试交互效果有没有问题。

2.定义方法名
-定义原生调用js的函数名，这里只要命名符合规范，方便日后维护即可
-定义js调用原生方面名，即移动端提供给js调用的方法时，分为两种情况
—–1.无参数的方法，只要符合命名规范即可（例：test（））；
—–2.带参数的方法，在这里的方法命名就要先按照功能定义一个方法名，然后给到给到ios那边，接着“方法名+ios定义的形参”给到android 为方法名。
例如：

jump_PrimaryView(Id,Type);  //前端定义   

- (void) jump_PrimaryViewWithId: (NSString*) id  WithType: (NSString*) Type;
/*这是ios定义的有参方法*/

因此在html中调用ios中的jump_PrimaryView(Id,Type)方法就变成了需要这样调用

window.Js_Interactive.jump_PrimaryViewWithIdWithType(Id,Type);

由于java定义方法在时方法名不会因为有无参数发生改变，且为了在html中调用原生方法时减少代码，所以给到android的方法名为

Js_Interactive.jump_PrimaryViewWithIdWithType(Id,Type)

以上做法后再html中调用原生代码的代码为：

window.Js_Interactive.jump_PrimaryView(Id,Type);

如果给统一的方法名：jump_PrimaryView(Id,Type)给到android 和 ios
在html中需要这样调用

try
{
    window.Js_Interactive.jump_PrimaryView(Id,Type);
}
catch(e)
{
    window.Js_Interactive.jump_PrimaryViewWithIdWithType(Id,Type);
}

过程可能遇到的问题
1.如果在html页面确定没问题，且移动端代码页没问题的情况下，考虑是是否因为缓存原因，尝试着在测试地址后面加“？id=随机数”;
2.如果js传参时候有传“数字”的话，要说明的是在javascript中只有number类型，没有分int float double这些类型的，这点移动端要注意。