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面向对象之Javascript 继承
May 04 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
Apr 12 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 Javascript
js实现下一页页码效果
Mar 07 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
php给图片加文字水印
2015/07/31 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
Node.js实用代码段之正确拼接Buffer
2016/03/17 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
Python yield 使用方法浅析
2017/05/20 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python写一个md5解密器示例
2018/02/23 Python
python提取log文件内容并画出图表
2019/07/08 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
综治工作汇报材料
2014/10/27 职场文书
父母教会我观后感
2015/06/17 职场文书
2015最新民情日记范文
2015/06/26 职场文书
初中班长竞选稿
2015/11/20 职场文书
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android