架構(gòu)總覽
Ionic 2是基于Angular 2的，在它基礎(chǔ)上封裝了許多mobile常用組件。如果說Angular是一塊塊不同布料的話，Ionic 就是一件件不同的衣服，T恤、牛仔、帽子、小內(nèi)內(nèi)，不同的組件搭配成一套，就是一個完整的APP。一旦涉及到調(diào)用mobile底層傳感器，cordova就派上用場了，它是鏈接原生代碼和前端代碼的橋梁。如啟動錄音，調(diào)用GPS等等。
總體架構(gòu)圖
模塊
Ionic 2各個模塊之間是相對獨立的，各自管理自己模塊的數(shù)據(jù)、邏輯、頁面、樣式。一個完整模塊由以下幾個文件組成：
html頁面
scss頁面樣式
ts頁面邏輯
//頁面標(biāo)記，用于頁面懶加載
@IonicPage()
//組件配置
@Component({
selector: 'page-home',
templateUrl: 'home.html',
providers: [BOCHttpProvider, UtilProvider]
})
//獲取頁面元素
@ViewChild('input') inputElm
//監(jiān)聽事件
@HostListener('keydown', ['$event'])
keyEvent(e) {}
module.ts模塊管理
快速添加test模塊命令：ionic g page test
Provider
添加@Injectable()注解
- 作為公共的方法類
- 作為網(wǎng)絡(luò)數(shù)據(jù)源
- 不同模塊之間邏輯協(xié)作的事務(wù)類
快速添加命令：ionic g provider testProvider
Cordova插件
使用
- 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標(biāo)簽對應(yīng)的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;
如果需要在應(yīng)用啟動時調(diào)用，記得判斷它的ready狀態(tài)。只用ready的時候，插件才能正常使用。
platform.ready().then(() => MyPlugin.doSomethingWithPlugin(success, error, "MyClass", "MyFunction", ["param"]));
插件的方法可以在www目錄下的js文件中找到。
//插件www目錄下定義的與原始代碼通信的API
//使用
var exec = require('cordova/exec');
module.exports = {
// success 成功回調(diào)，error失敗回調(diào)， service類名， action方法名， params傳入數(shù)組參數(shù)
doSomethingWithPlugin: function(success, error, service, action, params){
// do something when resulting from native code
}
}
