ionic2 常用组件网址: http://ionicframework.com/docs/storage/

 

一: <<Ionic2 项目结构>>

      ./src/index.html 

      src/index.html是app的主入口, 设置脚本和CSS,引导、启动我们的应用。对于app的应用,Ionic在HTML中寻找<ion-app>标签。
 <script src="cordova.js"></script>
 <script src="build/main.js"></script> 包含了Ionic、Angular和App自己的JavaScript的综合文件。

 

 ./src/  在src目录中含有我们原始的未经编译的代码,也是我们编写Ionic 2 APP的主要工作目录。当我们运行 Ionic serve,我们在src目录下的代码编译成浏览器可以理解的正确JavaScript版本。

      src/app/app.module.ts 是我们app的入口点  ,  每个app都有一个根模块控制应用 , 这是我们的app加载的第一个组件,通常这是用于其他组件加载的空壳。在app.component.ts中,我们设置跟组件为src/app/app.component.ts里面MyApp。

示例代码: IonicModule.forRoot(MyApp,{ mode: 'ios', backButtonText: '后退',tabsHideOnSubPages: true}),       IonicModule.forRoot(根组件)  

                IonicStorageModule.forRoot(),                                  

                PipeModule,TabsModule,MeetingModule,BoardroomModule,CreateModule,UserModule                //导入根模块(公共管道模块,tab导航栏模块)   

                entryComponents: [MyApp],             //入口组件(程序首先要展示的页面)

在 [MyApp] 即(app.component.ts文件)中设置 引导页,登录页面,和 tab导航栏的展示设置   (分三种情况:引导页/登录页/自动登录完成后的tab导航页)

 

 二: <<Ionic2 导航控制器>>

ionic2  页面跳转 传递参数 及接 收参数http://ionicframework.com/docs/api/navigation/NavController/

NavController是导航控制器组件的基类    基本用法

跳转及传参:

import { NavController } from 'ionic-angular';   

      class MyComponent {

        constructor(public navCtrl: NavController)  

          //push的方法;  参数传递(第一个是要跳转你的界面  第二个是要传递给另外一个界面的参数)

             this.navCtrl.push(OtherPage, {  id: "123" name: "Carl"  });      

        }

     }

在另外一个界面接收参数:

import { NavParams } from 'ionic-angular';

  class OtherPage {

         constructor(private navParams: NavParams) {

            let id = navParams.get('id');

            let name = navParams.get('name'); 

      }  

}

点击返回(删除当前视图) pop:

import { NavController } from 'ionic-angular';

class OtherPage {

      constructor(public navCtrl: NavController ) }   

       popView(){  this.navCtrl.pop(); }

   }

 

视图的声明周期: 

 

页面事件返回描述
ionViewDidLoad void 页面加载时运行。此事件仅在每个页面创建时发生一次。如果页面离开但被缓存,则此事件将不会在后续查看时再次启动。该ionViewDidLoad事件是放置页面的设置代码的好地方。
ionViewWillEnter void 当页面即将进入并成为活动页面时运行。
ionViewDidEnter void 当页面已完全输入并且现在是活动页面时运行。此事件将触发,无论是第一次加载还是缓存页面。
ionViewWillLeave void 当页面即将离开并且不再是活动页面时运行。
ionViewDidLeave void 当页面完成离开时运行,并且不再是活动页面。
ionViewWillUnload void 当页面即将被销毁并删除其元素时运行。
ionViewCanEnter boolean/Promise<void> 在视图进入之前运行。这可以在认证视图中用作“保护”,您需要在视图输入之前检查权限
ionViewCanLeave boolean/Promise<void> 运行之前视图可以离开。这可以在认证视图中用作“守卫”,您需要在视图离开之前检查权限

 

 

实例成员:

canGoBack();   如果前一页有一个有效的页面 则返回为true

canSwipeBack();  是否可以使用滑动返回,启动的话返回true ,否则返回false

first();        返回此导航控制器堆栈中的第一个视图控制器。

getByIndex(index);   根据索引返回制定的控制器

getActive();  返回活动页面的视图控制器。

getActiveChildNav();   返回活动的子导航。

 

当跳转多层后,此想回到某一控制器的时候:  this.nav.popTo(this.nav.getByIndex(2));

 

 

 

angular2文档规范

 

单一职责(Single responsibility): 对所有的组件、服务等等应用单一职责原则
1. 坚持每个文件只定义一样东西(例如服务或组件)。
例子: 当一个文件, 它来引导应用程序,定义了Hero模型对象,并从服务器加载了英雄 ... 所有都在同一个文件 这样做是不对的. 单组件文件非常容易阅读、维护,并能防止在版本控制系统里与团队冲突. 考虑把文件大小限制在 400 行代码以内。
这时候 可以这么做:
定义一个模型文件app/heroes/shared/hero.model.ts;
定义一个服务文件app/heroes/shared/hero.service.ts; (模仿请求接口,调用仿数据文件里面的具体内容,并返回)
定义一个仿数据文件app/heroes/shared/mock-heroes.ts
最后 定义一个组合文件app/heroes/heroes.component.ts 在这个文件中 将从服务中拿到的数据赋给模型

 

 

简单的函数 (small functions):比如当它只做一件事,只为一个目的 服务时
1.考虑限制在 75 行之内
2.简单的函数一是方便促进代码的重用.其次是易于阅读和维护,可以避免在大函数中产生的隐蔽性错误

 


命名 : 坚持所有符号使用一致的命名规则
使用点和横杠来分隔文件名:
1.在描述性名字中,用横杠来分隔单词
2.使用点来分隔描述性名字和类型
3.遵循先描述组件特性,再描述它的类型的模式,对所有组件使用一致的类型命名规则。推荐的模式为feature.type.ts
4.使用惯用的后缀来描述类型,包括*.service、*.component、*.pipe、.module、.directive。
在符号名后面追加约定的类型后缀(例如.component.ts、.directive.ts、.module.ts、.pipe.ts、.service.ts)。
通过这种形式,快速的识别文件中有什么,利用编辑器或者 IDE 的模糊搜索功能,可以很容易地找到特定文件,
4.1 举例app.component.ts文件中的命名格式:
@Component({ ... })
export class AppComponent { }
4.2举例 heroes.component.ts文件中的命名格式:
@Component({ ... })
export class HeroesComponent { }
4.4举例 user-profile.service.ts文件中类的命名格式:
@Injectable()
export class UserProfileService { }

5.服务名: 为服务的类名加上Service 例如:credit.service.ts

又例如有些词汇显然就是服务,比如那些以“-er”后缀结尾的。比如把记日志的服务命名为Logger就比LoggerService更好些。
像Logger这样的清楚的服务名不需要后缀。

6.把应用的引导程序和平台相关的逻辑放到名为main.ts的文件里,且在引导逻辑中包应含错误处理代码

而应用逻辑应放在组件或服务里,而不是放在main.ts中

把逻辑放到服务里:

在组件中只包含与视图相关的逻辑。所有其它逻辑都应该放到服务中,把可重用的逻辑放到服务中,保持组件简单,聚焦于它们预期目的,当逻辑被放置到服务里,并以函数的形式暴露时,可以被多个组件重复使用。

7.导入语句中的空行(Import line spacing)
在第三方导入和应用导入之间留一个空行 例如:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';

 

import { Hero } from './hero.model';
import { ExceptionService, SpinnerService, ToastService } from '../../core';

 


应用程序结构与 Angular 模块 规范:
1.每个组件、服务和管道都在src文件夹下的自己的文件里. 所有第三方程序包保存到其它目录里,而不是src目录
2.如果组件具有多个伴随文件 (.ts、.html、.css和.spec),就为它创建一个文件夹。组件通常有四个文件 (*.html、 *.css、 *.ts 和 *.spec.ts),它们很容易把一个目录弄乱。
做到能够: 快速定位代码 ,一眼识别代码, 尽量保持扁平结构 ,尝试遵循DRY (Do Not Repeat Yourself, 不重复自己,既没有重复也没有多余的名字)原则

 

应用的根模块 (App root module)
1.在应用的根目录创建一个 Angular 模块(例如/src/app)
2.把根模块命名为app.module.ts 这样定位和识别根模块会变得更容易

 

独立特性模块/功能模块(Feature modules)
1.为应用中每个明显的特性创建一个 Angular 模块
2.把特性模块放在与特性区同名的目录中(例如app/heroes);
3.特性模块的文件名应该能反映出特性区的名字和目录(例如app/heroes/heroes.module.ts)。
4.特性模块的符号名应该能反映出特性区、目录和文件名(例如在app/heroes/heroes.module.ts中定义HeroesModule)。

 

共享特性模块(Shared feature module)
1.在shared目录中创建名叫SharedModule的特性模块(例如在app/shared/shared.module.ts中定义SharedModule)。
2.在共享模块中声明那些可能被特性模块引用的 可复用组件、指令和管道。
3.把可能在整个应用中到处引用的模块命名为SharedModule
4.避免 在共享模块中提供服务。服务通常是单例的,应该在整个应用或一个特定的特性模块中只有一份。
5.在SharedModule中导入所有模块都需要的资源(例如CommonModule和FormsModule)。因为SharedModule中包含的组件、指令和管道可能需要来自其它公共模块的特性(例如来自CommonModule中的ngFor指令).

 

核心特性模块(Core feature module)
1.把那些数量庞大、辅助性的、只用一次的类收集到核心模块中,让特性模块的结构更清晰简明。
2.在core目录下创建一个名叫CoreModule的特性模块(例如在app/core/core.module.ts中定义CoreModule)。
3.把要共享给整个应用的单例服务放进CoreModule中(例如ExceptionService和LoggerService)。
4.导入CoreModule中的资产所需要的全部模块(例如CommonModule和FormsModule)。

 


服务: 服务总是单例的
在同一个注入器内,把服务当做单例使用。用它们来共享数据和功能。

 

 

 

 

 

 

posted @ 2022-07-18 16:26 宝贝-小树 阅读(83) 评论(0) 推荐(0) 编辑
摘要: 微信公众号开发 ——获取微信用户信息 微信公众号提供的微信网页授权获取用户基本信息接口只有认证的微信服务号才有权限。 参考文档:https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html 关于网页授权的两种scope的 阅读全文
posted @ 2022-07-18 16:26 宝贝-小树 阅读(4862) 评论(0) 推荐(0) 编辑
摘要: 一 URL Scheme 的方式 URL Scheme 可以理解成与网址一样的东西. 如果第三方App 注册过URL Scheme(参考注册步骤: https://www.jianshu.com/p/f367b4a5e871) 那么就可以在我们的app中进行简单的配置后进行调用. 然后就会跳转到对应 阅读全文
posted @ 2022-07-18 16:25 宝贝-小树 阅读(257) 评论(0) 推荐(0) 编辑
摘要: 最近需要做Native同js的交互,所以就特意去查找了写资料学习了一下Native同js交互的相关知识。对几种常用的方式做了如下的整理和分析: 一、 Native监听js的alert、confirm、prompt方法 Android端、IOS端均在监听回调中处理alert、confirm或者prom 阅读全文
posted @ 2022-07-18 16:22 宝贝-小树 阅读(378) 评论(0) 推荐(0) 编辑
摘要: 开发规范: 1、多语言目前均采用的中文,防止某些系统异常,即可默认显示中文 2、html中书写规范 2.1 文本标签 <ion-label> {{'开始时间' | translate}} </ion-label> 2.2 组件 <ion-input type="text" [placeholder] 阅读全文
posted @ 2022-07-18 16:20 宝贝-小树 阅读(72) 评论(0) 推荐(0) 编辑
摘要: 尽管现在被称为Angular5,实际上它只是这个诞生于2012年的前端框架 的的第四个版本. 看起来差不多半年就发布一个新版本,不过实际上从重写的版本2开始,开发 接口与核心思想就稳定下来了,并基本保持着与前序版本的兼容性。 我们看官方文档的时候,上面介绍一大堆, 如果你不是深入实践的使用,仅仅去看 阅读全文
posted @ 2022-07-18 16:19 宝贝-小树 阅读(538) 评论(0) 推荐(0) 编辑
摘要: 准备环节 需下载相关软件: Jdk1.8、Android Studio、Visual Studio Code、Flutter SDK、Chrome;(理论上只运行Flutter web项目可以不安装AndroidStudio,但实际未做尝试) FlutterSdk 下载地址:https://flut 阅读全文
posted @ 2022-07-18 15:58 宝贝-小树 阅读(922) 评论(0) 推荐(0) 编辑
摘要: 在开发iOS程序时,有时候需要将时间格式调整成自己希望的格式,这个时候我们可以用NSDateFormatter类来处理。例如: //实例化一个NSDateFormatter对象 NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] ini 阅读全文
posted @ 2017-10-23 14:01 宝贝-小树 阅读(266) 评论(0) 推荐(0) 编辑
摘要: 目录(?)[-] WHAT WHY HOW WHAT 本篇主要是基于Nginx在Mac上搭建自己的服务器。 我相信很多朋友肯定是第一次听到Nginx,关于它具有怎样的传奇,这儿肯定说不完也说不透. 有兴趣的朋友可以自行google或者baidu. WHY 为什么要搭建自己的服务器呢。 好处肯定多多, 阅读全文
posted @ 2017-07-04 11:11 宝贝-小树 阅读(3388) 评论(0) 推荐(0) 编辑
摘要: mac配置h5 cordova *参考: 1、http://blog.csdn.net/zhoushuangjian511/article/details/52312438 2、http://yijiebuyi.com/blog/982b214338ced748f2026aa2dfaf165e.ht 阅读全文
posted @ 2017-07-04 11:05 宝贝-小树 阅读(158) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示