下载指定github路径的插件:npm install https://github.com/snowyu/MQTT.js.git --save
ionic安装指定版本: npm install -g ionic@3.12.0
ionic安装最新版本: npm install -g ionic@latest
安装完成后,查看版本的命令是ionic -v
如果你需要提问或者查看完整的系统版本信息, 命令是 ionic info, 可以帮助别人快速的帮你排除问题.

进入到某个目录下:cd /Volumes/工作和视频/Ionic

创建一个04-01的文件夹: mkdir 04-01

进到这个目录:ls

①.项目的初始化构建 : npm install -g cordova ionic,可以@3.12.0指定版本

②.Start an App: ionic start myApp blank 或者 ionic start myApp tabs 再或者 ionic start myApp sidemenu,

主要看app的页面组成,具体请参考官网

③.Run your App: ionic serve

④.生成iOS代码:sudo ionic cordova platform add ios

ios的运行在xcode需要权限,故可退到工程所在的目录上一级,给工程的文件夹添加权限:sudo chmod -R 777 platforms

⑤.添加生成各平台代码:

Android代码:sudo ionic cordova platform add android
iOS代码:sudo ionic cordova platform add ios
浏览器代码:sudo ionic cordova platform add browser

⑥.ionic打包同时生成安卓和iOS平台:sudo ionic build

打包生成浏览器的代码:sudo ionic cordova build browser

⑦.android 命令行打包生成 apk 文件: ionic cordova build android, 不过还是推荐使用Android Studio进行打包.

生成文件

生成文件:ionic g

然后选择类型:比如,page等

然后输入起的名字:xxx

也可以连起来写:ionic g page xxx

支持的设备

• IonicView手机端演示用
• Ionic iOS最低支持iOS9
• VSCode 代码快速格式化快捷键(Mac): Shift + Option + F

笔记

• instanceof判断是不是某一类型

 // 判断错误是不是 Response类型
 if (error instanceof Response) {

 }

• 强制刷新浏览器: shif + cmd + R
• storage的使用:Storage使用文档

npm install --save @ionic/storage

存:

storage.set('name', 'Max');

取:

storage.get('age').then((val) => {
    console.log('Your age is', val);
});

删除:

this.storage.remove('UserId');

• ionic的生命周期文档
  

  ionic的生命周期

• 导航push和pop

this.navCtrl.push(RegisterPage);

this.navCtrl.pop();

• 注册登录时候,去除前端头像的缓存

this.rest.getUserInfo(val)
     .subscribe(
        userinfo => {
           this.userinfo = userinfo;
          // 防止头像有缓存，给头像url加一个时间后缀,去除缓存
          this.headface = userinfo['UserHeadFace'] + "?" + (new Date()).valueOf();
       }
     )

• Modal (模态)

  showModal() {
    let modal = this.modalCtrl.create(LoginPage);
    // 关闭后的回调
    modal.onDidDismiss(()=>{
      this.loadUserPage();
    })
    modal.present();
  }

• 上传头像(相册)需要安装的插件

sudo npm install --save @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer

sudo ionic cordova plugin add cordova-plugin-camera --save

sudo ionic cordova plugin add cordova-plugin-file --save

sudo ionic cordova plugin add cordova-plugin-file-transfer --save

sudo ionic cordova plugin add cordova-plugin-filepath --save

• 判断是否是安卓平台

if (this.platform.is('android')) {

}

• 获取时间

var d = new Date(),
    n = d.getTime(),

• js中substring和substr的用法

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置，从零开始的索引

参数     描述
start     必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop     可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。
如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。
如果 start 或 end 为负数，那么它将被替换为 0。

2.substr 方法

定义和用法

substr 方法用于返回一个从指定位置开始的指定长度的子字符串。

语法

stringObject.substr(start [, length ])

参数    描述
start   必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length 可选。在返回的子字符串中应包括的字符个数。

说明

如果start为负数，则start=str.length+start。

如果 length 为 0 或负数，将返回一个空字符串。
如果没有指定该参数，则子字符串将延续到stringObject的最后。

举例：
var str = "0123456789";

alert(str.substring(0));------------"0123456789"
alert(str.substring(5));------------"56789"
alert(str.substring(10));-----------""
alert(str.substring(12));-----------""
alert(str.substring(-5));-----------"0123456789"
alert(str.substring(-10));----------"0123456789"
alert(str.substring(-12));----------"0123456789"
alert(str.substring(0,5));----------"01234"
alert(str.substring(0,10));---------"0123456789"
alert(str.substring(0,12));---------"0123456789"
alert(str.substring(2,0));----------"01"
alert(str.substring(2,2));----------""
alert(str.substring(2,5));----------"234"
alert(str.substring(2,12));---------"23456789"
alert(str.substring(2,-2));---------"01"
alert(str.substring(-1,5));---------"01234"
alert(str.substring(-1,-5));--------""

alert(str.substr(0));---------------"0123456789"
alert(str.substr(5));---------------"56789"
alert(str.substr(10));--------------""
alert(str.substr(12));--------------""
alert(str.substr(-5));--------------"56789"
alert(str.substr(-10));-------------"0123456789"
alert(str.substr(-12));-------------"0123456789"
alert(str.substr(0,5));-------------"01234"
alert(str.substr(0,10));------------"0123456789"
alert(str.substr(0,12));------------"0123456789"
alert(str.substr(2,0));-------------""
alert(str.substr(2,2));-------------"23"
alert(str.substr(2,5));-------------"23456"
alert(str.substr(2,12));------------"23456789"
alert(str.substr(2,-2));------------""
alert(str.substr(-1,5));------------"9"
alert(str.substr(-1,-5));-----------""   

[http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html](http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html)

• lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
• div的点击使用tap
tap : 一般作用于不是 button 的元素的点击事件的绑定，不然你绑定 click 事件会不生效。

<div (tap)="gotoQuestion()">
     <ion-icon name="create"></ion-icon> 提问
</div>

• ionic里面系统颜色定义
  

  ionic 里面系统颜色定义

• 更多号: <ion-icon class="more_button" name="more"></ion-icon>
  

  ionic 更多号

• 从页面内跳转到指定的tab

  selectTab(index: number) {
    var tabs: Tabs = this.navCtrl.parent;
    tabs.select(index);
  }

• 读取可空对象:{{question?.Content}} 加?号
• button灰掉,且不能点击[disabled] = true即可

<button ion-button small [disabled]="isMyQuestion" (click)="showAnswerPage()">
        <ion-icon name="add"></ion-icon>&nbsp;回答
</button>

• 默认选择tab的方法
  在tabs.html文件中设置

// 设置默认选中 第一个 发现页面
<ion-tabs selectedIndex="1">
  <ion-tab [root]="tabHome" tabTitle="首页" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tabDiscovery" tabTitle="发现" tabIcon="navigate"></ion-tab>
  <ion-tab [root]="tabChat" tabTitle="聊天" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tabNotification" tabTitle="通知" tabIcon="notifications"></ion-tab>
  <ion-tab [root]="tabMore" tabTitle="更多" tabIcon="menu"></ion-tab>
</ion-tabs>

• navPush 页面跳转,除了使用导航的push方法外,还可以使用navPush 文档
  [navPush]="ChatdetailsPage" 要跳转的页面
  [navParams]="userinfo"要传递的参数

<ion-list>
    <ion-item [navPush]="ChatdetailsPage" [navParams]="userinfo">
      <ion-avatar item-left>
        <img src="http://img.mukewang.com/user/57a322f00001e4ae02560256-40-40.jpg">
      </ion-avatar>
      <h2>慕女神</h2>
      <p>给大家演示聊天组件的开发</p>
    </ion-item>
  </ion-list>

其中userinfo中存储的数据为

this.userinfo = {
   userid: '111222333',
   username: '江小白'
}

在ChatdetailsPage页面获取导航传递过来的参数

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.chatUserName = navParams.get('username');
    console.log(navParams.get('username'));
  }

• ionic 项目里面
  1rem = 10px
  在main.css里面已经默认设置了

  html {
    width: 100%;
    height: 100%;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  

• split()分割字符串
  let array = EMOJIS.split(' ');

• Math.ceil()向上取整

• array.slice(start,end)
  返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

• ViewChild文档

• const id = Date.now().toString(); 获取当前的时间并转成字符串

• 数组 findIndex()

    // 找到条件相符的元素的索引
    private getMessageIndex(id: string) {
      return this.messageList.findIndex((e) => e.messageId === id);
    }
  

• Events 文档
  Events is a publish-subscribe style event system for sending and responding to application-level events across your app.
  1.发送消息:
  this.event.publish('chat.received', messageSend, Date.now());
  2.订阅消息

  // 听取消息的发布, 订阅
  this.event.subscribe('chat.received', (msg, time) => {
    this.messageList.push(msg);
  })
  

  3.离开订阅页面时,应取消订阅

  // 离开页面时, 取消订阅
  ionViewWillLeave() {
    this.event.unsubscribe('chat.received');
  }
  

• 如何在TypeScript项目中引入JavaScript的包?
  使用import *as引入

  import *as moment from 'moment';
  

• loading.dismissAll();

  有时候使用loading.dismiss(); ionic会报view不能隐藏,所以这时候使大招loading.dismissAll();完美解决!

• ngAfterContentInit() 组件里没有ionic生命周期的函数定义,所以他使用的Angular的生命周期.
  可以参考ionic官方定义的组件实现原理 -- 组件button的实现

• switch语法

  switch (this.dataType) {
        case 'question':
          this.title = '我的提问';
          break;
        case 'answer':
          this.title = '我的回答';
          break;
        case 'favourite':
          this.title = '我的关注';
          break;
  }
  

• 桌面图标的生成
  ①.拷贝一张1024*1024的icon到工程resources目录下,并命名为icon.png;
  

  命名为icon.png
  ②.执行命令sudo ionic cordova resources 自动生成android/ ios所需要的图标.

• app启动图的生成
  ①. 准备一张2732*2732的图片到工程resources目录下,并命名为splash.png;
  ②.再次执行命令:sudo ionic cordova resources .

当然 也可以将icon图片和启动图同时放到工程resources目录下,执行命令 sudo ionic cordova resources

• ionic 使用jsonp网络请求注意事项

  jsonp请求后面务必需要拼接上&callback=JSONP_CALLBACK,不然无法访问到数据

  requestContent(aid){

    //  http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=30

    var url='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid+'&callback=JSONP_CALLBACK';
    this.jsonp.get(url).subscribe((data)=>{
        console.log(data);

        this.list=data['_body'].result[0];

        console.log(this.list);
    },function(err){


    })

  }

• ionic中显示 从服务器传过来的 标签内容

  <div [innerHTML]='list.content'></div>
  

• 导航条返回按钮的设置以及push时隐藏底部tabbar

  IonicModule.forRoot(MyApp,{
     tabsHideOnSubPages: 'true', //隐藏全部子页面 tabs
     backButtonText: '返回' /*配置返回按钮*/
  })
  

• 设置导航条背景颜色

<ion-header>
  <ion-navbar color="primary">
    <ion-title>首页</ion-title>
  </ion-navbar>
</ion-header>

设置导航条背景颜色