发 帖  
原厂入驻New
[问答]

H5和安卓原生进行交互的操作雷点有哪些?

104 安卓
分享
H5和安卓原生进行交互的操作流程记录
0
2020-11-9 07:52:57   评论 分享淘帖 邀请回答
3个回答
  1、首先,百度H5和安卓原生交互的方式很多,但是我觉得百度的都没讲清楚或者是我太小白没看懂,以及里面涉及一些安卓或java所以我不太看得懂
  2、如果安卓比较厉害的话,大概安卓也会告诉你他用了什么库,或者什么方法,然后前端按那一套对应的东西来就可以了,特别要注意安卓使用的库不同的话,可能我以下的方法就会失效
  3、前端框架是vue
  1、vue引入jsbridge.js
  2、在原型上绑定
  3、调用时使用 this.$bridge进行调用
2020-11-9 11:38:26 评论

举报

  let isAndroid = navigator.userAgent.indexOf(‘Android’) 》 -1 || navigator.userAgent.indexOf(‘Adr’) 》 -1;
  let isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  //这是必须要写的,用来创建一些设置
  function setupWebViewJavascriptBridge(callback) {
  //Android使用
  if (isAndroid) {
  if (window.WebViewJavascriptBridge) {
  callback(window.WebViewJavascriptBridge);
  } else {
  document.addEventListener(
  ‘WebViewJavascriptBridgeReady’,
  () =》 {
  callback(window.WebViewJavascriptBridge);
  },
  false
  );
  }
  console.log(‘tag’, ‘安卓’);
  sessionStorage.phoneType = ‘android’;
  }
  //iOS使用
  if (isiOS) {
  if (window.WebViewJavascriptBridge) {
  return callback(window.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(() =》 {
  document.documentElement.removeChild(WVJBIframe);
  }, 0);
  console.log(‘tag’, ‘ios’);
  sessionStorage.phoneType = ‘ios’;
  }
  }
  //注册回调函数,第一次连接时调用 初始化函数(android需要初始化,ios不用)
  setupWebViewJavascriptBridge((bridge) =》 {
  if (isAndroid) {
  //初始化
  bridge.init((message, responseCallback) =》 {
  var data = {
  ‘Javascript Responds’: ‘Wee!’
  };
  responseCallback(data);
  });
  }
  });
  export default {
  // js调APP方法 (参数分别为:app提供的方法名 传给app的数据 回调)
  callHandler(name, data, callback) {
  setupWebViewJavascriptBridge((bridge) =》 {
  bridge.callHandler(name, data, callback);
  });
  },
  // APP调js方法 (参数分别为:js提供的方法名 回调)
  registerHandler(name, callback) {
  setupWebViewJavascriptBridge((bridge) =》 {
  bridge.registerHandler(name, (data, responseCallback) =》 {
  callback(data, responseCallback);
  });
  });
  }
  };
2020-11-9 11:38:41 评论

举报

  // app调h5和h5调用app我都是用的callhandler方法
  mounted() {
  // this.submit2()
  // this.getappData()
  let msg = ‘go’
  this.$bridge.callHandler(“getName”, msg, data =》 {
  alert(‘传出数据:’ + data)
  })
  },
2020-11-9 11:39:00 评论

举报

撰写答案

你正在撰写答案

如果你是对答案或其他答案精选点评或询问,请使用“评论”功能。

高级模式
您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
我要提问
关闭

站长推荐 上一条 /9 下一条

快速回复 返回顶部 返回列表