ionic3最詳細最完整架構（大量圖文）——一文教會你使用Ionic

環境配置

這個在之前的博文有詳細講解。Android和iOS開發環境配置

項目架構

運行Ionic start myApp tabs命令行

這裏start代表新建一個Ionic應用，MyIonicProject 是項目名稱，tutorial是tutorial模板，還有其他幾種模板：

1. tabs : 底部3個tab模板
2. sidemenu：側邊欄菜單模板
3. blank：空模板
4. super：帶有十幾個頁面（比如登陸，谷歌地圖，列表）的一個項目模板
5. tutorial：項目目錄比較完整的引導模板
6. –v2：Ionic2項目，如果你想使用Angular1，–v1即可。本文默認都是Ionic2及以後的版本。

如果使用Angular1版本，在後面加上—type  ionic1

這個過程需要等待，因爲會安裝package.json裏的所有引用的包。start成功之後打開項目，可以看到這樣的結構：

• plugins目錄是安裝的cordova插件，cordova插件是使用原生組件的方式，默認的會裝幾個必須使用的，以後我們使用命令行（比如 ionic cordova plugin add cordova-plugin-camera）安裝的插件會自動放到這個目錄裏。
• resources是存放我們的項目經過cordova編譯之後的android和ios的一切資源的，比如源代碼，app的icon，資源圖片等等，這裏會生成原生的android或者ios項目，比如以後生成的apk文件也是放在這裏android目錄下面。
• src是我們的項目代碼目錄，我們將在這裏編寫我們的APP。如果你對這裏的代碼結構感到陌生，你需要先花點時間瞭解Angular
• www是我們的項目作爲angular項目編譯之後生成的文件。

我們在app.component.ts裏面做一些初始化代碼的工作。

platform.ready().then(() => {
      /*load map script of GaoDe in the first*/
      this.helper.loadMapsScript();

      this.translate.get(['Shared.OkText','Shared.CancelText','Shared.UpdateApp']).subscribe(res => {
        this.translateLanguage = res;
      });

      this.helper.initJpush();//初始化極光推送

      this.storage.get('UserInfo').then((userInfo:UserInfo ) =>{
        if(userInfo){
          this.globalData.token = userInfo.access_token;
          this.globalData.userId=userInfo.userId;
          this.rootPage='HomePage';
          this.globalData.haveEnterHomePage=true; //have load root page is homepage
        }else {
          /*Not Login*/
          this.rootPage='LoginPage';
        }
      });
      this.nativeService.statusBarStyleDefault();
      this.nativeService.splashScreenHide();
      this.nativeService.disableKeyboardScroll(); //禁止iOS下Keyboard出來之後屏幕滾動
      this.registerBackButtonAction();//註冊返回按鍵事件
      this.assertNetwork();//檢測網絡
      this.getVersion();
    });
  }

我們通常在config.xml文件裏進行原生應用的配置，比如權限，版本，名稱等等其他的配置。

這個文件一開始沒有，是我們運行build命令之後自動生成的。比較重要的一些概念：

• Name是顯示在手機系統的APP名稱
• Id是應用的package id
• Allow-intent是android的權限（iOS權限應在Xcode裏面配置）
• ShowSplashScreen是否顯示過渡圖
• howSplashScreenSpinner顯示過渡圖時候是否顯示Loading
• AutoHideSplashScreen是否自動隱藏過渡圖（一般寫false，在app.component.ts裏面調用this.nativeService.splashScreenHide()方法進行隱藏;）
• SplashScreenDelay過渡圖顯示時間（一般當AutoHideSplashScreen爲True的時候進行配置）
• FadeSplashScreen 是否使用過渡動畫來隱藏過渡圖
• Orientation 如果只考慮豎屏效果，配置值爲portrait

運行 ionic serve 可以在瀏覽器查看效果。

代碼實踐

爲了方便的在各個地方使用公共的方法，在我們的項目裏封裝了一些服務和組件。

• 公共服務

我們使用最頻繁的方法在native.service.ts文件裏，都是涉及原生組件的使用，包括拍照，相冊，顯示和隱藏loading，顯示原生toast，判斷版本號，判斷手機系統等等。

• 公共組件

項目裏用到的包括拍照組件，富文本組件，掃描二維碼組件，底部tab欄組件，設備相關的圖表組件，設備實時監控組件。

• 公共管道

項目裏用到的判斷名稱長度，文本溢出，時間格式轉化等管道。

修改應用的icon和過渡圖

如果需要設置我們自己的icon和過渡圖，需要將1024*1024px格式的名稱爲icon.png（icon）和2732*2732px格式的名爲splash.png（splash screen）的圖片放置在如下位置：

運行如下命令：

Ionic cordova resources即可