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
文章写的比较浅,如有纰漏,欢迎指正,如果有更好方案,欢迎留言。
- JS面向对象高级特性
- 图解闭包
- 【web必知必会】——图解HTTP(上)
- 【web必知必会】—— 图解HTTP(下)
- 【Spring实战】—— 14 传统的JDBC实现的DAO插入和读取
- 【AngularJS】—— 4 表达式
- 【AngularJS】—— 5 表单
- 【AngularJS】—— 1 初识AngularJs
- 【AngularJS】—— 2 初识AngularJs(续)
- 【AngularJS】—— 3 我的第一个AngularJS小程序
- 【Spring实战】—— 2 构造注入
- 共享单车运维“朋友圈”越来越宽,乱停乱放现象有望改善吗?
- 【Spring实战】—— 15 Spring JDBC模板使用
- 前端开发总览
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程绘图操作之弧形绘制方法示例
- 详解Android中Application设置全局变量以及传值
- Android编程调用红外线遥控功能示例
- Android实现图文垂直跑马灯效果
- Android 实现截屏功能的实例
- android仿微信通讯录搜索示例(匹配拼音,字母,索引位置)
- Android通过overScrollBy实现下拉视差特效
- Android使用手势实现翻页效果
- Android应用内悬浮窗的实现方案示例
- Android实现View拖拽跟随手指移动效果
- Android中button的onClick事件几种方法
- Android利用Glide获取图片真正的宽高的实例
- Android 自定义AlertDialog对话框样式
- Android自定义一个图形单点移动缩小的效果
- 详解Android实现购物车页面及购物车效果(点击动画)