開發記錄--NG-ZORRO、Jsonp、BaiduMap

簡介

NG-ZORRO的layout佈局、手機和pc端不一樣佈局的策略、angular5架構下使用Jsonp的過程當中相關問題、angualr5架構下的百度地圖api使用記錄。

NG-ZORRO Install

版本0.6.x，當前支持 Angular ^5.0.0 版本，查看文檔

$ npm install ng-zorro-antd --save

NG-ZORRO 使用記錄

Layout 佈局

電腦頁面使用下面的佈局：

手機頁面使用下面的佈局：

因爲不想調整樣式，因此配合bootstrap.css一塊兒使用.

手機端與pc端不一樣佈局策略

考慮過響應式佈局，但要寫不少css的媒體查詢，直接使用bootstrap有時沒法獲得本身想要的效果，因此最終決定使用下面的策略。

編寫一個service，在其中編寫一個方法來判斷請求來自手機仍是pc，主要使用request中帶的userAgent，代碼以下：

isMobilef() {
    const ua = navigator.userAgent;
    const isAndroid = /Android/i.test(ua);
    const isBlackBerry = /BlackBerry/i.test(ua);
    const isWindowPhone = /IEMobile/i.test(ua);
    const isIOS = /iPhone|iPad|iPod/i.test(ua);
    const isM = /Mobile/i.test(ua);
    const isMobile = isM || isAndroid || isBlackBerry || isWindowPhone || isIOS;
    return isMobile;
  }
複製代碼

代碼是借鑑的網上的，感受寫的有點醜陋，我記得之前看見過一行正則表達式就解決的，但願你們在評論中指點一下。

在constructor方法中編寫以下代碼：

isMobile = false;
isCollapsed = false;

constructor(private endkindservice: EndkindService) {
    console.log(navigator.userAgent);
    this.isMobile = this.endkindservice.isMobilef();
    console.log(this.isMobile);
}
複製代碼

每次加載頁面都會判斷是手機仍是pc，配合angular的*ngif指令進行佈局。

Jsonp在Angular5中的使用

angular5之後將http相關的功能封裝到了@angular/common/http包中，通常的網絡請求使用HttpClientModule, HttpClientJsonpModule這兩個模塊便可。

關鍵代碼：

app.module.ts

...
import {HttpClientModule, HttpClientJsonpModule} from '@angular/common/http';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    HttpClientModule,
    HttpClientJsonpModule,
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

複製代碼

data.service.ts

...
constructor(private http: HttpClient) {
}
...
public getData(): Promise<any> {
    const url = '';
    return this.http.jsonp(url, 'callback').toPromise().then(res => {
      return res;
    });
}
複製代碼

angular5架構下使用百度地圖

文檔

代碼記錄

//.html，在外面套一層，固定外面一層的大小
<nz-content>
  <baidu-map [options]="opts">
    <marker *ngFor="let marker of markers; index as i" [point]="marker.point" [options]="marker.options" (clicked)="showWindow($event,i)"></marker>
    <control type="navigation" [options]="controlOpts"></control>
    <control type="overviewmap" [options]="overviewmapOpts"></control>
    <control type="scale" [options]="scaleOpts"></control>
    <control type="maptype" [options]="mapTypeOpts"></control>
  </baidu-map>
</nz-content>

//.css,高度100%
nz-content{
  background-color: #fff;
  width: 100%;
  position: absolute;
  top: 48px;
  bottom: 0px;
  left: 0px;
}

複製代碼

github種子項目（angular5，NG-ZORRO，HttpClient）

github.com/yanweian/seed