ios - HTML 5 + iOS - 创建混合应用程序

Question

我正在尝试将我的原生 iOS 应用程序转换为使用 HTML 5 的混合应用程序。经过研究，我最终使用了jQuery mobile + phoneGap。

我的问题是

1. 是否可以在一个视图中混合使用 html 5 和原生 iOS 功能？例如，我可以使用 html 文本字段来获取值并使用它使用 iOS 选择器进行一些转换。
2. 是否可以从 html 页面导航到本机 xib？
3. 最后，有没有更好的解决方案来创建混合应用程序？

提前致谢

Answer 1

1. 是的，您可以在单个“视图”中混合原生 iOS 功能。如果您希望将原生 iOS 选择器插入到 Web 视图中，那是不可能的。正如 nhahtdh 所提到的，您添加的任何本机 iOS 视图都将放置在您的 HTML5 UIWebView 之上。要执行这样的任务，您需要掌握通过 Javascript 进行的通信。有关如何在 ObjC 和 Javascript 之间轻松通信以在本机和 HTML 之间来回传递值的技术，请参阅https://github.com/diy/conduit等框架。

2. 可以从 HTML 页面执行导航（例如，单击链接时），方法是设置您的 iOS 应用程序以监视特定的 URL 请求，并根据它们执行一些操作。为此，我使用了 NSURLCache。因此，如果您希望 HTML 中的链接触发加载 xib 文件，您可以观察通过 NSURLCache 请求的 URL，并在看到时加载您的 xib。这个链接帮助我掌握了这项技术。

3. 据我了解，所有混合 iOS + HTML 框架都使用这种通用技术来建立一组类似 REST 的 URL 请求，这些请求可以由类似 NSURLCache 的系统解析并根据这些 URL 触发本机事件。虽然使用现有框架可能会为您节省一些时间，但您自己实现更简单的功能并不难。但是，大型框架可能会帮助您进行更高级的 HTML 资源缓存。

Answer 2

可能我在这里迟到了，但前两个问题的答案是可以的。您可以从具有 Javascript 的 Web 调用具有 Picker 显示代码和导航/推送其他视图的 Objective C 方法。您只需要使用 UIWebViewDelegate 在您的本机应用程序中跟踪它们。这是我如何做到这一点的示例：

// 在您的 Javascript 文件中，在您想要调用 Pickerview 或想要推送另一个原生视图的方法中

       var iframe = document.createElement("IFRAME");
       iframe.setAttribute("src", "js-frame:myObjectiveCFunction"; 
      document.documentElement.appendChild(iframe);
       iframe.parentNode.removeChild(iframe);
       iframe = null;

在您的 Native Objective - C 文件中：包括 << UIWebViewDelegate >>

- (BOOL)webView:(UIWebView *)webView  shouldStartLoadWithRequest:(NSURLRequest *)request
       navigationType:(UIWebViewNavigationType)navigationType {

if ([[[request URL] absoluteString] hasPrefix:@"js-frame:"]) {
    // Extract the selector name from the URL
    NSArray *components = [requestString componentsSeparatedByString:@":"];
    NSString *functionName = [components objectAtIndex:1];
    // Call the given selector
    [self performSelector:NSSelectorFromString(functionName)];
    // Cancel the location change
    return NO;
}
// Accept this location change
return YES;

}

- (void)myObjectiveCFunction {
    // Do whatever you want!
   // show Native picker view
   // Push another native View
}

同样，您甚至可以将参数从 HTML 页面发送到 Objective c。// ----------------------------------