整篇文章中提到的客户端就是指的（ios与android）

整个过程主要是两个方向

1.H5调用客户端的方法；

2.客户端调用H5的方法并且传递给h5方法所需要的参数；

H5调用客户端的方法代码如下（需要区分是ios还是android）

// 获取androidJs
export function getAndroidInfo() {
  window.AndroidWebView.reLogin()
}
// 获取iosJs
export function getIosInfo() {
  window.webkit.messageHandlers.reLogin.postMessage(null)
}

reLogin即使客户端方法，我在项目中的用途是（// h5页面部分，同一个账号在不同的终端登录，用户被顶下去的时候，h5调用客户端js,通知客户端）

import { getMachine } from '@/utils/machine'
import { getIosInfo, getAndroidInfo } from '@/interaction/chargeLogin'

// response 拦截器
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 0) {
      // h5页面部分，同一个账号在不同的终端登录，用户被顶下去的时候，h5调用客户端js,通知客户端
      var machineType = getMachine()
      // 103000对应请重新登录
      if (res.code === 103000) {
        // ios与android调用方法不同，所以要获得设备类型
        if (machineType === -1) {
          getIosInfo()
        } else {
          getAndroidInfo()
        }
      }
      Toast(res.msg)
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    Toast('网络错误')
    return Promise.reject(error)
  }

 

客户端调用H5的方法并且传递给h5方法所需要的参数代码如下：

首先是在created这个钩子函数里面与客户端约定调用的方法名称

 created() {
    window.getContractInfo = this.getContractInfo
  }

 // 客户端调用我这个js方法，传给h5两个参数token以及userID
    getContractInfo(info) {
      var machineType = this.$getMachine()
      if (machineType === -1) {
        var newinfo = JSON.parse(info)
      } else {
        newinfo = info
      }
      this.token = newinfo.token
      this.userId = newinfo.userId
      this.getNewsInfo(newinfo)
    },
    getNewsInfo(newinfo) {
      var data = {
        'appointmentId': newinfo.appointmentId,
        'contractItemId': newinfo.contractItemId
      }
      // 统一配置请求校验函数，只需要为此函数传递token、userID、以及请求参数(userOrderId、contractItemId)
      var auth = getSign(this.userId, this.token, data)
      getContractBoughtDetail(auth, data).then(res => {
        this.contractInfo = res.data
        var title = this.contractInfo.number
        title = (title.replace('《', '')).replace('》', '')
        document.title = title
      }).catch(error => {
        console.log(error)
      })
    }

// 封装统一的sign
import { getNowTimestamp, getValueStrSortByDictKey } from '@/utils/auth'
import md5 from 'js-md5'
export function getSign(userID, token, data) {
  var salt = 'sLcgbLfgL2pwUuWTX7ueLfY3d8ctJ9hw'
  // 设置时间戳请求头
  var timestamp = getNowTimestamp()
  var testToken = token
  var paramsStr = getValueStrSortByDictKey(data)
  var sign = md5(paramsStr.toString() + timestamp.toString() + salt.toString() + testToken.toString())
  var lastInfo = userID + ':' + sign
  var authInfo = {
    'signInfo': lastInfo,
    'timestamp': timestamp
  }
  return authInfo
}

整个过程如上代码所示