H5与Android和ios原生交互

   日期:2020-09-08     浏览:106    评论:0    
核心提示:判断是Android还是iosisIos() { // 判断是否是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壳中方法全部放在w

判断是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中获取方法。


webkit.messageHandlers.funcName.postMessage(null)


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;
  ...
}

funcitonName = (args) => {
  ... // something
}
 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服