H5与iOS/Android的通信方式

 

 

引入JsBridge（安卓）或WebViewJavascriptBridge（iOS）库的方案

function setupWebViewJavascriptBridge(callback) {
  //Andriod使用
  if (window.WebViewJavascriptBridge) {
       callback(WebViewJavascriptBridge)
  } else {
       document.addEventListener(
           'WebViewJavascriptBridgeReady'
           , function() {
               callback(WebViewJavascriptBridge)
           },
           false
       );
  }
  // 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)
}

setupWebViewJavascriptBridge(function(bridge) {
  //web定义一个funParam方法让app调用data接收app传过来的参数（uid token）
    bridge.callHandler("handleShare", {
       title:title,
       subtitle:'',
       desc:desc,
       link:link,
       imgUrl:imgUrl
    },function(data) {
       alert('分享成功')
        
    });
})

 

不引入JsBridge（安卓）或WebViewJavascriptBridge（iOS）库的方案

function createIframeCall(url) {
  setTimeout(function() {
    var iframe = document.createElement('iframe');
    iframe.style.width = '1px';
    iframe.style.height = '1px';
    iframe.style.display = 'none';
    iframe.src = url;
    document.body.appendChild(iframe);
    setTimeout(function() {
        document.body.removeChild(iframe);
    }, 100);
  }, 0);
}

createIframeCall('jsbridge://handleShare?title='+title+'&url='+link+'&desc='+desc+'&img='+imgUrl+'');

 封装

JsBridge = {
    doCall: function(functionName, data, callback) {
        var _this = this;
        // 解决连续调用问题
        if (this.lastCallTime && (Date.now() - this.lastCallTime) < 100) {
            setTimeout(function() {
                _this.doCall(functionName, data, callback);
            }, 100);
            return;
        }
        this.lastCallTime = Date.now();
    
        data = data || {};
        if (callback) {
            $.extend(data, { callback: callback });
        }
    
        if (UA.isIOS()) {
            $.each(data, function(key, value) {
                if ($.isPlainObject(value) || $.isArray(value)) {
                    data[key] = JSON.stringify(value);
                }
            });
            var url = Args.addParameter('youzanjs://' + functionName, data);
            var iframe = document.createElement('iframe');
            iframe.style.width = '1px';
            iframe.style.height = '1px';
            iframe.style.display = 'none';
            iframe.src = url;
            document.body.appendChild(iframe);
            setTimeout(function() {
                iframe.remove();
            }, 100);
        } else if (UA.isAndroid()) {
            window.androidJS && window.androidJS[functionName] && window.androidJS[functionName](JSON.stringify(data));
        } else {
            console.error('未获取platform信息，调取api失败');
        }
    }
}
JsBridge.doCall("handleShare", {
       title:title,
       subtitle:'',
       desc:desc,
       link:link,
       imgUrl:imgUrl
},function(data) {
   alert('分享成功')
    
});