iOS 和 H5交互(原生)
今天突然收到一个需求, h5页面的有一个button的点击事件是将一张图片保存到手机本地, h5端没办法单独实现, 需要和iOS交互。前提是安卓已经实现了这个功能之后才告诉我,于是我少走了一些弯路。
具体需求是:h5已近有些这个方法名了, 该方法还携带了一个必要参数, 在APP端只需要获得这个方法的调用, 得到这个参数,接下来就很简单啦~
于是赶紧上网到处找资料啊,看看有没有解决办法啊, 下了N多个demo, 点开了N多个网页, 弄了将近一天, 终于找到一个理想的方法, 特意在这边记录下来。
其实主要都是参考了别人的博客来的, 只是按照自己的理解思路重新整理一遍。
参考:http://blog.csdn.net/lwjok2007/article/details/47058795
首先在网上找到的都是 用WebViewJavascriptBridge来实现交互的, 但是工程本来就很大了, 如果每次需要一个功能就使用第三方的话, 以后项目的包不知道会有多大, 于是还是继续寻找原生的方法进行!
首先利用下面这个方法得到整个h5页面的代码, 我就是从这里面找到button的点击方法名的。
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.innerHTML"]
截取这个button H5端的实现方法:
$('.save-img button').on(clickEvent, function() {
$.ajax({
url: 'http://sh.ulandian.com/app/microshop/getShareImg.htm?userId=' + userId,
type: 'GET',
dataType: 'json',
timeout: 0,
data: {},
contentType: "application/json; charset=utf-8",
beforeSend: function() {},
success: function(data) {
window.demo.clickOnAndroid(data.shareImgUrl);
},
error: function(xhr, type) {}
});
于是找到了最关键的一句代码:
window.demo.clickOnAndroid(data.shareImgUrl);
根据http://blog.csdn.net/lwjok2007/article/details/47058795里面的内容, 首先确定了:js里面是通过对象调用oc方法的, 且只携带了一个参数,使用博客里面的第二种方法。
所以先创建一个继承于NSObject的类 ServerJS
上代码:
ServerJS.h
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>
@protocol ServerJSProtocol <JSExport>
//此处我们测试几种参数的情况
//-(void)TestNOParameter;
-(void)clickOnAndroid:(NSString *)message;
//-(void)TestTowParameter:(NSString *)message1 SecondParameter:(NSString *)message2;
@end
@interface ServerJS : NSObject<ServerJSProtocol>
@end
ServerJS.m
#import "ServerJS.h"
@implementation ServerJS
//一下方法都是只是打了个log 等会看log 以及参数能对上就说明js调用了此处的iOS 原生方法
//-(void)TestNOParameter
//{
// NSLog(@"this is ios TestNOParameter");
//}
-(void)clickOnAndroid:(NSString *)message
{
NSLog(@"clickOnAndroid:%@",message);
UIImage *img = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:message]]];
UIImageWriteToSavedPhotosAlbum(img, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
}
-(void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
{
if (!error)
{
UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"保存到相册成功" delegate:self cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
[alert show];
}
else
{
UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"提示" message:@"保存到相册失败, 请再试一次" delegate:self cancelButtonTitle:nil otherButtonTitles:@"确定", nil];
[alert show];
}
}
//-(void)TestTowParameter:(NSString *)message1 SecondParameter:(NSString *)message2
//{
// NSLog(@"this is ios TestTowParameter=%@ Second=%@",message1,message2);
//}
@end
在加载webView的控制器里面:
首先加入头文件
#import <JavaScriptCore/JavaScriptCore.h>
#import "ServerJS.h"
在webView的代理方法里面:
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
JSContext *context = [webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
ServerJS *js = [[ServerJS alloc]init];
context[@"demo"] = js;
}
�就多了这些代码, 功能就实现了~