iOS WebViews

本指南說明如何在較大的 iOS 應用程式中嵌入啟用 Cordova 的 WebView 元件。有關這些元件如何相互通訊的詳細資訊,請參閱應用程式外掛。

iOS 的 WebView 支援始於 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,則應該從編輯 → 重構 → 轉換為 Objective-C ARC… 選單中使用 Xcode 遷移精靈,取消選擇 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"