原生H5如何与Android和IOS通信


交互方式

Android: window.WebViewJavascriptBridge || window.android

IOS: window.webkit.messageHandlers

VUE 实战

1 . 判断设备

export const getAppCode = () => {
  let ua = navigator.userAgent.toLowerCase()
  if (ua.indexOf('_android') > -1) {
    return 'android'
  } else if (ua.indexOf('_ios') > -1) {
    return 'ios'
  } else {
    return ''
  }
}

2 . 封装通信的方法

// 引入判断设备方法
import {getAppCode} from '../common/js/dom'

// 公共调用方法
function implement (methodName, params) {
  if (getAppCode() === 'ios') {
    // 苹果手机
    window.webkit.messageHandlers[methodName].postMessage(params)
  } else if (getAppCode() === 'android') {
    // 安卓手机
    window.android[methodName](params)
  } else {
    return false
  }
}

// VUE中Method写入与Android和Ios的通信方法
export default {
  // 见名知意,方法名设置为Android和Ios定义好的
  methods: {
    // 在线客服
    callPhoneNum (phone) {
      implement('callPhoneNum', phone)
    },
    // 进入详情
    openNewWindow (data) {
      implement('openNewWindow', data)
    },
 }
}

3 . 通过VUE的混入引入方法, 直接调用

// 在Vue功能页面引入第二步封装的混入方法
import app from '@/mixins/app'
export default {
  name: 'seckillList',
  mixins: [app],
  props: {
    shopList: { tyep: Array }
  },
  methods: {
    // 点击按钮跳转到详情
    goToDetial (item) {
      const url = `${window.location.origin}/app-duiyu/goodsDetail?sno=${item.goodsSno}`
      // 调用原生通信方法
      this.openNewWindow(url)
    },
  }
}

声明:Jensonhui's blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 原生H5如何与Android和IOS通信


Just do it.