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 相关文章推荐
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
javascript中layim之查找好友查找群组
Feb 06 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 split()函数的用法详解
2013/06/05 PHP
php通过字符串调用函数示例
2014/03/02 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php微信开发自定义菜单
2016/08/27 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
jquery实现网页查找功能示例分享
2014/02/12 Javascript
javascript + jquery实现定时修改文章标题
2014/03/19 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
Python中分数的相关使用教程
2015/03/30 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python的debug实用工具 pdb详解
2019/07/12 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
使用Django搭建web服务器的例子(最最正确的方式)
2019/08/29 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
物流仓管员岗位职责
2013/12/04 职场文书
文明学生标兵事迹
2014/01/21 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
食品安全演讲稿
2014/09/01 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年医院个人工作总结
2014/12/09 职场文书