ionic-framework
Testen der ionischen App in einem Browser
Suche…
Bemerkungen
Das Testen nativer Gerätefunktionen wie Kamera, Vibration und andere, von denen viele in der Dokumentation von Ionic Native zu finden sind , kann nicht im Browser durchgeführt werden. Dies ist eine inhärente Einschränkung der Tatsache, dass Cordova, die Plattform, auf der Ionic auf native Android-, iOS- und Windows Mobile-APIs eines Geräts zugreifen muss, nicht im Browser ausgeführt werden kann.
Sie können dieses Problem umgehen, indem Sie die Funktionalität des nativen Plugins nachahmen.
Beispiel
Hier ein Beispiel, wie das Camera Plugin zu verspotten ist:
Erstellen Sie einen optionalen Ordner in Ihrem Projektstammordner.
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
Öffne camera-mock.ts und füge folgenden Code ein:
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
Als nächstes öffnen Sie src/app.module.ts und importieren die Mock-Klasse "
import { CameraMock } from "../mocks/camera-mock";
Dann fügen Sie es dem Modulanbieter-Array hinzu:
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
CameraMock,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Jetzt können Sie es nach dem Importieren in jeder Komponente verwenden.
Testen in einem Browser
Verwenden Sie ionic serve , um einen lokalen Entwicklungsserver für App-Entwicklung und -Tests zu starten. Dies ist sowohl für das Testen von Desktop-Browsern als auch für das Testen innerhalb eines Geräte-Browsers nützlich, der mit demselben Netzwerk verbunden ist. Außerdem startet dieser Befehl LiveReload, mit dem Änderungen im Dateisystem überwacht werden. Sobald Sie eine Datei speichern, wird der Browser automatisch aktualisiert. Schauen Sie sich die Sass-Dokumente an, wenn Sie möchten, dass die Sass-Dateien des Projekts auch von ionic serve werden.
$ ionic serve [options]
Für Chrome-Browser können Sie Geräte (AVD oder Mobiles) überprüfen. Geben Sie den folgenden Befehl in die Adressleiste des Chrome-Browsers ein.
chrome://inspect/#devices
LiveReload
In der Standardeinstellung für Änderungen in Ihrem beobachtet LiveReload wird www/ Verzeichnis, ohne www/lib/ . Um dies zu ändern, können Sie eine watchPatterns in der ionic.project Datei in Ihrem Projektstammverzeichnis angeben, um bestimmte Änderungen zu überwachen (oder nicht zu überwachen).
{
"name": "myApp",
"app_id": "",
"watchPatterns": [
"www/js/*",
"!www/css/**/*"
]
}
Für eine Referenz auf glob Muster Syntax Besuche Muster Globbing auf der Grunt Website.
Hinweis:
$ ionic setup sass
fügt Ihrer ionic.project Datei eine watchPatterns Eigenschaft mit den Standardwerten ionic.project , die Sie dann zusätzlich zur gulpStartupTasks bearbeiten können, wie in der Sass-Dokumentation beschrieben .
Ionic Lab
Ionic Lab http://ionicframework.com/img/blog/lab.png
Ionic Lab ist eine Funktion auf der Basis von Ionic ionic serve , mit der Sie Ihre App problemlos in einem Telefonrahmen und mit iOS- und Android-Plattformen nebeneinander testen können. Um es zu benutzen, renne einfach
$ ionic serve --lab
Lesen Sie die vollständige Versionsankündigung für alle Details!
Angabe einer zu verwendenden IP-Adresse
Angenommen, Sie möchten angeben, zu welcher Adresse Ihr Browser eine Verbindung herstellen soll, beispielsweise zu Testzwecken oder für externe Benutzer. Geben Sie die Adresse mit dem Argument --address .
$ ionic serve --address 68.54.96.105
Service-Proxies
Der serve Befehl kann einige Proxies an den HTTP - Server hinzuzufügen. Diese Proxys sind nützlich, wenn Sie im Browser entwickeln und Aufrufe an eine externe API vornehmen müssen. Mit dieser Funktion können Sie über den ionischen http-Server eine Proxyanforderung an das externe API anfordern, um zu verhindern, dass No 'Access-Control-Allow-Origin' header is present on the requested resource .
In der ionic.project Datei können Sie eine Eigenschaft mit einem Array von Proxys hinzufügen, die Sie hinzufügen möchten. Die Proxys sind Objekte mit zwei Eigenschaften:
-
path: Zeichenfolge, die mit dem Anfang der eingehenden Anforderungs-URL abgeglichen wird. -
proxyUrl: Eine Zeichenfolge mit der URL, wohin die Proxy-Anforderung gehen soll.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Mit der oben genannten Konfiguration können Sie jetzt Anfragen an Ihren lokalen Server unter http://localhost:8100/v1 , damit er Anforderungen an https://api.instagram.com/v1
Zum Beispiel:
angular.module('starter.controllers', [])
.constant('InstagramApiUrl', '')
// .constant('InstagramApiUrl','https://api.instagram.com')
//In production, make this the real URL
.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {
$scope.feed = null;
$http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) {
console.log('data ' , data)
$scope.feed = data;
})
})
Siehe auch diesen Schwerpunkt für weitere Hilfe.
Befehlszeilenflags / -optionen
[--consolelogs|-c] ...... Print app console logs to Ionic CLI
[--serverlogs|-s] ....... Print dev server logs to Ionic CLI
[--port|-p] ............. Dev server HTTP port (8100 default)
[--livereload-port|-i] .. Live Reload port (35729 default)
[--nobrowser|-b] ........ Disable launching a browser
[--nolivereload|-r] ..... Do not start live reload
[--noproxy|-x] .......... Do not add proxies