vue实现与安卓、IOS交互的方法

方案背景

  • 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上挂载新的函数，调用次数过多可能会出问题，所以目前是避免同时请求同一方法来解决的。如果有需求避免不了，那还是要用随机数解决。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解基于Vue-cli搭建的项目如何和后台交互

    这段时间在折腾有vue做开发,之前也用过,但是大部分都是用一些简单的数据绑定.踏了很多坑,总结了一下,希望对刚刚开始折腾的小伙伴有帮助. 常见问题一:用vue-cli搭好环境以后,本地域名和测试环境的域名不一致,怎么跨域访问后台接口? 在config目录下找到index.js,在dev下添加如下: proxyTable: { '/api':{//指定以/api开头的接口都走代理 target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名 changeO

  • Android与Vue的交互的方法示例

    做过 Android 混合开发的,应该都知道 Android 中 Java 代码和 Javascript 代码之间的交互怎么做. 首先回顾一下 Java 和 Javascript 之间的交互. JavaScript 调用 Java Android 中 WebView 添加供 Html 页面调用的 Java 方法: mWebView.addJavascriptInterface(new DirectToJS(), "AndroidObj"); class DirectToJS{ @Jav

  • 详解vue+css3做交互特效的方法

    详解vue+css3做交互特效的方法

    1.前言 做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发特效,和javascript/jquery+css3的思维方式不一样,但是比javascript/jquery+css3简单一点点.今天就分享三个简单的小实例,希望能起到拓展思维的作用,让大家明白vue+css3应该怎样开发交互效果!如果大家有什么好的建议,或者觉得我哪里写错了,欢迎指出! 1.文章上面的代码,虽然代码很简单,不

  • vue之数据交互实例代码

    vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob/master/README.md <meta charset="UTF-8"> <title>Document</title> <script type=&q

  • vue.js $refs和$emit 父子组件交互的方法

    本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="

  • vuejs前后端数据交互之从后端请求数据的实例

    本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这

  • vuejs父子组件之间数据交互详解

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit自定义事件 export default { name: 'comment', props: ['issue','index'], data () { return { comment: '', } }, components: {}, methods: { removeComment: funct

  • 详解vue-Resource（与后端数据交互）

    单来说,vue-resource就像jQuery里的$.ajax,用来和后端交互数据的.可以放在created或者ready里面运行来获取或者更新数据... vue-resource文档:https://github.com/vuejs/vue-resource/blob/master/docs/http.md 结合vue-router data(){ return{ toplist:[], alllist:[] } }, //vue-router route:{ data({to}){ //并

  • Vue中的数据监听和数据交互案例解析

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[1,2,3] } }).$watch("arr",function () { alert("数据改变了") }) html代码: <div id="div"> <input type="button" value="改变" @click=&

  • vue实现与安卓、IOS交互的方法

    方案背景 IOS用的是jsBridge插件实现调用.传参.回调的 安卓是在window挂载方法和挂载回调的 IOS实现方案 调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJavascriptBridge) } if (window.WVJBCallbacks) { return win

  • vue如何判断安卓还是IOS

    目录 vue判断安卓还是IOS 最近工作上遇到这样一个需求 所以我们需要进行一个判断 H5端判断安卓跟ios显示不同的背景图 vue判断安卓还是IOS 最近工作上遇到这样一个需求 vue写的页面,需要同时跟安卓和ios进行交互: 若是安卓,执行代码:android.finishActivity(); 若是IOS,执行代码: try {   window.webkit.messageHandlers.finishActivity.postMessage("");   }catch(err

  • vue 微信分享回调iOS和安卓回调出现错误的解决

    产品需求:在微信内分享需要手动配置的分享地址.分享图片与内容描述,引导用户分享,并在微信分享成功回调内进行相应的操作. 首先需要在项目中引入微信jsSDk包,然后通过接口获取后台签名. 封装函数获取微信分享必填参数 其中的jsApiList中填的是需要使用的微信分享js接口的列表,参数URL默认是location.href,即分享当前页面的URL. 在需要分享的页面引入封装的函数 然后通过wxShare方法将URL和配置的参数传入,link参数是分享出去的链接,必须与当前页面的对应js安全域名一

  • django和vue实现数据交互的方法

    我使用的是jQuery的ajax与django进行数据交互,遇到的问题是django的csrf 传输数据的方法如下: $(function() { $.ajax({ url: 'account/register', type: 'post', dataType:'json', data: $('#form1').serialize(), success: function (result) { console.log(result); if (result) { alert("result&qu

  • vue中使用WX-JSSDK的两种方法(推荐)

    公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题.本人也是第一次开发微信公众号,在网上看了很多篇博客,最终选定了两种方法,并且亲测有效. 一.通过全局,在router.afterEach中定义 1.首先通过yarn add weixin-js-sdk/ npm i weixin-js-sdk 2.将微信jsdk挂载到全局上 在utils目录下新建WechatPlugin.js WechatPlugin.js import wx from 'we

  • VUE中使用Vue-resource完成交互

    VUE中使用Vue-resource完成交互

    本文介绍了VUE中使用Vue-resource完成交互,分享给大家,具体如下 使用vue-resource 引入vue-resource vue-resource就像jQuery里的$.ajax,是用来跟后端交互数据的,vue-resource是vue的一个插件,所以我们在开始使用vue之前,需要先引入vue-resource.js这个文件 <script src='js/vue.js'></script> <script src='js/vue-resource.js'&g

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • vue中axios实现数据交互与跨域问题

    1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio

随机推荐