JS调用Android、Ios原生控件

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

首先我们先看一下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用户的使用体验，并且处理函数不会影响到方法的调用。

好了到这里就和大家聊完了，当然如果所述与您的理解有偏差，还望指点一二。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# JS # 调用 # 控件 # 三步搞定:Vue.js调用Android原生操作 # DCloud的native.js调用系统分享实例Android版代码 # Android中实现WebView和JavaScript的互相调用详解 # Android WebView的使用方法及与JS 相互调用 # Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】 # Android总结之WebView与Javascript交互（互相调用） # Android与JS之间跨平台异步调用实例详解 # Android webview和js互相调用实现方法 # Android WebView使用方法详解附js交互调用方法 # Android与JS相互调用的方法 # 看一下 # 我们可以 # 的是 # 您的 # 好了 # 则是 # 看完 # 我所 # 认识到 # 影响到 # 你一定 # 我们一起 # 不带 # 在上 # 所述 # 聊了 # 先看 # 还望 # 中你 # 第二点

返回目录在线咨询

上一篇：如何优化 Laravel 中的文件上传性能以避免视频上传过慢
下一篇：C++如何使用条件变量（condition_variable）？（线程同步）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS调用Android、Ios原生控件

您的项目需求