iOS原生App与H5页面交互笔记
原文链接:http://www.jianshu.com/p/4ed3e5ed99c6
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法
//webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
然而这次的交互要求是进行双向通信,即JS调用原生App的方法之后,原生App要讲相关参数信息返回给H5页面,H5页面接受到参数信息后做其他处理。
例:H5页面的发布信息按钮,在点击按钮后要在原生端判断用户是否登录,若没有登录则弹出原生登录页面,登录成功后将用户信息返回给H5页面,继续发布流程。
重点来了!
在这里推荐一个比较好的第三方库即:WebViewJavascriptBridge
地址:https://github.com/marcuswestin/WebViewJavascriptBridge
通过使用该库可以轻松实现JS与原生交互。
//初始化WebViewJavascriptBridge方法
_bridge= [WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {
}];
//原生与JS约定接口名为“testObjcCallback”,data是JS传递过来的信息,responseCallback来将信息传递给JS
[_bridge registerHandler:@"testObjcCallback" handler:^(id data,WVJBResponseCallback responseCallback) {
responseCallback("postInfomationToJS")
}];
UIWebView页面信息的离线缓存
推荐一个比较好的第三方库RNCachingURLProtocol ,只需要在AppDelegate中加入下面方法即可。
[NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];
地址:https://github.com/rnapier/RNCachingURLProtocol
copy from MikeZhangpy
iOS原生App与H5页面交互笔记的更多相关文章
- iOS原生APP与H5+JS交互////////////////////zzzz
原生代码中直接加载页面 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)webView ...
- iOS原生APP和H5交互-delegate和第三方
一.原生代码中直接加载页面(拦截) 1. 具体案例 加载本地/网络HTML5作为功能介绍页 2. 代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...
- angularjs中安卓原生APP调用H5页面js函数,js写法应注意
安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- Hybrid APP之Native和H5页面交互原理
Hybrid APP之Native和H5页面交互原理 Hybrid APP的关键是原生页面与H5页面直接的交互,如下图,痛过JSBridge,H5页面可以调用Native的api,Native也可调用 ...
- 教你判断一个APP页面是原生的还是H5页面 。(还没看)
来源:https://www.25xt.com/appdesign/11851.html 刚好是周末,无意之间学堂君在收集相关资料的时候,发现有部分童鞋在问<如何判断一个APP页面是不是H5页面 ...
- iOS原生和React-Native之间的交互1
今天,记录一下iOS原生和React-Native之间的交互.如果第一次接触最好先移步至 http://www.cnblogs.com/shaoting/p/6388502.html 先看一下怎么在i ...
- ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号
异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...
- Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理
本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...
随机推荐
- C++ STL中map存储方式——SAP电面(4)
map存储方式 一般是平衡二叉树 红黑树
- La=LaULb (单链表)
#include<stdio.h> typedef struct LNode { int data; struct LNode *next; }LNode,*LinkList; void ...
- UNIX/Linux-进程控制(实例入门篇)
UNIX进程 进程标识符 要想对进程控制,必须得获取进程的标识.每个进程都有一个非负整数表示的唯一进程ID,虽然是唯一的,但是进程ID可以重用.当一个进程终止后,其进程ID就可以再次使用了. 系统 ...
- Python之路Day2
-->the start 养成好习惯,每次上课的内容都要写好笔记. 第二天内容主要是熟悉int.long.float.str.list.dict.tuple这几个类的内建方法. 对于Python ...
- [LeetCode]题解(python):123-Best Time to Buy and Sell Stock III
题目来源: https://leetcode.com/problems/best-time-to-buy-and-sell-stock-iii/ 题意分析: 和上题类似,array[i]代表第i天物品 ...
- 图标字体IcoMoon 使用
IcoMoon 使用官方地址 http://icomoon.io/实际上,它是一种字体,只不过这种字体的字象图标一样,比如windows中自带的MT Extra Webdings Wingdings字 ...
- 转:alphaImageLoader滤镜加载后 链接不能点击
我是一个很少使用IE滤镜,也是一个不赞成使用IE滤镜的前端工程师.不过今天有一个朋友给我发来了一个有关于IE6的BUG,就是在IE6中使用了AlphaPNG透明的IE滤镜之后,a链接不能够点击.具体情 ...
- 启用Apache Mod_rewrite模块
Ubuntu 环境 在终端中执行 sudo a2enmod rewrite 指令后,即启用了 Mod_rewrite 模块. 另外,也可以通过将 /etc/apache2/mods-available ...
- Django里面的RequestContext
c = RequestContext(request, { 'foo': 'bar', }) get_template('about.html').render(c) 当我们定义一个RequestCo ...
- 高性能网站优化-创建快速响应的Web
<高性能网站建设进阶指南> 优化原则 优化的目的是希望降低程序的整体开销. 减少开销 通常认为开销就是程序的执行时间.而在进行优化工作时,应该把重点放在对程序开销影响最大的那部分. 假设我 ...