ionic3.x腳手架(基於我的項目自用)

ionic3項目開發腳手架（基於我的練習項目）

 

一．    基於ionic3的生產環境搭建

1. 1.    配置安卓SDK：

 安裝jdk  ---》  安裝AndroidSDK

 

（1）      安裝jdk（無須配置環境變量）（版本推薦1.8.0_162）

下載連接：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

檢查是否安裝成功

 

 

（2）      安裝Android SDK（版本-v 25.2.5 ，對應Android 7.1）

Android SDK Manager下載地址：http://www.androiddevtools.cn/

下載後進入安裝工具頁面，勾選以下

 

 

 

 

Tip：當前Android版本並不是是市場佔有率最高的版本 如有版本對應和兼容問題請參考https://blog.csdn.net/u010825468/article/details/78909550

 

1. 2.    node.js環境搭建

（1）安裝node.js ---》安裝cordovaà安裝ionicà運行第一個項目  ---》打包apk

（2）node.js版本爲v8.11.1；下載地址：https://nodejs.org/en/download/

安裝完成後會自動安裝好npm包管理工具，在命令行輸入如下指令則表示安裝成功：

 　　

 

（3）安裝cordova（版本6.5.0）

        

         

（4）安裝ionic（版本3.20.0）

        

　　

 

         tip：推薦使用淘寶鏡像cnmp安裝加快速度，具體參考博客：

                 https://www.cnblogs.com/chenglu/p/8608121.html

3. 使用工具

       （1）Visual Studio Code 2017或以上版本（DW，Webstorm，HBuild皆可）

             

       （2）Git中的Gitbash工具，主要用於方便命令行操做cordova和ionic指令

（運行ionic項目需經過命令行窗口cd到項目目錄中，若是使用gitbash工具可直接在項目目錄中右鍵點擊gitbash打開命令行窗口cd到當前目錄，提高工做效率）

-

二．    ionic3的第三方插件引入

1. 1.     高德地圖（JavaScript API V1.4.X）

申請密鑰key à在src目錄下的index.html中引入 à在所需頁面使用

具體方法見高德地圖API：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show.

 

 

 

 

1. 2.   百度地圖（JavaScript API v3.0）

申請密鑰key à在src目錄下的index.html中引入 à在所需頁面使用

具體方法見百度地圖API：http://lbsyun.baidu.com/index.php?title=jspopular/guide/show.

 

三．    服務器數據調用

1．有後臺數據的狀況下使用數據請求方法便可，具體見下文數據請求方法

2 . 無後臺數據的狀況下使用Mockjs模擬數據（生成隨機數據，攔截 Ajax 請求；先後端分離技術）

使用方法：在src目錄下的index.html中引入

<script src=’http://mockjs.com/dist/mock.js’></script>

 

 

而後在所需頁面ts文件中的@component上方聲明：declare let Mock：any；

 

 

詳情見文檔：http://mockjs.com/

四．    ionic3項目開發過程關鍵技術

1. 1.   組件加載方式

推薦使用ionic3新特性，採用懶加載的方式避免代碼冗餘，加載速度過慢等問題；

其次是使用傳統import注入的方法，這樣可能致使的問題是頁面引入來引入去形成混亂

使用方法參考：https://blog.csdn.net/qq_32107121/article/details/78453242

1. 2.   頁面跳轉方式

一是經過NavController實現路由跳轉，路由傳值

二是經過navPush屬性實現路由跳轉傳值（此種方式代碼較爲簡潔）

兩種方式在ionic3.x中均已在constructor構造函數中引入，無需本身手動引入

1. 3.   數據請求方法和封裝

（1）         HttpModule方法（異步）

（2）         HttpClientModule方法（異步）（相對於上面的方法更加簡單）

（3）         三種處理異步代碼的方式

①    Subscribe（），

②    Promise（），

③    Observable（），

參考：https://www.jianshu.com/p/3ad54d7d1077

（4）           通用封裝請參考：http://www.javashuo.com/article/p-zjyvfudo-dt.html.

https://www.jianshu.com/p/a9f8f6efdaa6.

（5）             本項目中封裝的數據請求方法以下（由於該項目中請求數據都是針對項目特色統一用的get（）方法，因此該封裝僅供參考）

 

1. 4.   全局變量的定義和使用

（1）   在src目錄下的app目錄下建立app.config.ts文件，而且在其中定義全局變量：

 

（2）   在所需頁面ts文件中引入

 

 

（3）   使用demo：

 

 

五.ionic3項目開發性能優化

1.頁面的生命週期事件合理運用

（1）ionViewDidLoad():頁面加載完成觸發，這裏的「加載完成」指的是頁面所需的資源已經加載完成，但還沒進入這個頁面的狀態（用戶看到的仍是上一個頁面）全程只會調用一次，即第一次進入頁面時被調用，此後你不管怎樣進進出出它都不會被觸發。

（2）ionViewWillEnter()：字面意義理解就是「我要進來了」的那一刻，這個時候頁面剛剛開始切換。你能夠在這時對頁面的數據進行預處理，這個鉤子是每次都會調用的。

（3）ionViewDidEnter()：當這個鉤子被觸發的時候，用戶已經進入到新頁面了  （頁面處於激活狀態），一樣也是每次都會調用。

（5）ionViewWillLeave()：

      頁面準備 (is about to) 離開時觸發，這時用戶剛剛觸發了返回按鈕或者相關的 事件。

（6）ionViewDidLeave()：頁面已經 (has finished) 離開時觸發，頁面處於非激活 狀態了。

（7）ionViewWillUnload()：頁面中的資源即將被銷燬時觸發

（8）ionViewCanEnter ()：每次調用返回boolean值，若是 ionViewCanEnter 返 回了false，頁面進入就會被阻攔

（9）ionViewCanLeave ()：每次調用返回boolean值，若是 ionViewCanLeave 返回了false，頁面離開就會被阻攔

 

具體見博客：https://www.jianshu.com/p/72b704b5c9ed

 

2.ionic3新特性：懶加載

使用方法參考：https://blog.csdn.net/qq_32107121/article/details/78453242

1. 3.   引用插件ionic-native-transitions，提高頁面切換效果，減小頁面卡頓

詳情見：http://www.javashuo.com/article/p-gfackjej-ez.html

 

1. 4.   自定義組件重複調用與封裝服務

自定義組件：http://www.cnblogs.com/ruoqiang/p/9073190.html

封裝服務：https://www.jianshu.com/p/447b09c3695e