h5 与原生 app 交互的原理
作者:senntyou
segmentfault.com/a/1190000016759517
现在移动端 web 应用,很多时候都需要与原生 app 进行交互、沟通(运行在 webview
中),比如微信的 jssdk
,通过 window.wx
对象调用一些原生 app 的功能。所以,这次就来捋一捋 h5 与原生 app 交互的原理。
h5 与原生 app 的交互,本质上说,就是两种调用:
app 调用 h5 的代码
h5 调用 app 的代码
1. app 调用 h5 的代码
因为 app 是宿主,可以直接访问 h5,所以这种调用比较简单,就是在 h5 中曝露一些全局对象(包括方法),然后在原生 app 中调用这些对象。
javascript:
window.sdk = { double = value => value * 2, triple = value => value * 3,};
android:
webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback<String>() { @Override public void onReceiveValue(String s) { // 20 }});
ios:
NSString *func = @"window.sdk.double(10)";NSString *str = [webview stringByEvaluatingJavaScriptFromString:func]; // 20
2. h5 调用 app 的代码
因为 h5 不能直接访问宿主 app,所以这种调用就相对复杂一点。
这种调用常用有两种方式:
由 app 向 h5 注入一个全局 js 对象,然后在 h5 直接访问这个对象
由 h5 发起一个自定义协议请求,app 拦截这个请求后,再由 app 调用 h5 中的回调函数
2.1 由 app 向 h5 注入一个全局 js 对象
这种方式沟通机制简单,比较好理解,并且对于 h5 来说,没有新的东西,所以是比较推荐的一种方式。但这种方式可能存在安全隐患,详细查看 你不知道的 Android WebView 使用漏洞。
android:
webview.addJavascriptInterface(new Object() { @JavascriptInterface public int double(value) { return value * 2; } @JavascriptInterface public int triple(value) { return value * 3; }}, "appSdk");
ios:
@interface AppSdk : NSObject{}- (int) double:(int)value;- (int) triple:(int)value;@end@implementation AppSdk- (int) double:(int)value { return value * 2;}- (int) triple:(int)value { return value * 3;}@endJSContext *context=[webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];AppSdk *appSdk = [AppSdk new];context[@"appSdk"] = appSdk;
javascript:
window.appSdk.double(10); // 20
2.2 由 h5 发起一个自定义协议请求
这种方式要稍复杂一点,因为需要自定义协议,这对很多前端开发者来说是比较新的东西。所以一般不推荐这种方式,可以作为第一种方式的补充。
大致需要以下几个步骤:
由 app 自定义协议,比如 sdk://action?params
在 h5 定义好回调函数,比如 window.bridge={getDouble:value=>{},getTriple:value=>{}}
由 h5 发起一个自定义协议请求,比如 location.href='sdk://double?value=10'
app 拦截这个请求后,进行相应的操作,获取返回值
由 app 调用 h5 中的回调函数,比如 window.bridge.getDouble(20);
javascript:
window.bridge = { getDouble: value => { // 20 }, getTriple: value => { // more }};location.href = 'sdk://double?value=10';
android:
webview.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // 判断如果 url 是 sdk:// 打头的就拦截掉 // 然后从 url sdk://action?params 中取出 action 与params Uri uri = Uri.parse(url); if ( uri.getScheme().equals("sdk")) { // 比如 action = double, params = value=10 webview.evaluateJavascript('window.bridge.getDouble(20)'); return true; } return super.shouldOverrideUrlLoading(view, url); }});
ios:
- (BOOL)webview:(UIWebView *)webview shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { // 判断如果 url 是 sdk:// 打头的就拦截掉 // 然后从 url sdk://action?params 中取出 action 与params NSString *urlStr = request.URL.absoluteString; if ([urlStr hasPrefix:@"sdk://"]) { // 比如 action = double, params = value=10 NSString *func = @"window.bridge.getDouble(20)"; [webview stringByEvaluatingJavaScriptFromString:func]; return NO; } return YES;}
h5 与原生 app 交互的原理相关推荐
- 客户端相关知识学习(二)之h5与原生app交互的原理
前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...
- h5与原生app交互的原理
h5 与原生 app 交互的原理 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 ...
- 混合开发中,H5页面与原生app交互(方法互相调用与传参)
H5与原生app交互,需要WebViewJavascriptBridge,废话不多直接上代码,下面是项目中的封装bridge.js的全部代码(示例代码为vue) //iOS 交互声明 function ...
- H5和原生APP之间的区别
原文:http://www.ui.cn/detail/247751.html 最近项目中因各种客观因素,移动端都是默认用的纯H5 APP,感受最深的就是各种坑啊,好大的坑啊.产品上线后,带着各种坑后的 ...
- H5和原生App的区别
前端常识: 前端:指客户端 主要有: 移动端APP(Android.IOS等) Web前端(主要指H5) PC端软件 后端:值服务器端. 常见的服务端语言或技术: java Node.js Pytho ...
- [html] H5如何与APP交互?有哪些方式?
[html] H5如何与APP交互?有哪些方式? jsbridge与app通信 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关 ...
- [vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法
[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法 我的做法就是让app在webview把app的 ...
- android h5和原生方法调用,H5与原生APP之间的方法互通
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通 首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
- vue 获取安卓原生方法_VUE H5调用原生APP方法实践笔记
最近做与app端的混合开发,了解到了H5与原生app端之间的方法互通 首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console ...
最新文章
- JMeter的安装和使用
- Redis缓存高可用集群哨兵模式详解
- boost::math::skew_normal用法的测试程序
- mt6735通用recovery_山寨4G V8主板MT6735线刷机包
- 大牛领导单独找我聊了两句:搞框架的同时别忘了算法
- 2015Cocos游戏开发大赛作品——人鱼塞壬
- python偏函数理解_Python中的偏函数
- golangd历史版本下载路径
- java 课程设计题目_Java课程设计题目有哪些?Java课程设计题目汇总
- UCDOS作者---鲍岳桥
- JavaCV的摄像头实战之五:推流
- GoLang json格式化输出
- GaRy-Liang的linux成长日记5-基本命令
- ChineseLunisolarCalendar 农历日期
- 使用while循环实现xyz+yzz=532
- coc跑团san数值规则_【规则】克苏鲁coc跑团游戏术语/黑话,第三篇教学。
- JavaScript Dom编程艺术学习笔记(第4章)
- 赛门铁克为 Google 域名颁发证书
- 从LVI-SAM来看激光与视觉的紧耦合系统
- 【Python黑科技】tkinter库实战“贪吃蛇”小游戏(保姆级图文+实现代码)
热门文章
- cuda、cudnn相关问题链接
- h3c 虚拟服务器 下一跳,H3CNE 312题和313题 直连路由静态路由的下一跳问题
- python图片识别验证码软件_python识别图片验证码
- 列举ospf的5种报文类型_危险品货物各种包装类型以及装箱技巧
- 表示自己从头开始的句子_微信拍一拍后缀幽默回复有趣的句子 拍了拍唯美内容文案...
- Luogu 4721 【模板】分治 FFT
- ubuntu设置静态ip
- 常见的CSS和HTML面试题
- Struts2 拦截器: 拦截器与过滤器区别
- 架构之美—软件架构6大步骤(开篇)