ionic學習(六):問答社群02:登入
阿新 • • 發佈:2018-11-22
1. 在更多頁面新增登入按鈕,並設定樣式
2.設定全域性樣式,將背景改為灰色
在theme中新增檔案light.scss,設定全域性樣式,並在variables.scss中引入light.scss檔案
3.全域性獲取 http 請求的方法
新建provider元件rest:
ionic g provider rest
在rest.ts中新建方法:
import { HttpClient} from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Response} from '@angular/http'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/catch'; /* Generated class for the RestProvider provider. See https://angular.io/guide/dependency-injection for more info on providers and Angular DI. */ @Injectable() export class RestProvider { constructor(public http: HttpClient) { //console.log('Hello RestProvider Provider'); } /** *全域性獲取 http 請求的方法 * * @private * @param {string} url * @returns {Observable<string[]>} * @memberof RestProvider */ private getUrlReturn(url:string):Observable<string[]>{ return this.http.get(url) .map(this.extractDate) .catch(this.handleError); } private extractDate(res:Response){ let body = res.json(); return JSON.parse(body) || {}; } private handleError(error:Response | any){ let errMsg:string; if(error instanceof Response){ const body =error.json() || ''; const err = body.error || JSON.stringify(body); errMsg = `${error.status}-${error.statusText || ''} ${err}`; }else{ errMsg = error.message ? error.message : error.toString(); } console.error(errMsg); return Observable.throw(errMsg); } }
4.點選登入,彈出登入框
新建page: login頁面 並在app.moudle.ts中引入
構造彈窗函式:匯入ModalController
5.頁面佈局
login.html程式碼如下:
顯示如下:
6.取消按鈕的實現
在html頁面中新增點選事件
在ts檔案中實現這個函式
7.登入按鈕的實現
將取到的值傳到ts頁面
實現登入等待:
定義共有檔案baseui.ts
參考資料:https://ionicframework.com/docs/components/#loading
引用類:
8 安裝storge儲存登入的資訊
9 實現登入後頁面跳轉
顯示:
備註:重新整理一下會顯示已登入