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 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
图解javascript作用域链
May 27 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
小程序实现搜索框
Jun 19 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 Javascript
js验证账户名是否重复
May 26 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
PHP 类型转换函数intval
2009/06/20 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
浅析Python数据处理
2018/05/02 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
学习十八大演讲稿
2014/09/15 职场文书
护理自荐信
2019/05/14 职场文书