Ionic 2基础小结

架构总览

Ionic 2是基于Angular 2的，在它基础上封装了许多mobile常用组件。如果说Angular是一块块不同布料的话，Ionic 就是一件件不同的衣服，T恤、牛仔、帽子、小内内，不同的组件搭配成一套，就是一个完整的APP。一旦涉及到调用mobile底层传感器，cordova就派上用场了，它是链接原生代码和前端代码的桥梁。如启动录音，调用GPS等等。

总体架构图

模块

Ionic 2各个模块之间是相对独立的，各自管理自己模块的数据、逻辑、页面、样式。一个完整模块由以下几个文件组成：

html页面

scss页面样式

ts页面逻辑

//页面标记，用于页面懒加载
@IonicPage() 

//组件配置
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [BOCHttpProvider, UtilProvider]
})

//获取页面元素
@ViewChild('input') inputElm

//监听事件
@HostListener('keydown', ['$event'])
  keyEvent(e) {}

module.ts模块管理

快速添加test模块命令：ionic g page test

Provider

添加@Injectable()注解

• 作为公共的方法类
• 作为网络数据源
• 不同模块之间逻辑协作的事务类
  快速添加命令：ionic g provider testProvider

Cordova插件

使用

1. ionic自带Native插件的使用

#添加组件
cordova plugin add splash-screen
#删除组件
cordova plugin rm splash-screen

// 使用
import { SplashScreen } from '@ionic-native/splash-screen';

2.第三方组件的使用

#本地组件
cordova plugin add path/to/plugin
#github组件
cordova plugin add url.git

插件根目录下plugin.xml定义的基本配置。js-module标签对应的name会在全局注入变量，这里是MyPlugin。

<platform name = "android">
        <js-module name="MyPlugin" src="www/cordova-plugin-MyPlugin.js">
            <clobbers target="MyPlugin" />
        </js-module>
</platform>

在ts文件定义一个变量，就可以使用了。

declare var MyPlugin: any;

如果需要在应用启动时调用，记得判断它的ready状态。只用ready的时候，插件才能正常使用。

platform.ready().then(() => MyPlugin.doSomethingWithPlugin(success, error, "MyClass", "MyFunction", ["param"]));

插件的方法可以在www目录下的js文件中找到。

//插件www目录下定义的与原始代码通信的API
//使用
var exec = require('cordova/exec');

module.exports = {
    // success 成功回调，error失败回调， service类名， action方法名， params传入数组参数
    doSomethingWithPlugin: function(success, error, service, action, params){
        // do something when resulting from native code
    }
}