美文网首页iOS开发实用技术
iOS 和 H5交互(原生)

iOS 和 H5交互(原生)

作者: YYYLynn | 来源:发表于2016-06-12 18:02 被阅读4335次

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

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

    相关文章

      网友评论

      • 翀鹰精灵:如果能有个demo,就更好了😄
      • 空转风:[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.innerHTML"]
        楼主,@"document.documentElement.innerHTML"这个是怎么来的?
        Pusswzy:@年光逝也被僵尸号占了 你要交互的H5代码 好可爱的问题

      本文标题:iOS 和 H5交互(原生)

      本文链接:https://www.haomeiwen.com/subject/hunedttx.html