iOS开发实用技术

iOS 和 H5交互(原生)

2016-06-12  本文已影响4335人  YYYLynn

今天突然收到一个需求, 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;
}

�就多了这些代码, 功能就实现了~

上一篇下一篇

猜你喜欢

热点阅读