开发记录--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