ionic2 Samouczek
Rozpoczęcie pracy z ionic2
Szukaj…
Uwagi
Ionic 2 to wieloplatformowa technologia tworzenia aplikacji mobilnych. Ten framework jest zbudowany do budowania hybrydowych aplikacji mobilnych i może być również używany do aplikacji komputerowych. To jest napisać raz, działa wszędzie technologia. Wykorzystuje technologie sieciowe, takie jak JavaScript / Typescript, Angular 2, HTML i CSS (SCSS / LESS). Aplikacje Ionic2 działają dobrze na >=android 4.4 , ale chcesz uruchomić system android 4.1 na android 4.3 , musisz użyć przejścia krzyżowego .
Instalacja lub konfiguracja
Ponieważ Ionic 2 jest coraz lepszy każdego dnia, zawsze sprawdzaj oficjalną dokumentację, aby śledzić najnowsze zmiany i ulepszenia.
Wymagania wstępne: Będziesz potrzebował NodeJS, aby zbudować projekty Ionic 2. Możesz pobrać i zainstalować węzeł tutaj i dowiedzieć się więcej o npm i pakietach używanych przez Ionic 2 tutaj .
1. Instalowanie Ionic 2
Podobnie jak Ionic 1, możesz użyć interfejsu Ionic CLI lub GUI, aby szybko tworzyć i testować aplikacje bezpośrednio w przeglądarce. Ma nawet wszystkie funkcje do pracy z aplikacjami Ionic 1, więc nie musisz nic zmieniać!
Aby użyć Ionic 2, po prostu zainstaluj ionic z npm:
$ npm install -g ionic
Jeśli pojawi się błąd EACCES, postępuj zgodnie z instrukcjami tutaj, aby nadać węzłu potrzebne uprawnienia.
2. Tworzenie pierwszej aplikacji
Po zainstalowaniu interfejsu CLI uruchom następujące polecenie, aby uruchomić pierwszą aplikację:
$ ionic start MyIonic2Project
Szablon zakładek jest domyślnie używany, ale możesz wybrać inny szablon, przekazując flagę. Na przykład:
$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install
Spowoduje to użycie szablonu samouczka .
Aby uruchomić aplikację, przejdź do katalogu projektów i uruchom ionic serve -lc :
$ ionic serve -lc
-L aktywuje przeładowanie strony na żywo, -c wyświetla logi konsoli. Jeśli masz problemy z budowaniem aplikacji, upewnij się, że plik package.json jest zgodny z tym w bazie ionic2-app-base
Możesz grać ze swoją nową aplikacją bezpośrednio w przeglądarce!
3. Budowanie na urządzeniu
Możesz także zbudować nową aplikację na urządzeniu fizycznym lub emulatorze urządzenia. Aby kontynuować, będziesz potrzebować Cordova .
Aby zainstalować Cordova, uruchom:
$ npm install -g cordova
Zapoznaj się z dokumentacją symulatora systemu iOS dotyczącą tworzenia aplikacji na system iOS (UWAGA: nie można budować na urządzeniach z systemem iOS lub emulatorach na żadnym systemie operacyjnym innym niż OSX) lub dokumentacją Genymotion, aby zbudować aplikację na system Android.
Działa na urządzeniu z iOS:
Aby zbudować aplikację na iOS, musisz pracować na komputerze OSX, ponieważ będziesz potrzebować frameworka kakaowego, aby móc budować dla iOS, w takim przypadku najpierw musisz dodać platformę do Cordova, uruchamiając następujące polecenie:
$ ionic cordova platform add ios
Będziesz potrzebował Xcode do kompilacji na urządzeniu z iOS.
Na koniec uruchom aplikację za pomocą następującego polecenia:
$ ionic cordova run ios
Uruchamianie na urządzeniu z Androidem:
Kroki dla Androida są prawie identyczne. Najpierw dodaj platformę:
$ ionic cordova platform add android
Następnie zainstaluj zestaw Android SDK, który umożliwia kompilację na urządzeniu z Androidem. Chociaż zestaw Android SDK jest wyposażony w emulator, działa naprawdę wolno. Genymotion jest znacznie szybszy. Po zainstalowaniu uruchom następujące polecenie:
$ ionic cordova run android
I to wszystko! Gratulujemy zbudowania pierwszej aplikacji Ionic 2!
Ionic również przeładowuje na żywo. Jeśli więc chcesz opracować aplikację i zobaczyć zmiany zachodzące na żywo na emulatorze / urządzeniu, możesz to zrobić, uruchamiając następujące polecenia:
Na iOS:
$ ionic cordova emulate ios -lcs
Uwaga: w iOS 9.2.2 ponowne ładowanie na żywo nie działa. Jeśli chcesz pracować z livereload, edytuj plik config.xml, dodając następujące elementy:
<allow-navigation href="*"/>
Następnie w <platform name="ios"> :
<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</config-file>
Dla Android:
$ ionic cordova run android -lcs
Litera l oznacza przeładowanie na żywo, c dzienniki konsoli, a s dzienniki serwera. Umożliwi to sprawdzenie, czy podczas wykonywania występują błędy / ostrzeżenia.
Budowanie dla systemu Windows
Jeśli chcesz zbudować projekt dla systemu Windows, musisz pracować na komputerze z systemem Windows. Aby rozpocząć, zainstaluj platformę Windows do projektu ionic2, uruchamiając następujące polecenie:
$ionic cordova platform add windows
Następnie uruchom następujące polecenie:
$ionic cordova run windows
Aby uruchomić w przeglądarce
$ionic serve
w przeglądarce Chrome sprawdź urządzenie. (wpisz pasek adresu przeglądarki Chrome)
chrome://inspect/#devices
