针对Ionic-4 > 传送门 [跟着官方示例项目学Ionic-1(blank,tabs)](https://www.jianshu.com/p/0f7698ff1136) [跟着官方示例项目学Ionic-2(tutorial,sidemenu)](https://www.jianshu.com/p/2e4561b72fb4) [跟着官方示例项目学Ionic-3(super)](https://www.jianshu.com/p/70053ea4a961) [跟着官方示例项目学Ionic-4(conference)](https://www.jianshu.com/p/3c5111d7865a) # 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应用。  #### 主组件app.component.ts Super页面的主页面和Tutorial基本一致,都是 加上 . 1. menuClose属性 在页面模板中Button加上了menuClose属性,通过API文档可知,这样在就不需要手动调用 ```js this.menu.close(); ``` 去关闭菜单了. 2. 翻译@ngx-translate集成 Ionic使用的是@ngx-translate实现多语言功能. a. 在AppModule中进行初始化: ```js TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: (createTranslateLoader), deps: [HttpClient] } }), ``` b.在MyApp中进行初始化 ```js 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); }); } ``` 3. 集成IonicStorageModule持久化 ionic提供了IonicStorageModule给应用作为持久化, ```js import { IonicStorageModule, Storage } from '@ionic/storage'; IonicStorageModule.forRoot() ``` 这样初始化后,就初始化了Storage提供器,并传递个setting页面完成设置的持久化保存.  具体使用也很简单,是按照key-value的方式保存在IndexDB中的. 4. Ionic的导航进阶 在tutorial中,页面page都需要被nav跳转所在的页面知晓,这样在调用nav.setRoot()和nav.push()方法时候,就把对应的component传递过去,实现页面的跳转. Ionic在这点上做了改进,自己实现了一套更适应移动端的"面包屑导航", a. [官方IonicPage的API](https://ionicframework.com/docs/api/navigation/IonicPage/) [官方IonicPageModule的API](https://ionicframework.com/docs/api/IonicPageModule/) 通过阅读可知最佳实践是使用@IonicPage+IoncPageModule作为路由的映射器方式进行导航. b. 具体的@IonicPage使用有点类似spirng的IOC,给Page起了个名字,这样具体导航页面时NavController就可以直接根据名字进行了. c. 另外也可以和router一样,支持动态参数如":id",在本工程中并没这么使用,需要传递参数时候,都直接包装在navParams里面传递. #### models、mocks、providers Super工程不仅仅是页面的展示，增加了更为真实的交互，于是有更多的Provider提供器完成具体的服务交互功能。 1. API 对RestAPi的处理，通过angular提供的HttpClient进行交互。（实际并没有example.com提供服务，因此调用都是失败的） 2. Items 相对于一个通用的模型对象，传入一个js对象，就自动包装成对应的Item类，并且使用mock目录的items替换了provider中仅仅是接口说明的items。在app.module.ts中 ···js import { Items } from '../mocks/providers/items'; ··· 3. User 一个模拟用户操作的接口，调用api服务，实现了注册、登录、注销功能，并保存在一个_user状态（前端工程只需要维护一个用户即可） 4. 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 1. TutorialPage使用了 和< 实现引导页的滑动展示,虽然看上去是多页,实际上只有一个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 | 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 | 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 | ```js 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的官方文档 [ Slides- API](https://ionicframework.com/docs/api/components/slides/Slides/) [ Slide- API](https://ionicframework.com/docs/api/components/slides/Slide/) 2. Welcome页面 标准的ionic页面,无特殊. 3. Signup页面 a. 注册功能 调用User完成注册,并且无论成功失败,都进入MainPage. b. ToastController ToastController是Ioinc显示提示功能的控件,[ToastController-API](https://ionicframework.com/docs/api/components/toast/ToastController/) ```js 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(); } ``` 4. Login页面 与Signup页面几乎一样 5. Tabs页面 并无特殊,展示3个子Tab. 6. ListMasterPage、ItemDetailPage、ItemCreatePage页面 a. 通过ModalController展示ItemCreatePage页面 ```js /** * 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插件进行拍照 ```js /** 获取照片 */ 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(); } } ```
