交互方式

Android:

    1) window.WebViewJavascriptBridge[methodName](params)
    2) window.android.methodName

IOS:

1) window.webkit.messageHandlers[methodName].postMessage(params) // 无法获取原生返回值
2) window.prompt(message, default) // 可以获取到返回值

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)

    window.prompt(JSON.stringify({type: 'JSbridge', functionName: methodName, arguments: 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)
    },
  }
}
文章目录