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实现简单易懂的图片展示小例子
Nov 21 Javascript
js简单实现交换Li的值
May 22 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
解决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/10/09 PHP
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python操作gmail实例
2015/01/14 Python
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
Python线程指南详细介绍
2017/01/05 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python中的常量和变量代码详解
2018/07/25 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Strawberrynet草莓网新加坡站:护肤、彩妆、香水及美发产品
2018/08/31 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
联想C++笔试题
2012/06/13 面试题
中科方德软件测试面试题
2016/04/21 面试题
运动会广播稿60字
2014/01/15 职场文书
高中生职业规划范文
2014/03/09 职场文书
保护环境的标语
2014/06/09 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
乱丢垃圾袋检讨书
2014/10/08 职场文书
党的群众路线调研报告
2014/11/03 职场文书
工地食品安全责任书
2015/05/09 职场文书
学习委员竞选稿
2015/11/20 职场文书
反邪教教育心得体会
2016/01/15 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript