ios与html交互(UIWebView)

基于UIWebView ios与js交互

githubdemo:
https://github.com/wangjinshan/JSWebDemo
https://github.com/wangjinshan/JSCDemo

ios 原声界面上加载webview, 然后需要和web界面进行数据交互就需要用到 ios和js 交互的知识, 交互的方法有三种:
1, 今天要讲解的基于 UIWebView的 交互,这种方式最主要的思想就是通过网页的代码方法进行url的拦截操作,后面细讲
2 第三方库
3, 苹果为我们封装 JavaScriptCore.framework

实例讲解

1,配置基本环境
创建 Sample.html ShareSDK.css ShareSDK.js 实现界面布局并加载到本地

  代理  UIWebViewDelegate
  NSString *path = [[NSBundle mainBundle]pathForResource:@"Sample" ofType:@"html"];
    NSURL*htmlURL = [NSURL fileURLWithPath:path];
    self.webView =[[UIWebView alloc]initWithFrame:self.view.bounds];
    NSURLRequest *request =[NSURLRequest requestWithURL:htmlURL];
    [_webView loadRequest:request];
    _webView.delegate = self;
    [self.view addSubview:_webView];

以下以在html上集成集成 ShareSDK 为例子, 由于前期数据传输没整理好,大家先忽略数据传递的问题,文章后面会补充
1, ShareSDK 初始化 ,创建一个 名字叫ShareSDK的对象 并在里面实现 initSDK初始化方法 ,数据暂时将以数组的形式传递,后面再补充上对象json传递

function ShareSDK()
{
//    初始化sdk, 注意 此处必须写上this 否则外部调用失败
    this.initSDK = function()
    {
        //1,平台的参数
        var mobkey = 'iosv1101';
        var platformID = new PlatformID();
        //平台数组
        var platformArr = [platformID.platformID.WeChat,platformID.platformID.WeChatFavorites,platformID.platformID.WeChatMoments];
        //2,微信appkey
        var platformConfig = ["wx4868b35061f87885","64020361b8ec4c99936c0e3999a9f249"];
        //发送请求
        window.location.href = '&initSDK' + '&mobkey'+mobkey +'&platformArr'+ platformArr +'&platformConfig' + platformConfig;
    }
}
var $sharesdk = new ShareSDK();

大家先简单理解这个就是一个 js方法,下面我们要做的就是在 ios上调用这段代码
我们已经在 viewDidLoad 的方法中加载了网页 下面我们就签UIWebView协议 UIWebViewDelegate 并实现代理方法

ios 调用 js代码

ios 调用js 代码非常简单,UIWebView 已经为我们封装好了方法(stringByEvaluatingJavaScriptFromString),我们将在网页加载完毕后进行代码处理,注意必须在网页加载完毕才能操作,否则无效

// 网页完成加载
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
//  注意stringByEvaluatingJavaScriptFromString必须保证是在主线线程中完成任务
    [self.webView stringByEvaluatingJavaScriptFromString:@"window.$sharesdk.initSDK()"];
    NSLog(@"----1------%@",[NSThread currentThread]);   //线程是1
    dispatch_queue_t queue = dispatch_get_global_queue(0, 0);
    dispatch_sync(queue, ^{
        NSLog(@"----2-----%@",[NSThread currentThread]); //线程还是1
         [self.webView stringByEvaluatingJavaScriptFromString:@"window.$sharesdk.ajsTest()"];
    });
}

注意 (stringByEvaluatingJavaScriptFromString) 这个方法必须在主线程调用,否则崩溃,如下

Tried to obtain the web lock from a thread other than the main thread or the web thread. This may be a result of calling to UIKit from a secondary thread. Crashing now...

代码注释: ios 调用js 相当于 给 js 发送一段字符串,然后程序会根据字符串去环境中寻找对应的方法并执行, @"window.$sharesdk.initSDK()" window js是环境中的全局变量, 所有 js环境中方法和属性 ,都可以通过 window 来进行调用, 此处 window 去找到 sharesdk对象并执行 initSDK()的方法
检查 方法有没有被调用 可以在 initSDK(); 进行 alert();进行测试,弹出警告窗口则表示调用成功

js 调用 ios代码

js调用 ios 也非常的简单,就是js发送一段请求,然后ios 在代理方法中进行拦截,如下

 this.initSDK = function()
    {
        //发送请求
        window.location.href = '要发送的数据';
    }

js 中 只要遇到 window.location.href 就会通知 ios 执行回调方法, html 进行 某个时段进行固定跳转也是经过这个方法, 下面我们就可以到 ios 对这段数据进行解析

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    [self analyzeURL:request.URL];
    return YES;   // 必须返回 yes
}

以上方法中的 request 就携带了 window.location.href = '要发送的数据'; 这个方法中 携带的 [要发送的数据], 这是一段 json 数据 ,解析这段json数据 你就可以进行相关的操作了, 到此 ios调用 js is调用ios结束,感觉非常简单, 但是你发现没有, 以上的实现并没有牵扯到数据, 个人认为 交互最蛋疼一点就是数据传递, UIWebView 并不友好, 数据传递比较蛋疼

js 传递数据给 ios

上面说过 js 调用 ios 是通过 发送请求的方法 (window.location.href = '要发送的数据';) 但是这个数据到底应该怎么写? 如下

//    测试传递对象类型
    this.ajsTest = function ()
    {
        var backJson = {};
        var wjs =
        {
            "name":"神族科技CEO",
            "name":"金山",
            "city":"上海"
        };
        backJson["wjs"] = wjs;
        var wjsJson =  ObjectToJsonString(backJson);
        window.location.href ="ajstest://?"+wjsJson;    // 注意协议头必须是小写 大写将转换成小写
    }

通常为了解析方便,我们都会携带一个协议,这个协议头可以随便写,然后拼接你要的数据,上面的例子 传递的是 一个js 中的对象,我们需要将 对象转换成 js 格式的字符串, 方法就是

var JsonStringToObject = function (string)
{
    try
    {
        return eval("(" + string + ")");
    }
    catch (err)
    {
        return null;
    }
};

这样就可以把js中的对象数据传给ios使用,ios拦截到的依然是个 json的字符串需要你手动解析
由于 URL是有长度的限制的,并且location.href管理页面的url，用location.href=url 是直接将页面重定向url,所以我们采用 hash属性,不让界面定位到某一个url而是定位到界面的某一个锚点, 所以实际的开发建议使用:
window.location.hash ="http://test#" + 传递的json数据;
数据解析正常

ios传递数据给js

ios 传递数据给 js 实现和ios 调用js 代码一样,只需要将传递的数据拼接在后面就可以

[errorDic setObject:[NSDictionary dictionaryWithObjectsAndKeys:
                                         [NSNumber numberWithInteger:[error code]],
                                         @"error_code",
                                         [error userInfo],
                                         @"error_msg",
                                         nil]
                                 forKey:@"error"];
                    [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"$sharesdk.callBackData('%@')",[self jsonStringFromObject:errorDic]]];

/**
 *  对象序列化为Json字符串
 *
 *  @param object 任意对象
 *
 *  @return Json字符串
 */
- (NSString *)jsonStringFromObject:(id)object
{
    NSString *jsonString = [[NSString alloc]init];
    NSError *error;
    NSData *jsonData = [NSJSONSerialization dataWithJSONObject:object
                                                      options:NSJSONWritingPrettyPrinted
                                                        error:&error];
    if (! jsonData) {
        NSLog(@"error: %@", error);
    } else {
        jsonString = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
    }
    NSMutableString *mutStr = [NSMutableString stringWithString:jsonString];
    NSRange range = {0,jsonString.length};
    [mutStr replaceOccurrencesOfString:@" "withString:@""options:NSLiteralSearch range:range];
    NSRange range2 = {0,mutStr.length};
    [mutStr replaceOccurrencesOfString:@"\n"withString:@""options:NSLiteralSearch range:range2];
    return mutStr;
}

这样就是实现了 ios 把一个 ios对象 转换成json 对象并 传给 js 使用
到此 基于 UIWebView 的 ios与js交互全部结束
完美的分割线
参考 window.location.hash 解释
http://www.bbsmax.com/R/q4zVMWQldK/

UIWebView 交互存在一个问题 一个html 不能同时发送 两个 window.location.hash = "";

解决这个问题的方案 就是需要结合 利用location.hash+iframe跨域获取数据详解
http://www.bbsmax.com/A/A2dmxyan5e/
这个问题后面 会抽时间更新

谢谢大家

---