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的无刷新分页技术
Jun 11 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
react-navigation之动态修改title的内容
Sep 26 Javascript
node上的redis调用优化示例详解
Oct 30 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
mysql 字段类型说明
2007/04/27 PHP
使用Sphinx对索引进行搜索
2013/06/25 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
AngularJS实现与后台服务器进行交互的示例讲解
2018/08/13 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python常见数据结构详解
2014/07/24 Python
python自定义类并使用的方法
2015/05/07 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Django+zTree构建组织架构树的方法
2019/08/21 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
经贸日语专业个人求职信范文
2013/12/28 职场文书
我的长生果教学反思
2014/04/28 职场文书
上班离岗检讨书
2014/09/10 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
一年级小学生评语大全
2014/12/25 职场文书
感谢信怎么写
2015/01/21 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python