架構(gòu)總覽
Ionic 2是基于Angular 2的，在它基礎(chǔ)上封裝了許多mobile常用組件冰蘑。如果說Angular是一塊塊不同布料的話和泌，Ionic 就是一件件不同的衣服，T恤祠肥、牛仔武氓、帽子、小內(nèi)內(nèi)仇箱，不同的組件搭配成一套县恕，就是一個(gè)完整的APP。一旦涉及到調(diào)用mobile底層傳感器剂桥，cordova就派上用場(chǎng)了弱睦，它是鏈接原生代碼和前端代碼的橋梁。如啟動(dòng)錄音渊额，調(diào)用GPS等等况木。
總體架構(gòu)圖
模塊
Ionic 2各個(gè)模塊之間是相對(duì)獨(dú)立的，各自管理自己模塊的數(shù)據(jù)旬迹、邏輯火惊、頁面、樣式奔垦。一個(gè)完整模塊由以下幾個(gè)文件組成：
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)簽對(duì)應(yīng)的name會(huì)在全局注入變量椿猎，這里是MyPlugin惶岭。
<platform name = "android">
<js-module name="MyPlugin" src="www/cordova-plugin-MyPlugin.js">
<clobbers target="MyPlugin" />
</js-module>
</platform>
在ts文件定義一個(gè)變量，就可以使用了犯眠。
declare var MyPlugin: any;
如果需要在應(yīng)用啟動(dòng)時(shí)調(diào)用按灶，記得判斷它的ready狀態(tài)。只用ready的時(shí)候筐咧，插件才能正常使用鸯旁。
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
}
}
