JS调用Android、Ios原生控件_优就业

IT优就业 2017-01-06 13:57

在上一篇博客中已经和大家聊了，关于JS与Android、Ios原生控件之间相互通信的详细代码实现，今天我们一起聊一下JS调用Android、Ios通信的相同点和不同点，以便帮助我们在进行混合式开发时，提高代码质量，实现两者在网页端代码的统一。



Web前端：http://www.ujiuye.com/zt/webqianduan/
首先我们先看一下Ios调用JS的方法实现：

//无参调用function SwiftCallJs1(){}//有参调用function SwiftCallJs2(name, message){}

紧接着我们看一下Android调用JS的方法实现：

//无参调用function AndroidCallJs1(){}//有参调用function AndroidCallJs2(data){}

从上面的代码中你是否发现，Android与Ios调用JS时，JS处理函数两者在无参调用时是相通的。有参调用不同点是Ios是一对一直接传递，Android则是字符串传递，当然我们可以通过在Android和Ios端统一传参使用JSON格式，JS支持JSON解析，从而实现两个平台在有参方法调用上的统一。

看完上面的Ios与Android调用JS，下面我们看一下JS调用Android与Ios原生通信的异同点。

首先我们看一下JS调用Android的方法实现：

//无参调用

function callNull(){

android.CallNull();

}

//有参调用

function callMessage(){

android.CallMessage("msg");

}

//有参调用--json

function callJson(){

var json = "[{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}]";

android.CallJson(json);

}

接下来我们看一下JS调用Ios的方法实现：

//一：无前缀调用

//无参调用

function test1(){

Test1();

}

//有参调用

function test2(){

Test2("满艺网","www.manyiaby.com");

}

//二：有前缀调用

//无参调用--带返回操作结果处理

function callSystem(){

Ios.CallSystem();

}

//操作结果处理函数

function JSCallNullIosResult(){}

//有参调用

function callWithMsg(){

Ios.CallWithMsg("满艺网","www.manyiaby.com");

}

//有参调用--json

function callWithJson(){

var json = "{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}";

Ios.CallWithJson(json);

}

//有参调用--带返回结果处理

function callWithJsonResult(){

var json = "{\"name\":\"满艺网\",\"url\":\"www.manyiaby.com\"}";

Ios.CallWithJsonResult(json);

}

function JSCallJsonIosResult(data){

alert("name:"+data["name"]);

}

看到这里你一定发现了不同点，1、Android没有不带前缀的方法调用，2、Android没有方法调用后的操作结果返回处理逻辑。对于第一点，就目前我所认识到的是原生没有通过具体的实现逻辑，不过这个点不影响我们的开发，因为Ios是支持前缀方法调用的。对于第二点，我的理解是对于返回处理函数，我们可以在开发的添加上去，从而提高Ios用户的使用体验，并且处理函数不会影响到方法的调用。

更多Web前端知识尽在优就业IT培训：http://www.ujiuye.com

本文为头条号作者发布，不代表今日头条立场。