• vue实现与安卓、IOS交互


    方案背景

    • 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上挂载新的函数,调用次数过多可能会出问题,所以目前是避免同时请求同一方法来解决的。如果有需求避免不了,那还是要用随机数解决。

    来源:https://segmentfault.com/a/1190000016879200

  • 相关阅读:
    9.过滤器的使用
    8.公共组件
    7.Props向子组件传递数据
    6.组件
    5.指令系统-事件
    4.指令系统
    SpringCloud入门
    springcloud注解
    was unable to refresh its cache! status = Cannot execute request on any known server
    集成第三方框架,报错NoSuchFieldError:logger
  • 原文地址:https://www.cnblogs.com/lovellll/p/10126110.html
Copyright © 2020-2023  润新知