ionic 開發實例

一、ionic初始化項目

1：安裝ionic

npm install -g ionic

2:初始化項目框架

我們可以用命令創建一個應用程序，可以使用我們的一個現成的應用程序模板，或一個空白模板。 傳送門

ionic start myApp tabs

3:運行

進入項目文件夾，運行項目

cd ionicDemo
ionic serve

4:頁面實測

運行在localhost:8100。谷歌瀏覽器中我們切換機型可以看到不同的樣式。 這是因為在network下的localhost請求里，有User-Agent識別不同的設備。

 

二、使用ionic Lab進行開發和測試  

可以在windows環境下進行圖形界面開發（Create, build, test, and deploy Ionic apps） 下載地址   百度雲分享   

 

三、ionic 基礎概念

1：項目結構介紹

app文件夾： 項目的編碼文件。

node_modules： npm管理的依賴包。

resources： app的圖標和啟動圖片。

plugins： 插件包（可在ionic Lab中點擊安裝）。

www： 編譯好可在瀏覽器運行的文件。

config.xml： 項目全局配置。

 

四、ionic組件

1：ionic頁面生命周期（常用）  官網文檔

Event	Desc
ionViewDidLoad	當頁面加載的時候觸發，僅在頁面創建的時候觸發一次，如果被緩存了，那么下次再打開這個頁面則不會觸發
ionViewWillEnter	顧名思義，當將要進入頁面時觸發
ionViewDidEnter	當進入頁面時觸發
ionViewWillLeave	當將要從頁面離開時觸發
ionViewDidLeave	離開頁面時觸發
ionViewWillUnload	當頁面將要銷毀同時頁面上元素移除時觸發