Js和ios交互遇坑分享

遇坑之ios调用js方法获取到的数据为null

业务中需要用到ios和js交互的需求，其中由于我是用react写的页面，其中ios需要调用我的方法如下：

 //js中调用IOS的方法
    getiOSWiFiInfoAction = (ioswifiinfo) =>{
        //ioswifiinfo是ios传给我数据的参数
        this.setState({
            IosWifidata:ioswifiinfo
        },()=>{
          //为了防止异步，自己页面的逻辑判断可以写到setState这里
      })
    }

然后在其他地方用this.getiOSWiFiInfoAction()调用，结果ios端接收到的数据竟然为 null！

后来查资料，解决思路如下：

1.react和vue写的方法要挂载在window全局变量上

2.react可以放在componentDidMount()中，vue放在mounted中，最好在渲染出真正的dom结构的时候调用。

修改后代码如下：

componentDidMount(){
try{
   window.webkit.messageHandlers.getiOSWiFiInfo.postMessage("我是js和ios交互的桥梁");
 }catch (e){
 }
window.getiOSWiFiInfoAction=this.getiOSWiFiInfoAction;  //绑定在window全局变量上，不加括号
}

其中getiOSWiFiInfo是js调取ios的方法，在ios代码中定义 getiOSWiFiInfoAction是ios调用前端的js，在js这边定义