h5和app交互

34次阅读

共计 907 个字符,预计需要花费 3 分钟才能阅读完成。

1、h5 调用 app 的方法或者传值

// Android:window.Android. 方法名 (参数)
// ios
window.webkit.messageHandlers. 方法名.postMessage(参数)

2、app 处理完后回调(向 h5 传值)

// 自定义一个事件,供 app 调用
window. 供 app 调用的方法名 = function (data) {
    let event = new CustomEvent('自定义的事假名', {
      'detail': {data: data // app 传递过来的值}
    })
    let dom = document.querySelector('挂载自定义事件的元素 id')
    dom.dispatchEvent(event)
  }

3、例子(这里是 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)
}

以上为自己的使用记录,有更好的方法或者我有不对的地方,欢迎指正

正文完
 0