iOS WebViews

本指南介绍如何在更大的 iOS 应用中嵌入支持 Cordova 的 WebView 组件。有关这些组件如何相互通信的详细信息,请参阅应用插件。

对 iOS WebViews 的支持始于 Cordova 1.4 版本,使用 Cleaver 组件,Xcode 模板作为参考实现。Cordova 2.0 及更高版本仅支持基于子项目的 Cleaver 实现。

这些说明需要 Cordova 4.x 及更高版本和 Xcode 8.0,以及从新创建的 iOS 项目中获取的 config.xml 文件。您可以使用 命令行界面 中的步骤创建一个新项目,然后从 platforms/ios 中命名应用程序的子目录中获取 config.xml 文件。

要遵循这些说明,请确保您拥有最新的 Cordova 发行版。从 cordova.apache.org 下载并解压缩其 iOS 包。

您有两种方法可以将 Cordova 添加到您的项目中。第一种是使用 Carthage,第二种是手动添加 Cordova。请注意,Carthage 支持仅在 cordova-ios 版本 4.4.0 或更高版本中提供。

使用这两种方法中的任何一种后,继续执行“使用 CDVViewController”部分。

1. 使用 Carthage 将 Cordova.framework 添加到 Xcode 项目

  1. 安装 Carthage

  2. 在您的 Cartfile 中,添加(将 <version_or_tag> 替换为适当的版本)

     git "git://git.apache.org/cordova-ios.git" "<version_or_tag>" # Apache
    
  3. 运行

     carthage update
    
  4. Carthage/Build/iOS/Cordova.framework 添加到您的 Xcode 项目中。

2. 将 Cleaver 添加到 Xcode 项目(CordovaLib 子项目)

  1. 如果 Xcode 正在运行,请退出。

  2. 打开终端并导航到 Cordova iOS 的源目录。

  3. 将上面描述的 config.xml 文件复制到项目目录。

  4. 打开 Xcode 并使用 Finder 将 config.xml 文件复制到其 **项目导航器** 窗口中。

  5. 选择 **为任何添加的文件夹创建组** 并按 **完成**。

  6. 使用 Finder 将 CordovaLib/CordovaLib.xcodeproj 文件复制到 Xcode 的 **项目导航器** 中

  7. 在 **项目导航器** 中选择 CordovaLib.xcodeproj

  8. 键入 **Option-Command-1** 组合键以显示 **文件检查器**。

  9. 在 **文件检查器** 中,为 **位置** 的下拉菜单选择 **相对于组**。

  10. 在 **项目导航器** 中选择 **项目图标**,选择 **目标**,然后选择 **构建设置** 选项卡。

  11. 为 **其他链接器标志** 值添加 -force_load-ObjC

  12. 单击 **项目导航器** 中的 **项目图标**,选择 **目标**,然后选择 **构建阶段** 选项卡。

  13. 展开 **与库链接二进制文件**。

  14. 选择 **+** 按钮,并添加以下 **框架**。可以选择在 **项目导航器** 中将它们移动到 **框架** 组下

     AssetsLibrary.framework
     CoreLocation.framework
     CoreGraphics.framework
     MobileCoreServices.framework
    
  15. 展开 **目标依赖项**,如果有多个框,则展开带有该标签的顶部框。

  16. 选择 **+** 按钮,并添加 CordovaLib 构建产品。

  17. 展开 **与库链接二进制文件**,如果有多个框,则展开带有该标签的顶部框。

  18. 选择 **+** 按钮,并添加 libCordova.a

  19. 将 **Xcode 首选项 → 位置 → 派生数据 → 高级…** 设置为 **唯一**。

  20. 在 **项目导航器** 中选择 **项目图标**,选择您的 **目标**,然后选择 **构建设置** 选项卡。

  21. 搜索 **头文件搜索路径**。对于该设置,添加以下三个值,包括引号

     "$(TARGET_BUILD_DIR)/usr/local/lib/include"
     "$(OBJROOT)/UninstalledProducts/include"
     "$(OBJROOT)/UninstalledProducts/$(PLATFORM_NAME)/include"
     "$(BUILT_PRODUCTS_DIR)"
    

    从 Cordova 2.1.0 开始,CordovaLib 已升级为使用 **自动引用计数 (ARC)**。您无需升级到 **ARC** 即可使用 CordovaLib,但如果您想将项目升级为使用 **ARC**,则应使用 Xcode 迁移向导(从 **编辑 → 重构 → 转换为 Objective-C ARC…** 菜单中),**取消选中 libCordova.a**,然后运行向导完成。

使用 CDVViewController

  1. 添加以下头文件

     #import <Cordova/CDVViewController.h>
    
  2. 实例化一个新的 CDVViewController 并将其保留在某个地方,例如,保留到类属性

     CDVViewController* viewController = [CDVViewController new];
    
  3. 可以选择设置 wwwFolderName 属性,该属性默认为 www

     viewController.wwwFolderName = @"myfolder";
    
  4. 可以选择在 config.xml 文件的 <content> 标签中设置起始页面,可以是本地文件

     <content src="index.html" />
    

    …或远程站点

     <content src="https://apache.org" />
    
  5. 可以选择设置 useSplashScreen 属性,该属性默认为 NO

     viewController.useSplashScreen = YES;
    
  6. 设置 **视图框架**。始终将其设置为最后一个属性

     viewController.view.frame = CGRectMake(0, 0, 320, 480);
    
  7. 将 Cleaver 添加到视图

     [myView addSubview:viewController.view];
    

添加 HTML、CSS 和 JavaScript 资产

  1. 在项目中创建一个新目录,例如 www

  2. 将 HTML、CSS 和 JavaScript 资产放置到此目录中。

  3. 使用 Finder 将目录复制到 Xcode 的 **项目导航器** 窗口中。

  4. 选择 **为任何添加的文件夹创建文件夹引用**。

  5. 为最初创建的目录设置适当的 wwwFolderNamestartPage 属性,或者在实例化 CDVViewController 时使用默认值(在上一节中指定)。

     /*
         if you created a folder called 'myfolder' and
         you want the file 'mypage.html' in it to be
         the startPage
     */
     viewController.wwwFolderName = @"myfolder";
     viewController.startPage = @"mypage.html"