【Ionic CLI】版本信息如下:
本節學習知識點:
- Ionic 創建模版:【ionic start ionDemo01】,提示如下:
提示需要選擇 js 框架,由於【ionic 4.x】及以後的版本都支持【Angular】【React】【Vue】,所以創建命令如下:
【ionic strat ionDemo01 --type=angular】,提示如下:
【Ionic cli】6.2.1版本提供瞭如上圖中的模版【template】信息,創建項目的時候可以選擇一個模版信息;
- 【tabs】 ==》 具有簡單選項卡式界面的啓動項目;
- 【sidemenu】==》內容區域中帶有導航的側菜單的啓動項目;
- 【blank】==》空白項目/空模版;
- 【list】==》帶有列表的啓動項目;
- 【my-first-app】==》使用圖庫構建相機的示例應用程序;
- 【conference】==》一款 kitchen-sink 應用程序,展示了Ionic提供的所有功能;
此處我們選擇【tabs】模板創建【ionic for angular】項目:【ionic start ionDemo01 tabs --type=angula】
? Create free Ionic account? (y/N) 選擇n,暫時不創建賬號;
繼續按照提示走,進入剛纔創建的項目【ionDemo01】: 【cd ionDemo01】,然後安裝項目依賴:【npm install】
運行項目【ionDemo01】, 【ionic serve】查看項目是否運行成功:
以上就創建好【ionic】的 tabs 模板項目,接下來嘗試裏面的調整:
- 默認模版新增底部導航欄;
- 頁面跳轉及返回;
創建【tabs】模板項目的目錄結構如下,和 ng 類似:
在【ionic for angular】項目中,ionic 模板中的 page 就是 ng 中的 module,然後實現 路由的懶加載方式,模塊工程化應用的體現,繼續完成上面的目標【嘗試調整】。
創建一個tab4頁面,【ionic g page tab4】, 此時就會在【app-routing.module.ts】路由配置裏面動態添加如下配置:
此處我們暫時刪除配置,調整到tab4 頁面/模塊的路由配置中去,調整如下:
然後在tabs的html組件中添加底部菜單欄 => 名稱【tab4】(在【ion-tab-bar】中添加)
保存運行【ionic serve】,顯示如下:【ion-icon】圖標顯示 =》https://ionicons.com/
繼續實現頁面跳轉(和ng類似)和返回,繼續創建一個頁面模塊,【ionic g page naws】,在tab1的html頁面中添加按鈕,點擊跳轉到新聞頁面,然後新聞頁面顯示對應的新聞信息,同時可以返回到tab1;