H5调用Android和ios原生方法(react)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5调用Android和ios原生方法(react)相关的知识,希望对你有一定的参考价值。

参考技术A 混合开发中需要web需要和原生交互方式。

原生需要写方法来让H5调用,H5在window中获取方法。
ios壳中方法全部放在webkit.messageHandlers对象中,前端调用只需要

android中调用方法,直接在window中调用安卓给的对象

H5调用原生方法后,原生怎么回调给H5?
跟原生一样,H5需要写好方法,让原生调用,这里调用就是原生直接调用了H5的方法,当然这个方法是要全局的方法,在window对象中的。
在react中写原生调用的方法,需要在调用的组件中componentDidMount里面添加方法:

原生方法可能多个地方使用,每次都去判断系统,然后分别调用不同方法很麻烦,不是前端该有范儿。应该在一个文件中统一处理,其他页面只需要调用处理好的方法就好。
例如获取当前设备号,原生封装好方法后,统一在一个文件中处理:

这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号,才不管你是哪个系统呢。

JS调用AndroidIos原生控件

  在上一篇博客中已经和大家聊了,关于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用户的使用体验,并且处理函数不会影响到方法的调用。

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

以上是关于H5调用Android和ios原生方法(react)的主要内容,如果未能解决你的问题,请参考以下文章

Android 原生开发H5React-Native使用利弊和场景技术分享

Hybrid APP之Native和H5页面交互

VUE 与 原生交互(iOS为主)

js怎么跟Android和ios进行交互呢?

杂园日记-H5-IOS-Android混合开发

关于原生android与H5交互的方法