h5和app交互

一、h5調用app的方法或者傳值

// Android：
window.Android.方法名(參數)
// ios
window.webkit.messageHandlers.方法名.postMessage(參數)

二、app處理完後回調（向h5傳值）

// 自定義一個事件，供app調用
window.供app調用的方法名 = function (data) {
    let event = new CustomEvent('自定義的事假名', {
      'detail': {
        data: data // app傳遞過來的值
      }
    })
    let dom = document.querySelector('掛載自定義事件的元素id')
    dom.dispatchEvent(event)
  }

三、例子（這裏是h5調用app的掃碼功能，將掃碼結果回傳，基於vue開發）

// html
<img class="icon-code" src="../../assets/icon-code.png" alt="" id="sweepBtn" @click.stop="sweepCode" @SweepData="sweep($event)">

// js

// 調取原生掃碼接口
 sweepCode () {
      this.$store.state.isAndroid ? window.Android.sweepToApp('start') : window.webkit.messageHandlers.sweepToApp.postMessage('start')
 }
    
// app處理結果回調
sweep (e) {
   console.log(e.detail.data) // app傳遞結果
},

// 供app調用傳值的全局方法（注意須要掛載到window app才調用獲得）
window.SweepData = function (data) {
    let event = new CustomEvent('SweepData', {
      'detail': {
        data: data
      }
    })
    let dom = document.querySelector('#sweepBtn')
    dom.dispatchEvent(event)
}

以上爲本身的使用記錄，有更好的方法或者我有不對的地方，歡迎指正