vue实现与安卓、IOS交互

tanglijun 发布于2019-06-25 17:01 / 1092人阅读

摘要：如果用随机数处理就会不断地在上挂载新的函数，调用次数过多可能会出问题，所以目前是避免同时请求同一方法来解决的。

方案背景

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 => {}

特殊说明

安卓在交互中的参数传递只能支持string类型，对象参数要转成string传递

因为安卓的回调方法名是固定的，同一方法同时请求两次以上时，有可能只得到一次回调。如果用随机数处理就会不断地在window上挂载新的函数，调用次数过多可能会出问题，所以目前是避免同时请求同一方法来解决的。如果有需求避免不了，那还是要用随机数解决。

超融合服务器云服务器安卓登录与服务器交互 iOS与安卓互通语音问题 vue安卓下载 vue安卓版

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/17185.html

vue实现与安卓、IOS交互

摘要：如果用随机数处理就会不断地在上挂载新的函数，调用次数过多可能会出问题，所以目前是避免同时请求同一方法来解决的。方案背景 IOS用的是jsBridge插件实现调用、传参、回调的安卓是在window挂载方法和挂载回调的 IOS实现方案调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (wind...

617035918 2019-06-25 12:26 评论0 收藏0
vue实现与安卓、IOS交互

摘要：如果用随机数处理就会不断地在上挂载新的函数，调用次数过多可能会出问题，所以目前是避免同时请求同一方法来解决的。方案背景 IOS用的是jsBridge插件实现调用、传参、回调的安卓是在window挂载方法和挂载回调的 IOS实现方案调用原生方法封装如下 function setupWebViewJavascriptBridge (callback) { if (wind...

liuchengxu 2019-08-05 15:22 评论0 收藏0
一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

摘要：后续我们还会增加一些实战类的移动开发案例，欢迎关注专栏。进入官网新版预览在线预览需要使用开启设备模拟，效果更佳。前言之前写过一篇 2018开发最快的Webapp框架--BUI交互框架，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等...

wuyumin 2019-08-26 10:16 评论0 收藏0
Vue与原生APP的相互交互

摘要：美团爱奇艺微信等知名移动应用，都是采用开发模式。开发已成为未来的一种发展趋势。原生与交互场景原生的头部标题栏，内容为页面。分享微信好友安卓识别不了对象将对象转为字符串现在好多APP都采用了Hybrid的开发模式，这种模式特别适合那些内容变动更新较大的APP，从而使得开发和日常维护过程变得集中式、更简短、更经济高效，不需要纯原生频繁发布。但有利肯定有弊咯，性能方面能稍微差一点，还有就是...

wudengzan 2019-08-23 16:59 评论0 收藏0
关于vue项目中移动端实现用户选择视频、上传多个视频（兼容安卓和ios）功能。

摘要：项目需求在公司的教育公众号中，用户有一个需求就是学生作业为舞蹈或者童模表演，需要上传视频到服务器。解决办法判断手机类型，是还是安卓。对于不同的手机类型使用不同的设置，在中设置属性就行实现效果需要源码的可以联系我项目需求：在公司的教育公众号中，用户有一个需求就是：学生作业为舞蹈或者童模表演，需要上传视频到服务器。项目技术：使用vue+mniti-ui 遇到的问题：本以为上传视频会很简...

zeyu 2019-06-25 12:51 评论0 收藏0