在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
