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 相关文章推荐
JS+CSS 制作的超级简单的下拉菜单附图
Nov 22 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
详解Vue微信公众号开发踩坑全记录
Aug 21 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
php 函数中使用static的说明
2012/06/01 PHP
php字符串分割函数explode的实例代码
2013/02/07 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php计算整个目录大小的方法
2015/06/01 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
JavaScript Sort 表格排序
2009/10/31 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
js实现进度条的方法
2015/02/13 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
js实现下一页页码效果
2017/03/07 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
文明学生事迹材料
2014/01/29 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
经典祝酒词大全
2015/08/12 职场文书