Ionic实战项目-跨平台App开发

功能技术分析
- 读取朋友圈消息状态
- 朋友列表可以列出朋友信息
- 用户中心请求API,实现用户登录。用户信息的读取功能
用户中心模块
- 用户登录状态判断
- 用户登录信息存储
- Ionic App 中处理API请求
APP周边资源
- 启动界面的快速生成技巧
- APP图表
- IOS平台打包发布
- IOS平台打包发布
- 极光推送模块的集成
Ionic的发音：

Ionic的发展
Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。



相关资料：1.Win通用平台概念；2.Ionic官方声明;3.对黑莓APP的支持情况

相关资料：Ionic官网 http://ionicframework.com，Ionic IO:http://ionic.io/, Ionic GitHub,Ionic 中国，Ionic Icons(图标) ngCordova插件

1. 查文档，版本差异
2. 插件示例
3. 官方开发环境：Node.js + Atom + Xcode(IOS,Mac) + (Android Studio) + Genymotion（安卓模拟器）
4. http://ionicframework.com/docs/components/#toast

安装ionic

npm i -g ionic@beta 2.0版本
npm i -g ionic 1.0版本
npm install ionic@2.0.0-beta.22
cnpm install -g ionic@beta (淘宝)
node安装文件夹里面有个文件npmrc,添加配置 registry = http://registry.cnpmjs.org(设置全局的npm从国内源加载)

ionic start ionicdemo --v2

问题：Please install your Cordova CLI to version >=4.2.0 npm install -g cordova
升级
npm install -g [email protected]

D:\HtmlBeginner\ionic>ionic info

Your system information:

Cordova CLI: 6.0.0
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v4.4.3
Xcode version: Not installed

模板资料：

ionic命令是和1.0版本公用的，所以–v2表明使用2.0版本去初始化项目；
此过程主要安装了必要的 npm modules，并且安装依赖的Cordova组件；
小技巧：如果想使用TypeScript，只要在命令后面添加 –ts参数即可

安装成功；

ionic serve 运行项目

根据User-Agent来识别安卓，苹果各种机型

User-Agent:Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Mobile Safari/537.36

Ionic Lab是一个操作ionic的图形软件下载地址，不过最好不要用，因为命令行可以装逼（其实是因为命令行操作更快）

小技巧：在创建ionic新项目之前最好安装cordova组件，因为可以生成platforms，iso和Android的配置页面；由于疏忽，本人就忘记安装了，so，可以在通过命令

ionic platform add android  
ionic platform add ios 

来部署项目，或者

直接执行 ionic run android命令，会帮我们自动生成android项目
同理 ios项目 可直接运行 ionic run ios

苹果Xcode

Android Studio + Genymotion
把android studio和genymotion按好，建立关联，然后点击工具栏中genymotion device manager（安装genymotion插件后生成的红色屏幕小手机图标按钮），运行起来genymotion 模拟器，然后点android studio工具栏绿色箭头按钮（run）就会出来你的genymotion模拟器设备，选择上，并点击ok，选择“Install and continue”或另外一个都可以，你的项目就在genymotion中运行起来了
浏览器ur：http://localhost:8100/?ionicplatform=android或者是ios

所有的编码都是在app里面编写的；
hooks(钩子) 把事件塞进去，然后执行。自动化处理，一般用于比较大的项目中
node_modules 所有的依赖，不说了
platforms安卓和ISO的一些项目文件
plugins里面的也是插件（设备，控制器，白名单，键盘）
resources 安卓和ISO图标
www 网站结构（编译后的项目）
gulp 自动化，监控
config.json 自定义一些固定配置供项目读取
ionic.progect 配合gulp使用
package.json (npm i) ->node_moduleas

生命周期钩子
不同时期暴露不同函数来执行
lonic32之前

// 页面被加载完成后调用的函数，切换页面时并不会进行重新加载，因为有cache的存在  
onPageLoaded() {  
  console.log('page 1: page loaded.');  
}  

// 页面即将进入的时候  
onPageWillEnter() {  
  // 在这里可以做页面初始化的一些事情  
  console.log('page 1: page will enter.');  
}  

// 页面已经进入的时候  
onPageDidEnter() {  
  console.log('page 1: page did enter.');  
}  

// 页面即将离开的时候  
onPageWillLeave() {  
  console.log('page 1: page will leave.');  
}  

// 页面已经离开的时候  
onPageDidLeave() {  
  console.log('page 1: page did leave.');  
}  

// 从 DOM 中移除的时候执行的生命周期  
onPageWillUnload() {  

}  

// 从 DOM 中移除执行完成的时候  
onPageDidUnload() {  

}  

lonic32

事件名称 事件说明
ionViewLoaded 页面加载完毕触发。该事件发生在页面被创建成 DOM 的时候，且仅仅执行一次。如果页面被缓存（Ionic默认是缓存的）就不会再次触发该事件。该事件中可以放置初始化页面的一些事件。
ionViewWillEnter 即将进入一个页面变成当前激活页面的时候执行的事件。
ionViewDidEnter 进入了一个页面且变成了当前的激活页面，该事件不管是第一次进入还是缓存后进入都将执行。
ionViewWillLeave 将要离开了该页面之后变成了不是当前激活页面的时候执行的事件。
ionViewDidLeave 在页面完成了离开该页面并变成了不是当前激活页面的时候执行的事件。
ionViewWillUnload 在页面销毁和页面中有元素移除之前执行的事件。
ionViewDidUnload 在页面销毁和页面中有元素移除之后执行的事件。

1. 因为启用了缓存（cache），所以ionViewDidLoad只会加载一次
2. ionViewWillEnter可以做一些页面初始化的事情
3. ionViewWillUnload 从 Dom中移除的时候执行的生命周期
4. ionViewDieUnload 从Dom中移除执行完成的时候
   http://ionicframework.com/docs/api/navigation/NavController/
   

export class AboutPage {
   

  constructor(public navCtrl: NavController) {
  }

  ionViewDidLoad() {
    console.log("页面加载完毕");
  }
    ionViewWillEnter(){
    console.log("页面即将进入时");
  }
  ionViewDidEnter(){
    console.log("页面进入完成");
  }
  ionViewWillLeave() {
    console.log("页面即将离开");
  }
  ionViewDieLeave() {
    console.log("页面离开完成");
  }
}

Tab控件
1、Tab控件
图标：http://ionicframework.com/docs/v2/ionicons/

tabs.html
<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" tabBadge="4"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon=