H5与Android和ios原生交互

红太狼 2022-12-04 09:16 219阅读 0赞

### 判断是Android还是ios ###

isIos() { 
      // 判断是否是Ios
      return /(iPhone|iPad|iPod|iOS|Mac|Mac)/i.test(navigator.userAgent)
    }
    isAndroid() { 
      // 判断是否是Android
      return /(Android)/i.test(navigator.userAgent)
    }

### H5调用原生方法的方式 ###

> 原生需要写方法来让H5调用，H5在window中获取方法。

/** * ios壳中方法全部放在webkit.messageHandlers对象中 * funcName 为原生方法名 * postMessage(null) 跨源传递数据，没有数据，一定要写null */
    webkit.messageHandlers.funcName.postMessage(null)
    
    /** * android 为原生对象名 * funcName 为android对象中的方法 */
    window.android.funcName ('')

### 封装H5调用原生方法的方式 ###

//不带参数的方法
    proceed(params) { 
        // 继续下载
        if (this.isIos()) { 
          window.webkit.messageHandlers.proceed.postMessage({ 
            params
          })
        } else if (this.isAndroid()) { 
          window.android.proceed(JSON.stringify(params))
        }
      }
    //带参数
    giveOrgId(params) { 
        // 传输数据
        if (this.isIos()) { 
          window.webkit.messageHandlers.giveOrgId.postMessage({ 
            params
          })
        } else if (this.isAndroid()) { 
          const {  orgId, orgName } = params
          window.android.giveOrgId(orgId, orgName)
        }
      }

### 原生调用H5的方法 ###

> H5把方法挂载到window给原生调用就可以了

componentDidMount() { 
      // funcitonName 是原生回调使用的方法名
      window.funcitonName = this.funcitonName;
      ...
    }
    /** * 原生调用后， H5做的事情... * 注意， 如果这里用了this， 那么一定要注意这里的this，可能不是你想要的this */
    funcitonName = (args) => { 
      ... // something
    }