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 相关文章推荐
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
利用cookie记住背景颜色示例代码
Nov 04 Javascript
jquery实现清新实用的网页菜单效果
Aug 28 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
Jun 04 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
留言板翻页的实现详解
2006/10/09 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
CL vs ForZe BO5 第五场 2.13
2021/03/10 DOTA
用cssText批量修改样式
2009/08/29 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
2011/05/28 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
k8s node节点重新加入master集群的实现
2021/02/22 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python中的日期时间处理详解
2016/11/17 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
上课迟到检讨书
2014/02/19 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
师范生自荐信模板
2014/05/28 职场文书
新农村建设汇报材料
2014/08/15 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python