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 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 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+MySQL修改记录的方法
2015/01/21 PHP
js加解密 脚本解密
2008/02/22 Javascript
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
微信小程序联网请求的轮播图
2017/07/07 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
django富文本编辑器的实现示例
2019/04/10 Python
python3实现猜数字游戏
2020/12/07 Python
利用Python检测URL状态
2019/07/31 Python
python的dict判断key是否存在的方法
2020/12/09 Python
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
高一历史教学反思
2014/01/13 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
开学典礼校长致辞
2015/07/29 职场文书
关于Javascript闭包与应用的详解
2021/04/22 Javascript
详解Python生成器和基于生成器的协程
2021/06/03 Python
Python 语言实现六大查找算法
2021/06/30 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python