在Ionic3中使用 Hprose 客户端

Ionic 是一套以 Angularjs 4 为基础，构建的快速手机App开发框架。用来开发一些对于性能要求不高，不会涉及大量底层硬件操作的简单手机App，可同时支持iOS及Android平台。

一、安装需要的组件

1、安装 brew http://brew.sh

2、你需要安装 Node

brew install node

3、 安装Ionic CLI 命令行工具

npm install -g cordova ionic

二、创建Ionic项目

1、通过命令行创建项目

ionic start Ionic-Hprose tabs

2、启动开发服务

cd Ionic-Hprose && ionic serve

三、添加 Hprose

1、安装Npm版本

npm install --save hprose
npm install --save ajv

2、创建 Hprose Api 服务

ionic generate provider Api

3、编辑 vim src/providers/api/api.ts

import 'rxjs/add/operator/map';

import {Injectable} from '@angular/core';
import hprose from 'hprose';

@Injectable()
export class ApiProvider {

  get(funcName : string) : any {
    let client: any = new hprose.Client.create('http://hprose.com/example/', [funcName]);
    return client;
  }

}

4、 编辑 vim src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Hprose callback</h2>
  <p>
    {{hproseResult}}
  </p>
</ion-content>

5、编辑 vim src/pages/home/home.ts

import { ApiProvider } from './../../providers/api/api';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private hproseResult: string = '';

  constructor(public navCtrl: NavController, private api: ApiProvider) {
    let cli = api.get('hello');
    cli.hello('laoliu', (result) => {
      this.hproseResult = result;
      console.log('Result: ', result);
    }, (name, err) => {
      console.log(name, err);
    });
  }

}

四、查看测试结果

image.png

搞定，收工！