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控制上传文件的大小
Oct 26 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JS实现浏览上传文件的代码
Aug 23 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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中,文件上传
2006/12/06 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
js字符编码函数区别分析
2011/12/28 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
js面向对象的写法
2016/02/19 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
python实现视频读取和转化图片
2019/12/10 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
毕业生就业自荐书
2013/12/15 职场文书
机械制造专业毕业生求职信
2014/03/02 职场文书
一年级学生评语大全
2014/04/21 职场文书
反腐倡廉标语
2014/06/24 职场文书
捐款活动总结
2014/08/27 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL