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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
js倒计时简单实现代码
Aug 11 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
Vue 请求传公共参数的操作
Jul 31 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
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
深入剖析JavaScript中的函数currying柯里化
2016/04/29 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
Element input树型下拉框的实现代码
2018/12/21 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
使用Python操作excel文件的实例代码
2017/10/15 Python
梅尔倒谱系数(MFCC)实现
2019/06/19 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
个人简历的自荐信
2013/10/23 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
学前班评语大全
2014/05/04 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
创业计划书之便利店
2019/09/05 职场文书