美文网首页
h5与安卓,ios交互

h5与安卓,ios交互

作者: 焚心123 | 来源:发表于2022-03-15 15:10 被阅读0次
    调用ios方法并传值

    1、首先判断是不是ios手机

    export const isIos = () => {
        var u = navigator.userAgent;
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //安卓手机
            return false
        } else if (u.indexOf('iPhone') > -1) { //苹果手机
            return true
        } else if (u.indexOf('iPad') > -1) { //iPad
            return false
        } else if (u.indexOf('Windows Phone') > -1) { //winphone手机
            return false
        } else {
            return false
        }
    }
    

    2、将ios方法进行封装并在页面调用传值即可

    const action = {//ios规定的方法名
        1 : 'HKJSbridgeCashier' , //(收银台功能)
        2 : 'HKJSbridgeAdress', //(我的收货地址功能)
        3 : 'HKJSbridgeOrder', //(我的订单列表)
        4 : 'HKJSbridgeServicePhone', //(客服电话) 
    }
    // 调用后向app传递参数
    export const getUrl = (code,data) => {
        
        if (isIos()) {//HKJSbridge
            window.webkit.messageHandlers.HKJSbridge.postMessage({
                function: action[code],
                data
            });
          }else{
                  //这里是安卓的方法进行调用
           const msg = JSON.stringify({
                function: action[code],
                data
            })
            
             window.wv.HKJSbridge(msg);//wv是安卓方法的别名,这样就可以了
           }
    }
    
    ios调用h5的方法并给h5传递参数(如果是安卓的,将isIos()这个方法去掉就可以了,都可以使用这种进行传递参数)

    1、h5方法名


    image.png

    2、挂载到window上


    image.png
    3、这样就可以接收ios传递的参数了

    相关文章

      网友评论

          本文标题:h5与安卓,ios交互

          本文链接:https://www.haomeiwen.com/subject/ivrydrtx.html