ionic开发环境部署及常用项目结构、组件使用方法介绍

基于AngularJS进行的封装，性能中等。

ionic开发环境部署

ionicapp主要使用命令行进行构建并使用Cordova用来构建和打包。首先安装NodeJs起步网校，然后在ionic官网注册一个账号

1
2
3
4
5
6

npm install -g inoic cordova	# 安装命令行工具
ionic start test				# 创建一个测试项目，期间会提示你登录你的账号
ionic start test tutorial		# 最后一个参数可以新建默认的模板项目，例如tabs表示3个tab的layout(默认选项)，sidemenu、blank、super、tutorial
cd test
git push ionic master			# 初始化项目完成后按照提示进行push操作，push到ionic的控制台里面去
ionic serve						# 自动打开网页，第一个项目能跑起来了

此时可以去ionic的控制台查看该项目的信息以及设置一些自动构建相关配置了。但是目前只能在web端访问，如果想要生成ios或者android平台的项目还需要安装单独的工具:

for ios

1
2
3

xcode-select --install	# 安装xcode命令行工具
npm install -g ios-deploy	# 安装ios部署工具
ionic cordova run ios	# 即可自动打开模拟器

Ionic常用项目结构

基本配置

可以自己创建一个全局的配置文件钓鱼网，类似koa2：

1
2
3
4
5
6
7
8

# vim config/index.ts
export default {
    "option1" : "option1 value"
};

# 使用方法
import Config from '../../../config';
console.log(Config.options1);

API

Controller可以直接在page的构造函数中自动注入，例如

1
2
3
4
5
6
7
8

import { ModalController } from "ionic-angular";

constructor(public modalCtrl: ModalController) {}

createModal() {
    let searchPageModal = self.modalCtrl.create(myPage, {origin: self.origin});
	searchPageModal.present();
}

ModalController

模态框贝语网校，弹出层。

1
2
3
4
5
6
7
8
9

const profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
profileModal.present();	// 展示出来，一般从下方往上滑动

@Component(...)
class Profile {
	constructor(params: NavParams) {	// page之间传递参数
    	console.log('UserId', params.get('usreId'));	// 获取参数
	}             
}

NavController

主要负责导航的controller。包含有如下一些属性

1
2
3

# 生命周期函数(肯定是在page的constructor之后才会触发这些的)
ionViewWillEnter: 进入整个页面将要激活的时候触发
ionViewDidEnter: 当整个页面都载入完成过后并且激活后触发

ViewChild

可以使用@ViewChild获取Nav组件的一个实例。例如

1
2

// html中有
，定义了一个container，可以在ts中这样获取，定义该元素为ElementRef元素。
@ViewChild('container') postContainer: ElementRef;	// ElementRef是Angular的知识，主要用于封装不同平台下视图层中的native元素。ElementRef.nativeElement就可以获取元素本身，之后就可以进行操作了，例如postContainer.naiveElement.style.backgroundColor。可以拿来当做jQuery中的$(this)了

ViewController

视图控制器。可以控制当前页面的显示。

1

this.viewCtrl.dismiss();	// 关闭当前page

按钮组件。

Contention-content

最基本的内容组件。

SearchBar

搜索框。

1
2
3
4
5
6

"getItems($event)">
<ion-list>
  <ion-item *ngFor="let item of items">
    {{ item }}
  ion-item>
ion-list>

搜索框。

标签页，一般是位于页面底部，Tabs内部的元素就是Tab。需要注意的是，只有在控制器里面定义了ion-tab的root页面，页面才会显示，否则不会显示tabs。默认的tab的属性至少填写一个物业经理人一流范文网，不然会空白或者全黑

如果每一页都有底部的tab，最好让app的rootPage直接设置为BasicPage。

AngularJS组件HttpClient网络请求

要发起网络请求，首先去要添加对应的module，在app.module.ts里添加

1
2
3
4
5
6
7
8
9
10
11

import { HttpClientModule } from "@angular/common/http";
@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,	// 这里添加该Module
    IonicModule.forRoot(MyApp)
  ],
})

常用插件推荐TroubleShooting