js和native交互方法浅析

一、背景

最近接触公司项目,需要和原生app做交互,由此业务需求,开始了学习探索之路。

二、解决方案之WebViewJavascriptBridge 

想要和app交互,必须在app上先把bridge进行实例化,这是先决条件。

oc解决方案

步骤

1、引入文件

#import "WebViewJavascriptBridge.h"

2、实例化WebViewJavascriptBridge 

self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView];

3、在oc中注册一个函数,并调用一个js处理函数 

[self.bridge registerHandler:@"ObjC Echo" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC Echo called with: %@", data);
    responseCallback(data);
}];
[self.bridge callHandler:@"JS Echo" data:nil responseCallback:^(id responseData) {
    NSLog(@"ObjC received response: %@", responseData);
}];

4、把这段js代码放入前端js或者页面中 

 1 function setupWebViewJavascriptBridge(callback) {
 2     if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
 3     if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
 4     window.WVJBCallbacks = [callback];
 5 // 创建iframe 对象, 在网页中,iframe的用法非常多,主要应用于伪ajax、嵌套页面、页面重用。
 6     var WVJBIframe = document.createElement('iframe');
 7     WVJBIframe.style.display = 'none';
 8     WVJBIframe.src = 'https://__bridge_loaded__';
 9     document.documentElement.appendChild(WVJBIframe);
10 //保证前面的代码执行完再删除这个iframe节点,
11 //setTimeout (fn,0)
12 //同步代码转异步代码,这是为了手动调配优先级不高的代码靠后执行。保证当前处于事件队列中的任务全部执行完后该任务(函数)立刻得到执行。
13     setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
14 }

5、在前端调用

setupWebViewJavascriptBridge(function(bridge) {
    
    /* Initialize your app here */

    bridge.registerHandler('JS Echo', function(data, responseCallback) {
        console.log("JS Echo called with:", data)
        responseCallback(data)
    })
    bridge.callHandler('ObjC Echo', {'key':'value'}, function responseCallback(responseData) {
        console.log("JS received response:", responseData)
    })
})

API

oc调用js

// OC端 向 JS端 传数据的回调函数, 注册 registerHandler(标识符, 数据回调闭包), 当OC端发起数据传送,会调用 function(数据, OC端给的回调函数) --------->handlerName要和OC端保持一致

js调用oc

bridge.callHandler("handlerName", data)

总结

交互前需要先对OC环境和JS环境进行初始化,JS环境的初始化通过Web页面加载时发送特定的URL来完成。

WebViewJavascriptBridge在OC端和JS端各自维护一个bridge对象来保存开放给另一端的方法,以及自身调用另一端后的回调方法。前者通过handlerName来映射,后者通过callBackId标识唯一性。方法调用时必定携带handlerName,若需要回调,还需携带callBackId。

WebViewJavascriptBridge中OC调用JS采用的是WebView提供的JS执行方法;而JS调用OC采用的是URL拦截的方式,OC端通过识别特定的URL来区分是否需要拦截,并做相应的逻辑处理。

android解决方案

安卓版插件传送门https://github.com/gzsll/WebViewJavascriptBridge,原理基本一致,没有深入研究。

思考

WebViewJavascriptBridge还需要做IOS和Android的兼容,那么,还有没有更好的方案呢?功夫不负有心人,我找到了DSBridge

三、解决方案之DSBridge

dsbridge最大的特点就是支持同步!中文文档传送门:https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md

文章写的比较浅,如有纰漏,欢迎指正,如果有更好方案,欢迎留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java3y

操作系统第六篇【存储器管理】

47770
来自专栏H2Cloud

Future Pattern

Started: 俗话说一年之计在于春,一天之计在于晨,当我起床的时候,看见表正指向九点钟,十一点下班,十点上班,这是我现在的工作节奏。来北京马上就一个月了,近...

36050
来自专栏葡萄城控件技术团队

Winform文件下载之WebClient

最近升级了公司内部使用的一个下载小工具,主要提升了下面几点: 1. 在一些分公司的局域网中,连接不上外网 2. 服务器上的文件更新后,下载到的还是更新前的文件 ...

21650
来自专栏Java成长之路

java中的异步处理和Feature接口(一)

想象这样一个场景:你可能希望为你的法国客户提供指定主题的热点报道。为实现这一功能,你需要向 谷歌或者Twitter的API请求所有语言中针对该主题最热门的评论,...

34220
来自专栏逸鹏说道

bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序 也许单页程序(Single Pa...

39750
来自专栏along的开发之旅

Android逆向分析概述

学习逆向的初衷是想系统学习Android下的hook技术和工具, 想系统学习Android的hook技术和工具是因为Android移动性能实战这本书. 这本书里...

20230
来自专栏文大师的新世界

9. redux如何精简代码

通过之前的代码不难看出redux系统里的ActionType、Action、Reducer都有一定的共性,小项目无所谓,这样写更清晰,但是一旦组件以及业务增多,...

19050
来自专栏安恒网络空间安全讲武堂

翻译 | python利用shodan搜集信息

文中提及的部分技术、工具可能带有一定的攻击性、仅供安全学习和教学用途,禁止非法使用! 安装 为了开始使用Shodan的Python库,首先要确保你已经收到了AP...

479100
来自专栏SeanCheney的专栏

《Python分布式计算》 第6章 超级计算机群使用Python (Distributed Computing with Python)典型的HPC群任务规划器使用HTCondor运行Python任务

本章,我们学习另一种部署分布式Python应用的的方法。即使用高性能计算机(HPC)群(也叫作超级计算机),它们通常价值数百万美元(或欧元),占地庞大。 真正的...

1.6K100
来自专栏机器学习和数学

[编程经验]R语言入门及描述性统计分析方法

好吧,我承认,最近都没好好学习了,事情比较多,好几天晚上我都会写下标题,然后就没有然后了,今天再不能忍了,决定来一发。但是,我觉得还是推文的质量要比数量更加重要...

43350

扫码关注云+社区

领取腾讯云代金券