iOS WebViews

Panduan ini menunjukkan cara menanamkan komponen WebView yang diaktifkan dengan Cordova di dalam aplikasi iOS yang lebih besar. Untuk detail tentang bagaimana komponen-komponen ini dapat saling berkomunikasi, lihat Plugin Aplikasi.

Dukungan untuk WebViews untuk iOS dimulai dengan Cordova versi 1.4, menggunakanCleaverkomponen yang template Xcode berfungsi sebagai implementasi referensi. Cordova 2.0 dan versi yang lebih baru hanya mendukung implementasi Cleaver berbasis sub-proyek.

Instruksi ini memerlukan setidaknya Cordova 4.x dan Xcode 8.0, bersama dengan config.xmlfile dari proyek iOS yang baru dibuat. Anda dapat menggunakan prosedur di Command-Line Interface untuk membuat proyek baru, lalu mendapatkan config.xmlfile dari dalam subdirektori aplikasi yang disebutkan di dalamnya platforms/ios.

Untuk mengikuti instruksi ini, pastikan Anda memiliki distribusi Cordova terbaru. Unduh daricordova.apache.org dan unzip paket iOS-nya.

Anda memiliki dua metode untuk menambahkan Cordova ke proyek Anda. Yang pertama menggunakan Kartago , dan yang kedua adalah menambahkan Cordova secara manual. Perhatikan bahwa dukungan Carthage hanya ada di cordova-ios versi 4.4.0 atau lebih tinggi.

Setelah menggunakan salah satu dari kedua metode ini, lanjutkan dengan bagian "Menggunakan CDVViewController" .

1. Tambahkan Cordova.framework ke Proyek Xcode menggunakan Carthage

1. Instal Kartago
2. Di Cartfile Anda , tambahkan (gantikan <versi atau tag> untuk versi yang sesuai):

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

3. Menjalankan

   carthage update
   

4. Tambahkan Carthage/Build/iOS/Cordova.frameworkke proyek Xcode Anda.

2. Menambahkan Cleaver ke Proyek Xcode (Sub-Proyek CordovaLib)

1. Keluar Xcode jika sedang berjalan.
2. Buka terminal dan navigasikan ke direktori sumber untuk Cordova iOS.
3. Salin config.xmlfile yang dijelaskan di atas ke direktori proyek.
4. Buka Xcode dan gunakan Finder untuk menyalin config.xmlfile ke jendela Project Navigator-nya .
5. Pilih Buat grup untuk folder yang ditambahkan dan tekan Selesai .
6. Gunakan Finder untuk menyalin CordovaLib/CordovaLib.xcodeprojfile ke Navigator Proyek Xcode
7. Pilih CordovaLib.xcodeprojdalam Navigator Proyek .
8. Ketik kombinasi tombol Option-Command-1 untuk memperlihatkan Pemeriksa File .
9. Pilih Relatif terhadap Grup di Pemeriksa File untuk menu tarik-turun untuk Lokasi .
10. Pilih ikon proyek di Navigator Proyek , pilih Target , lalu pilih tab Bangun Pengaturan .
11. Tambahkan -force_loaddan -ObjCuntuk nilai Bendera Tautan Lainnya .
12. Klik ikon proyek di Navigator Proyek, pilih Target , lalu pilih tab Bangun Fase .
13. Perluas Tautan Binari dengan Perpustakaan .
14. Pilih tombol + , dan tambahkan kerangka kerja berikut . Opsional dalam Navigator Proyek , pindahkan di bawah kerangka Frameworks :

    AssetsLibrary.framework
    CoreLocation.framework
    CoreGraphics.framework
    MobileCoreServices.framework
    

15. Perluas Ketergantungan Target , kotak paling atas dengan label itu jika ada lebih dari satu kotak.
16. Pilih tombol + , dan tambahkan CordovaLibproduk build.
17. Perluas Tautan Binari dengan Perpustakaan , kotak paling atas dengan label itu jika ada lebih dari satu kotak.
18. Pilih tombol + , dan tambahkan libCordova.a.
19. Atur Preferensi Xcode → Lokasi → Data Turunan → Lanjutan ... ke Unik .
20. Pilih ikon proyek di Navigator Proyek, pilih Target Anda , lalu pilih tab Bangun Pengaturan .
21. Cari Jalur Pencarian Header . Untuk pengaturan itu, tambahkan tiga nilai di bawah ini, termasuk kutipan:

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

    Pada Cordova 2.1.0, CordovaLibtelah ditingkatkan untuk menggunakan Penghitungan Referensi Otomatis (ARC) . Anda tidak perlu meng-upgrade ke ARC untuk menggunakan CordovaLib, tetapi jika Anda ingin meng-upgrade proyek Anda untuk menggunakan ARC , Anda harus menggunakan wizard migrasi Xcode dari Sunting → → Refactor Convert ke Objective-C ARC ... menu, de- pilih libCordova.a , lalu jalankan wizard hingga selesai.

Menggunakan CDVViewController

1. Tambahkan tajuk berikut:

   #import <Cordova/CDVViewController.h>
   

2. Instantiate yang baru CDVViewControllerdan simpan di suatu tempat, misalnya, ke properti kelas:

   CDVViewController* viewController = [CDVViewController new];
   

3. Secara opsional, atur wwwFolderNameproperti, yang secara default adalah www:

   viewController.wwwFolderName = @"myfolder";
   

4. Secara opsional, atur halaman awal dalam tag config.xmlfile <content>, baik file lokal:

   <content src="index.html" />
   

   ... atau situs jarak jauh:

   <content src="http://apache.org" />
   

5. Secara opsional, atur useSplashScreenproperti, yang secara default adalah NO:

   viewController.useSplashScreen = YES;
   

6. Atur bingkai tampilan . Selalu setel ini sebagai properti terakhir:

   viewController.view.frame = CGRectMake(0, 0, 320, 480);
   

7. Tambahkan Cleaver ke tampilan:

   [myView addSubview:viewController.view];
   

Menambahkan Aset HTML, CSS, dan JavaScript

1. Buat direktori baru di dalam proyek, wwwmisalnya.
2. Tempatkan aset HTML, CSS, dan JavaScript ke dalam direktori ini.
3. Gunakan Finder untuk menyalin direktori ke jendela Project Navigator Xcode .
4. Pilih Buat referensi folder untuk folder yang ditambahkan .
5. Atur properti wwwFolderNamedan startPageproperti yang sesuai untuk direktori yang Anda buat awalnya, atau gunakan default (ditentukan di bagian sebelumnya) ketika membuat instanceCDVViewController.

   /*
       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"