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


Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow