ionic-framework
Testa jonisk app i en webbläsare
Sök…
Anmärkningar
Testning av inbyggda enhetsfunktioner som Kamera, Vibration och andra, av vilka många finns i dokumentationen till Ionic Native , kan inte göras i webbläsaren. Detta är en inneboende begränsning av det faktum att Cordova, den plattform som Ionic beror på för att kunna komma åt ursprungliga API: er för Android, iOS och Windows Mobile, inte kan köras i webbläsaren.
Man kan lösa problemet genom att håna funktionaliteten för det inbyggda plugin-programmet.
Exempel
Här är ett exempel på hur man kan håna Camera plugin:
Gå vidare och skapa en valfri mapp i din projektrotmapp.
cd src
mkdir mocks
cd mocks
touch camera-mock.ts
Öppna camera-mock.ts och kopiera klistra in följande kod:
export class CameraMock {
getPicture(params) {
return new Promise((resolve, reject) => {
resolve("BASE_64_IMAGE_DATA");
});
}
}
src/app.module.ts och importera mock-klassen "
import { CameraMock } from "../mocks/camera-mock";
Lägg sedan till den i modulleverantörens array:
@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 {}
Nu kan du använda den i valfri komponent efter att du har importerat den.
Testa i en webbläsare
Använd ionic serve att starta en lokal utvecklingsserver för app-dev och testning. Detta är användbart för både testning av stationär webbläsare och för att testa i en enhetens webbläsare som är ansluten till samma nätverk. Dessutom startar detta kommando LiveReload som används för att övervaka ändringar i filsystemet. Så snart du sparar en fil uppdateras webbläsaren automatiskt. Ta en titt på Sass-dokumenten om du också vill ha ionic serve titta på projektets Sass-filer.
$ ionic serve [options]
För Chrome-webbläsare kan du inspektera enheter (AVD eller Mobiles), skriv följande kommando i adressfältet i Chrome-webbläsaren.
chrome://inspect/#devices
LiveReload
Som standard kommer LiveReload att leta efter ändringar i din www/ katalog, exklusive www/lib/ . För att ändra detta kan du ange en watchPatterns egenskap i filen ionic.project finns i projektroten för att titta på (eller inte titta på) för specifika ändringar.
{
"name": "myApp",
"app_id": "",
"watchPatterns": [
"www/js/*",
"!www/css/**/*"
]
}
För en referens om globalt mönster syntax, kolla globbing mönster på Grunt webbplats.
Notera:
$ ionic setup sass
lägger till en watchPatterns behörighet med standardvärdena till din ionic.project fil som du sedan kan redigera, utöver egenskapen gulpStartupTasks som beskrivs i Sass-dokumentationen .
Ionic Lab
Ionic Lab http://ionicframework.com/img/blog/lab.png
Ionic Lab är en funktion ovanpå ionic serve som gör det enkelt att testa din app i en telefonram och med iOS- och Android-plattformar sida vid sida. För att använda det, bara köra
$ ionic serve --lab
Läs tillkännagivandet för full release för alla detaljer!
Ange en IP-adress som ska användas
Säg att du vill ange vilken adress din webbläsare kommer att ansluta till, säger för testning eller externa användare. Ange adressen med argumentet - --address .
$ ionic serve --address 68.54.96.105
Serviceproxies
serve kan lägga till några proxyservrar till http-servern. Dessa proxyservrar är användbara om du utvecklar i webbläsaren och du måste ringa till ett externt API. Med den här funktionen kan du proxyförfråga till den externa apien via den joniska http-servern för att förhindra att No 'Access-Control-Allow-Origin' header is present on the requested resource resursfelet.
I filen ionic.project du lägga till en egenskap med en rad proxyer du vill lägga till. Proxyerna är objekt med två egenskaper:
-
path: sträng som kommer att matchas mot början av den inkommande webbadressen. -
proxyUrl: en sträng med url till var den proxyerade begäran ska gå.
{
"name": "appname",
"email": "",
"app_id": "",
"proxies": [
{
"path": "/v1",
"proxyUrl": "https://api.instagram.com/v1"
}
]
}
Med hjälp av ovanstående konfiguration kan du nu göra förfrågningar till din lokala server på http://localhost:8100/v1 att få den till en proxy-ut begäran till https://api.instagram.com/v1
Till exempel:
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;
})
})
Se även denna avgift för mer hjälp.
Kommandoradflaggor / alternativ
[--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