ionic开发遇到的坑（1）

其实也不算坑，学习中的几个点记录一下而已。

1.跨域问题

'http://localhost:8100' is therefore not allowed access错误。
这是由于不能跨域访问。
这里就需要Allow-Control-Allow-Origin插件。一键解决。

2.http请求得到的json解析

this.http.get(this.path).subscribe(data => {
      this.listInfo=data.body.resources;
    }, error => {
      console.log(error);
    });

他会提示Object里面没有body这个参数什么的，像这样Typescript Error Property 'body' does not exist on type 'Object'。但是出现这个错误时，有时可以正常运行有时却不能。为了消除这个问题，只好将data赋值给另定义的一个any类型的变量。像这样：

this.http.get(this.path).subscribe(data => {
      let listData:any=data;
      this.listInfo=listData.body.resources;
    }, error => {
      console.log(error);
    });

3.列表

在Angular 1.x中使用ng-repeat，在Angular 2中使用ngFor。
（网上各种教程查出来的有各种版本，写法不一，一开始整不明白，后来才发现要先看看人家用的是版本几的）

<ion-list inset>
      <ion-item *ngFor="let item of listInfo">
        <ion-thumbnail>
          <img src="{{item?.imageUrl}}" class="previewImage">
        </ion-thumbnail>
        <h2>{{item?.title}}</h2>
      </ion-item>
    </ion-list>

其中listInfo就是前面代码里的到的json数组。
（ng-repeat的代码我们就不要管他了）
另外这里有个?.语法，很多教程里没有写到，其实是处理不存在的字段的。

4.打包android apk

使用命令：

ionic cordova build android

成功后会在最后提示完成后的文件的目录位置。

5.本地图片显示

本地图片在浏览器可显示但是发布apk安装到手机上后不显示。
这是目录问题。
如果写成这样：

<ion-img src="../../assets/imgs/th.jpg" class="logo"></ion-img>

就得改成

<ion-img src="assets/imgs/th.jpg" class="logo"></ion-img>

---

相关github地址：https://github.com/codeqian/listPageDemo