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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
May 17 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
vue实现简单跑马灯效果
May 25 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
实现AJAX异步调用和局部刷新的基本步骤
Mar 17 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
jquery插件开发方法(初学者)
2012/02/03 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
AngularJS实现注册表单验证功能
2017/10/16 Javascript
js实现简易计算器功能
2019/10/18 Javascript
Typescript3.9 常用新特性一览(推荐)
2020/05/14 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
13个最常用的Python深度学习库介绍
2017/10/28 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python 一句话生成字母表的方法
2019/01/02 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
什么是Rollback Segment
2013/04/22 面试题
学校学雷锋活动总结
2014/06/26 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
《落花生》教学反思
2016/02/16 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
Redis性能监控的实现
2021/07/09 Redis