混合APP开发基础——以ionic为例

最新推荐文章于 2024-07-27 15:06:21 发布

原创最新推荐文章于 2024-07-27 15:06:21 发布 · 925 阅读

0 ·

CC 4.0 BY-SA版权

ionic 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个在Ionic 3应用中常见的错误——刷新时报readECONNRESET错误的解决方案，包括删除并重新安装特定模块的过程，同时分享了关于自定义样式及REST服务提供商组件的配置方法。

报错内容
ionic3 一刷新就报此错误

events.js:136
throw er; // Unhandled 'error' event
^

Error: read ECONNRESET
at _errnoException (util.js:999:13)
at TCP.onread (net.js:629:25)

解决方案
删除node_module文件中的ws文件
然后重新安装

npm install ws@3.3.2

快速生成页面命令——ionic generate（简写成ionic g）

APP 文件夹包含了全局所有组件的定义

引入全局自定义样式
在variables.scss文件夹中，增加一行代码

//导入自定义样式
@import "light";   //light 文件名

引入单一页面的样式
在自身文件的scss文件中加入

注意：全局样式对组件的影响

rest文件

创建
ionic g——provider——rest

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Rx'
import { Http, Response } from '@angular/http';
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 {(Response | any)} error 
   * @returns 
   * @memberof RestProvider
   */
  private getUrlReturn(url: string): Observable<string[]> {
    return this.http.get(url)
      .map(this.extractData)
      .catch(this.handleError)
  }

  private extractData(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);


  }

}