欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS调用Android、Ios原生控件

程序员文章站 2023-12-04 13:14:40
在上一篇博客(详解js与app原生控件交互)中已经和大家聊了,关于js与android、ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下js调用android、...

在上一篇博客(详解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用户的使用体验,并且处理函数不会影响到方法的调用。

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

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