ionic2 Zelfstudie
Aan de slag met ionic2
Zoeken…
Opmerkingen
Ionic 2 is een platformonafhankelijke mobiele ontwikkelingstechnologie. Dit framework is gebouwd voor het bouwen van hybride mobiele applicaties en kan ook worden gebruikt voor desktopapplicaties. Het is een keer schrijven, overal draaiende technologie. Het maakt gebruik van webtechnologieën zoals JavaScript / Typescript, Angular 2, HTML en CSS (SCSS / LESS). Ionic2-apps werken goed op >=android 4.4 , maar je wilt android 4.1 tot android 4.3 je moet Cross Walk gebruiken .
Installatie of instellingen
Aangezien Ionic 2 elke dag beter en beter wordt, raadpleegt u altijd de officiële documentatie om de laatste wijzigingen en verbeteringen bij te houden.
Voorwaarden: U hebt NodeJS nodig om Ionic 2-projecten te bouwen. Je kunt het knooppunt hier downloaden en installeren en meer leren over npm en de pakketten die Ionic 2 hier gebruikt.
1. Ionic installeren 2
Net als Ionic 1 kunt u de Ionic CLI of GUI gebruiken om snel apps in de browser te bouwen en te testen. Het heeft zelfs alle functionaliteit om met uw Ionic 1-apps te werken, zodat u niets hoeft te veranderen!
Om Ionic 2 te gebruiken, installeer je eenvoudig ionische van npm:
$ npm install -g ionic
Als u een EACCES-fout krijgt, volgt u de instructies hier om het knooppunt de benodigde machtigingen te geven.
2. Uw eerste app maken
Nadat de CLI is geïnstalleerd, voert u de volgende opdracht uit om uw eerste app te starten:
$ ionic start MyIonic2Project
De tabsjabloon wordt standaard gebruikt, maar u kunt een andere sjabloon kiezen door een vlag in te voeren. Bijvoorbeeld:
$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install
Dit maakt gebruik van de zelfstudiesjabloon .
Om uw app uit te voeren, gaat u naar uw projectmap en voert u ionic serve -lc :
$ ionic serve -lc
De -l activeert de live herladen van de pagina, de -c toont de consolelogboeken. Als u problemen ondervindt bij het bouwen van uw app, zorg er dan voor dat uw package.json overeenkomt met die in de ionic2-app-base
Je kunt met je nieuwe app spelen daar in de browser!
3. Bouwen naar een apparaat
U kunt uw nieuwe app ook bouwen op een fysiek apparaat of een apparaatemulator. U hebt Cordova nodig om door te gaan.
Voer het volgende uit om Cordova te installeren:
$ npm install -g cordova
Bekijk de iOS-simulatiedocumenten voor het bouwen van iOS-toepassingen (OPMERKING: u kunt niet bouwen naar iOS-apparaten of emulators op een ander besturingssysteem dan OSX), of de Genymotion- documenten om een Android-toepassing te bouwen.
Uitgevoerd op iOS-apparaat:
Om een iOS-app te bouwen, is het noodzakelijk dat u op een OSX-computer werkt, omdat u het cacao-raamwerk nodig hebt om voor iOS te kunnen bouwen, als dit het geval is, moet u eerst het platform aan Cordova toevoegen door de volgende opdracht:
$ ionic cordova platform add ios
U hebt Xcode nodig om te compileren naar een iOS-apparaat.
Voer ten slotte uw app uit met de volgende opdracht:
$ ionic cordova run ios
Uitgevoerd op een Android-apparaat:
De stappen voor Android zijn bijna identiek. Voeg eerst het platform toe:
$ ionic cordova platform add android
Installeer vervolgens de Android SDK waarmee u naar een Android-apparaat kunt compileren. Hoewel de Android SDK wordt geleverd met een emulator, is deze erg traag. Genymotion is veel sneller. Voer na installatie de volgende opdracht uit:
$ ionic cordova run android
En dat is het! Gefeliciteerd met het bouwen van je eerste Ionic 2-app!
Ionic heeft ook live herladen. Dus als u uw app wilt ontwikkelen en wijzigingen live op de emulator / apparaat wilt zien, kunt u dat doen door de volgende opdrachten uit te voeren:
Voor iOS:
$ ionic cordova emulate ios -lcs
Wees voorzichtig, op iOS 9.2.2 werkt de leverbelasting niet. Als u met livereload wilt werken, bewerkt u het bestand config.xml door het volgende toe te voegen:
<allow-navigation href="*"/>
Vervolgens in het <platform name="ios"> :
<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</config-file>
Voor Android:
$ ionic cordova run android -lcs
De l staat voor live-herladen, c voor consolelogboeken en s voor serverlogboeken. Hiermee kunt u zien of er fouten / waarschuwingen zijn tijdens de uitvoering.
Bouwen voor Windows
Als u uw project voor Windows wilt bouwen, moet u op een Windows-computer werken. Installeer eerst het Windows-platform in uw ionic2-project door de volgende opdracht uit te voeren:
$ionic cordova platform add windows
Voer vervolgens de volgende opdracht uit:
$ionic cordova run windows
Uitvoeren in browser
$ionic serve
voor Chrome-browser inspecteer apparaat. (typ adresbalk van Chrome-browser)
chrome://inspect/#devices