vue实现与安卓、IOS交互的方法


Posted in Javascript onNovember 02, 2018

方案背景

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
起点页面传值js,有空研究学习下
Jan 25 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
微信小程序中input标签详解及简单实例
May 18 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
JavaScript数组排序小程序实现解析
Jan 13 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 #Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 #Javascript
微信小程序实现留言板(Storage)
Nov 02 #Javascript
微信小程序实现留言板功能
Nov 02 #Javascript
小程序实现留言板
Nov 02 #Javascript
js中的闭包实例展示
Nov 01 #Javascript
微信小程序实现登录遮罩效果
Nov 01 #Javascript
You might like
PHPMailer 中文使用说明小结
2010/01/22 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
php curl常用的5个经典例子
2017/01/20 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
Javascript 中的 && 和 || 使用小结
2010/04/25 Javascript
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript中的replace()方法使用详解
2015/06/06 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
js实现抽奖的两种方法
2020/03/19 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
python 魔法函数实例及解析
2019/09/25 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
运动会邀请函范文
2014/01/31 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
日化店促销方案
2014/03/26 职场文书
小学五年级学生评语
2014/04/22 职场文书
购房意向书
2014/08/30 职场文书
县委务虚会发言材料
2014/10/20 职场文书
JavaScript实现淘宝商品图切换效果
2021/04/29 Javascript