h5页面与原生app页面交互

两端交互安卓：https://github.com/lzyzsd/JsBridge

IOS：https://github.com/marcuswestin/WebViewJavascriptBridge

两者一起用的话会起冲突，需要判断一下是什么终端，然后分别调用，

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

以下为安卓和ios调用原生app端开通vip的页面，‘AndroisVipFun’，‘IosisVipFun’这两个为安卓和ios定义的函数名称供web端页面调用，（这里是不需要传递参数的）

 ...}else if(isAndroid){
            window.WebViewJavascriptBridge.callHandler('AndroisVipFun');
        }else if(isiOS){
          // alert('IOS不是VIP,跳去VIP页面')
          this.setupWebViewJavascriptBridge(function(bridge) {
            bridge.callHandler('IosisVipFun',function(){
            })
          })
        }

如需要传递参数则可以把参数像下面定义好，（传递的格式双方定义好即可）,参数根在函数名后面，后面也可以在跟一个回调函数

    var params =  {"orderCount": this.seleCardNum,"orderPrice":this.cardPrice,"orderAddress":this.detailAddress}　　...　　...

  window.WebViewJavascriptBridge.callHandler('AndroisVipFun',params);

app端调用web页面函数操作

以下为ios必须要加入的一段代码，上面调原生方法时有用到。

  setupWebViewJavascriptBridge:function(callback) {
      // ios处理
      if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }

安卓的则需要加入如下代码：

  connectWebViewJavascriptBridge:function(callback) {
      //web调提供方法给app调用
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady'
                , function() {
                    callback(WebViewJavascriptBridge)
                },
                false
            );
        }
    },

当app原生端需要给我反回数据时则需要用到上面两段代码，web端定义函数供原生app端调用

下面为安卓调用，web定义了一个funParam函数名，告诉原生app凋，同时data接收传过来的参数去获取相应的数据

  if(isAndroid){
        this.connectWebViewJavascriptBridge(function(bridge) {
          //web定义一个funParam方法让app调用data接收app传过来的参数（uid token）
            bridge.registerHandler("funParam", function(data) {
                var arrData=[]
                arrData=data.split(',');
                _this.uid=arrData[1]
                _this.token=arrData[0]
                Vue.http.options.emulateJSON = true
                _this.$http.post(rootPathssb,ProductBasePara).then((res) => {
                  res = res.body
                  _this.isDredge=res.body.isDredge
                })
            });
        })
      }

ios则如下：接到到的参数处理方法相同，可以单拿出来写个通用函数。

else{
        this.setupWebViewJavascriptBridge(function(bridge) {
          bridge.registerHandler("funParamIos", function(data) {
            var arrData=[]
             arrData=data.split(',');
             _this.uid=arrData[0]
             _this.token=arrData[1]
           
              Vue.http.options.emulateJSON = true
              _this.$http.post(rootPathssb,ProductBasePara).then((res) => {
                res = res.body
                _this.isDredge=res.body.isDredge
              })
          });
        })
      }

来源：https://www.cnblogs.com/fxk327/p/7150803.html

标签

h5页面

android

app

callback