针对Ionic-4
传送门
跟着官方示例项目学Ionic-1(blank,tabs)
跟着官方示例项目学Ionic-2(tutorial,sidemenu)
跟着官方示例项目学Ionic-3(super)
跟着官方示例项目学Ionic-4(conference)
super 工程
The Ionic Super Starter is a batteries-included starter project for Ionic apps
complete with pre-built pages, providers, and best practices for Ionic
development.
Ionic Super 起步工程是一个拥有最佳开发实践,并且预置了一系列的页面、提供器等相对完整的Ionic应用。
super-starter.png
主组件app.component.ts
Super页面的主页面和Tutorial基本一致,都是<ion-menu>加上<ion-nav>.
- menuClose属性
在页面模板中Button加上了menuClose属性,通过API文档可知,这样在就不需要手动调用
this.menu.close();
去关闭菜单了.
- 翻译@ngx-translate集成
Ionic使用的是@ngx-translate实现多语言功能.
a. 在AppModule中进行初始化:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
}),
b.在MyApp中进行初始化
initTranslate() {
// Set the default language for translation strings, and the current language.
// 默认为英语
this.translate.setDefaultLang('en');
// 读取浏览器的语言设置
const browserLang = this.translate.getBrowserLang();
// 如果能读到,并且是中文,需要特殊处理
if (browserLang) {
if (browserLang === 'zh') {
// 额外读取一个getBrowserCultureLang值
const browserCultureLang = this.translate.getBrowserCultureLang();
// 判断简体还是繁体
if (browserCultureLang.match(/-CN|CHS|Hans/i)) {
this.translate.use('zh-cmn-Hans');
} else if (browserCultureLang.match(/-TW|CHT|Hant/i)) {
this.translate.use('zh-cmn-Hant');
}
} else {
// 其他语言就直接设置
this.translate.use(this.translate.getBrowserLang());
}
} else {
this.translate.use('en'); // Set your language here
}
// 这里是在ts代码中,而非在html模板中取得翻译字符的方法,
this.translate.get(['BACK_BUTTON_TEXT']).subscribe(values => {
this.config.set('ios', 'backButtonText', values.BACK_BUTTON_TEXT);
});
}
- 集成IonicStorageModule持久化
ionic提供了IonicStorageModule给应用作为持久化,
import { IonicStorageModule, Storage } from '@ionic/storage';
IonicStorageModule.forRoot()
这样初始化后,就初始化了Storage提供器,并传递个setting页面完成设置的持久化保存.
storage-module.png
具体使用也很简单,是按照key-value的方式保存在IndexDB中的.
- Ionic的导航进阶
在tutorial中,页面page都需要被nav跳转所在的页面知晓,这样在调用nav.setRoot()和nav.push()方法时候,就把对应的component传递过去,实现页面的跳转.
Ionic在这点上做了改进,自己实现了一套更适应移动端的"面包屑导航",
a.
官方IonicPage的API
官方IonicPageModule的API
通过阅读可知最佳实践是使用@IonicPage+IoncPageModule作为路由的映射器方式进行导航.
b. 具体的@IonicPage使用有点类似spirng的IOC,给Page起了个名字,这样具体导航页面时NavController就可以直接根据名字进行了.
c. 另外也可以和router一样,支持动态参数如":id",在本工程中并没这么使用,需要传递参数时候,都直接包装在navParams里面传递.
models、mocks、providers
Super工程不仅仅是页面的展示，增加了更为真实的交互，于是有更多的Provider提供器完成具体的服务交互功能。
- API
对RestAPi的处理，通过angular提供的HttpClient进行交互。（实际并没有example.com提供服务，因此调用都是失败的） - Items
相对于一个通用的模型对象，传入一个js对象，就自动包装成对应的Item类，并且使用mock目录的items替换了provider中仅仅是接口说明的items。在app.module.ts中
···js
import { Items } from '../mocks/providers/items';
··· - User
一个模拟用户操作的接口，调用api服务，实现了注册、登录、注销功能，并保存在一个_user状态（前端工程只需要维护一个用户即可） - Setting
一个利用@ionic/storage完成简单的设置持久化功能。
页面的跳转流程
主组件指定的FirstRunPage为TutorialPage，在TutorialPage进入WelcomePage，然后进入LoginPage或者SignupPage,
FirstRunPage为TutorialPage
|─── ItemCreatePage
|── LoginPage ──| |─ ListMasterPage ─|---|
| | | | |─── ItemDetailPage
TutorialPage-- WelcomePage -| |---- Tabs ----|─ SearchPage ─|
| | | |
|── SignupPage ──| |── SettingsPage ──|
menu、card、content是游离在导航之外的，只能从menu点击进去。
Pages
- TutorialPage使用了<ion-slides>和<<ion-slide>实现引导页的滑动展示,虽然看上去是多页,实际上只有一个Page.需要注意的是
a. page页面的生命周期
| Page Event | Returns | Description | 描述 |
|---|---|---|---|
| ionViewDidLoad | void | Runs when the page has loaded. This event only happens once per page being created. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewDidLoad event is good place to put your setup code for the page. | |
| ionViewWillEnter | void | Runs when the page is about to enter and become the active page. | |
| ionViewDidEnter | void | Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page. | |
| ionViewWillLeave | void | Runs when the page is about to leave and no longer be the active page. | |
| ionViewDidLeave | void | Runs when the page has finished leaving and is no longer the active page. | |
| ionViewWillUnload | void | Runs when the page is about to be destroyed and have its elements removed. | |
| ionViewCanEnter | boolean/Promise<void> | Runs before the view can enter. This can be used as a sort of "guard" in authenticated views where you need to check permissions before the view can enter | |
| ionViewCanLeave | boolean/Promise<void> | Runs before the view can leave. This can be used as a sort of "guard" in authenticated views where you need to check permissions before the view can leave |
ionViewDidEnter() {
// the root left menu should be disabled on the tutorial page
this.menu.enable(false);
}
ionViewWillLeave() {
// enable the root left menu when leaving the tutorial page
this.menu.enable(true);
}
在进人引导页时候,隐藏菜单;离开时候,显示菜单.
b. slide的官方文档
Welcome页面
标准的ionic页面,无特殊.Signup页面
a. 注册功能
调用User完成注册,并且无论成功失败,都进入MainPage.
b. ToastController
ToastController是Ioinc显示提示功能的控件,ToastController-API
presentToast() {
// 传递参数构造一个toast
let toast = this.toastCtrl.create({
message: 'User was added successfully',
duration: 3000,
position: 'top'
});
// 规定toast消失动作-打印日志
toast.onDidDismiss(() => {
console.log('Dismissed toast');
});
// 展示toast
toast.present();
}
- Login页面
与Signup页面几乎一样 - Tabs页面
并无特殊,展示3个子Tab. - ListMasterPage、ItemDetailPage、ItemCreatePage页面
a. 通过ModalController展示ItemCreatePage页面
/**
* Prompt the user to add a new item. This shows our ItemCreatePage in a
* modal and then adds the new item to our data source if the user created one.
*/
addItem() {
let addModal = this.modalCtrl.create('ItemCreatePage');
addModal.onDidDismiss(item => {
if (item) {
this.items.add(item);
}
})
addModal.present();
}
b. 使用Camera插件进行拍照
/**
获取照片
*/
getPicture() {
if (Camera['installed']()) {
this.camera.getPicture({
destinationType: this.camera.DestinationType.DATA_URL,
targetWidth: 96,
targetHeight: 96
}).then((data) => {
this.form.patchValue({ 'profilePic': 'data:image/jpg;base64,' + data });
}, (err) => {
alert('Unable to take photo');
})
} else {
this.fileInput.nativeElement.click();
}
}
