最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue实现与安卓、IOS交互的方法

来源:懂视网 责编:小采 时间:2020-11-27 22:05:28
文档

vue实现与安卓、IOS交互的方法

vue实现与安卓、IOS交互的方法:方案背景 IOS用的是jsBridge插件实现调用、传参、回调的 安卓是在window挂载方法和挂载回调的 IOS实现方案 调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascrip
推荐度:
导读vue实现与安卓、IOS交互的方法:方案背景 IOS用的是jsBridge插件实现调用、传参、回调的 安卓是在window挂载方法和挂载回调的 IOS实现方案 调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascrip

方案背景

  • IOS用的是jsBridge插件实现调用、传参、回调的
  • 安卓是在window挂载方法和挂载回调的
  • IOS实现方案

    调用原生方法封装如下

    function setupWebViewJavascriptBridge (callback) {
     if (window.WebViewJavascriptBridge) {
     return callback(window.WebViewJavascriptBridge)
     }
     if (window.WVJBCallbacks) {
     return window.WVJBCallbacks.push(callback)
     }
     window.WVJBCallbacks = [callback]
     let WVJBIframe = document.createElement('iframe')
     WVJBIframe.style.display = 'none'
     WVJBIframe.src = 'https://__bridge_loaded__'
     document.documentElement.appendChild(WVJBIframe)
     setTimeout(() => {
     document.documentElement.removeChild(WVJBIframe)
     }, 0)
    }
    function callhandler (name, data, callback) {
     setupWebViewJavascriptBridge(function (bridge) {
     bridge.callHandler(name, data, callback)
     })
    }
    

    实际调用如下

    callhandler(functionName: string, params: object, res => {})

    注册方法给原生

    registerhandler (name, callback) {
     // 安卓
     window[name] = res => {
     let data = JSON.parse(res)
     callback(data)
     }
     // IOS
     setupWebViewJavascriptBridge(function (bridge) {
     bridge.registerHandler(name, function (data, responseCallback) {
     callback(data, responseCallback)
     })
     })
    }
    

    安卓实现方案

    调用原生方法

    window.HTTP_TEST.functionName()

    定义回调方法/注册方法给原生

    window['functionName'] = res => {}

    特殊说明

    1. 安卓在交互中的参数传递只能支持string类型,对象参数要转成string传递
    2. 因为安卓的回调方法名是固定的,同一方法同时请求两次以上时,有可能只得到一次回调。如果用随机数处理就会不断地在window上挂载新的函数,调用次数过多可能会出问题,所以目前是避免同时请求同一方法来解决的。如果有需求避免不了,那还是要用随机数解决。

    文档

    vue实现与安卓、IOS交互的方法

    vue实现与安卓、IOS交互的方法:方案背景 IOS用的是jsBridge插件实现调用、传参、回调的 安卓是在window挂载方法和挂载回调的 IOS实现方案 调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascrip
    推荐度:
    标签: 方法 VUE 安卓
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top