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 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')); // 获取参数
}
}

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

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

ViewChild

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

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

ViewController

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

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

UI组件

Button

按钮组件。

Content

ion-content

最基本的内容组件。

SearchBar

搜索框。

1
2
3
4
5
6
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
<ion-list>
<ion-item *ngFor="let item of items">
{{ item }}
</ion-item>
</ion-list>

SearchBar

搜索框。

Tab/Tabs

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

如果每一页都有底部的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

  • ion-tabs 不显示,显示空白或者黑色,或者ion-tabs empty blank:默认的ion-tab[root]属性必须填写,而且不能设置为null

  • SearchBar无法自动设置setFocus(),setFocus() not working临时解决方案:

    1
    2
    3
    setTimeout(()=>{
    self.searchBar.setFocus();
    },100);

haofly wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!