iOS混合開發庫(GICXMLLayout)3、建立工程

這篇文章主要是提供一個通用的使用GIC進行開發的項目結構，包括如何引入HotReload功能。

我已經將基礎的項目框架提交到git中，你也能夠直接下載查看。git連接

1、基本的項目搭建

1. 首先是建立一個全新的iOS單頁面應用。

   

   。

2. 在項目的根目錄下添加podfile文件，引入GIC庫。而後執行pod install命令。

   platform :ios, '8.0'
   use_frameworks!
   target 'GICTutorial' do
   pod 'GICXMLLayout', '~> 0.5.0'
   end
   複製代碼

   具體的版本號參考git中最新的版本號。

3. 添加project文件夾，而且以文件夾形式引入。以下圖：

   

   之因此以文件夾的形式引入，是由於但願在打包到ipa中的時候，也能以文件夾的方式來訪問項目中的資源文件。

4. 往project添加一個App.xml的文件，用來描述一個最簡單的APP。內容爲：

   <!--等同於建立一個UIWindow-->
   <app>
       <!--等同於建立一個UINavigationController,而且將背景色設爲 white-->
       <nav background-color="white">
           <!--等同於建立一個UIViewController，而且將頁面的title設爲"GIC教程"-->
           <page title="GIC教程">
           </page>
       </nav>
   </app>
   複製代碼

   這樣，一個簡單的具備導航功能的應用就建立好了。

5. 在AppDelegate中初始化GIC而且加載前面在XML描述的應用。

   #import <GICXMLLayout/GICXMLLayout.h>
   #import <GICXMLLayout/GICRouter.h>
   複製代碼

   首先是引入GIC的頭文件，由於這裏咱們須要用到Router相關的功能，所以須要引入GICRouter的頭文件。

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
       // 註冊gic類庫默認全部元素
       [GICXMLLayout regiterAllElements];
       [GICRouter regiterAllElements];
       
       // 設置根目錄
       [GICXMLLayout setRootUrl:[[NSBundle mainBundle].bundlePath stringByAppendingPathComponent:@"project"]];
       
       // 經過GIC來加載APP
       [GICRouter loadAPPFromPath:@"App.xml"];
       return YES;
   }
   複製代碼

通過上面的5個步驟，一個簡單的GIC工程已經搭建完成，你如今能夠直接在模擬器中運行。

上面是最基本的一個項目目錄。其實你能夠看到，對於XCode單頁應用模板建立的文件，這裏一個都沒有刪除。也就意味着，若是在你現有的項目中集成GIC庫的話，你也無需對你的項目進行大改，侵入性很小。

2、熱加載(HotReload)

在沒有熱加載功能以前，若是你想對項目中的邏輯、UI進行改動的話(哪怕是最小的改動)，你必須重複的經歷編譯、運行的過程。GIC是一個天生支持熱加載的庫，你只須要簡單的幾步就能讓你的應用具有熱加載的能力，可以大幅提高你的開發效率。

1. 將GIC項目中tools文件夾下的dev-tools.sh文件拷貝到你的項目根目錄下。而且修改其中的配置(主要是修改其中的project目錄)

   #!/usr/bin/env bash
   # 安裝http-server
   sudo npm i -g http-server
   #啓動微型服務器。 服務器根目錄設置爲當前目錄的前一級
   http-server -p 8088 GICTutorial/project
   複製代碼

   確保你的電腦上已經安裝了nodejs,若是沒有安裝，那麼能夠點擊以下連接去下載安裝，nodejs下載

   這個步驟的目的就是在你的電腦上啓動一個簡易的http-server，這樣你就能從遠程、本地來訪問project中的文件。

2. 啓動http-server。

   先cd到你的工程根目錄。而後在命令行執行以下命令用來啓動http-server。

   bash dev-tools.sh 
   複製代碼

   這樣你會看到以下的一些輸出。

   

   http-server輸出了三個地址，第一個用於本機訪問的，第二個用於局域網內部訪問的，第三個直接忽略(一開始我覺得是能夠外網訪問的，可是有時候能夠，有時候就又不行了)。

3. 在AppDelegate中修改GIC的根目錄。

   [GICXMLLayout setRootUrl:@"http://localhost:8088"];
   複製代碼

   如今若是你運行模擬器的話，會出錯，由於iOS默認攔截了http的訪問，所以須要在工程的plist中容許http訪問。

   <key>NSAppTransportSecurity</key>
   <dict>
   	<key>NSAllowsArbitraryLoads</key>
   	<true/>
   </dict>
   複製代碼

   如今你能夠再次運行了，可是如今還只是具有了熱加載能力，可是還未將這功能添加到項目中。

4. 添加reload按鈕。

   1. 從GIC的Example文件夾中將dev文件夾拷貝到剛纔建立的項目中而且添加進去。
   2. 在AppDelegate中修改加載方式

   #import "GICXMLLayoutDevTools.h"
   
   [GICXMLLayoutDevTools loadAPPFromPath:@"App.xml"];
   複製代碼

如今，剛纔建立的項目已經具有了熱加載功能，而且當你運行啓動後，會在屏幕的右下角看到一個reload按鈕。每次點擊reload按鈕，GIC會自動從新加載一遍APP。這樣當你對XML文件作出了任何編輯，只要點一下reload按鈕，那麼改變立馬會生效。

3、完整的項目結構

以上介紹的項目結構還只是一個簡單的項目結構，並不能知足實際的開發需求。下面給出一個比較完整的項目結構。

下面對其中的標註一一說明。

1. gic: 存放由native提供的各類自定義功能。包括以下幾個自定義模塊：

   1.1 behaviors:各類自定義行爲(參考文檔)。好比：下拉刷新行爲、上拉加載更多行爲等等

   1.2 elements:各類自定義元素(參考文檔)。

   1.3 js:提供JSAPI的擴展(參考文檔)。好比：websock API、AlertView API 等等。

   1.4 hotreload:提供熱加載能力。這個目錄有點特殊，發佈項目的時候是不須要熱加載功能的，所以在發佈的時候能夠將此功能移除。

2. project:存放應用自己相關的內容。並且這個文件夾裏面的內容是能夠被熱更新的。熱更新功能我會在後面單獨寫一篇文章介紹。

   2.1 App.xml:這是一個文件，算是應用的入口。

   2.2 images:存放圖片靜態資源。目前GIC支持png、jpg、gif等圖片資源，而對於svg的支持須要經過自定義擴展來實現。

   2.3 js:存放JavaScript文件，承載着應用的業務邏輯。

   2.4 pages:存放各個頁面的xml文件，若是你的項目是由Tabs組成的，那麼也能夠在這個文件夾下存放各個tabs的頁面的內容。

   2.5 style:存放樣式文件，提供模塊化樣式。甚至能夠提供相似主題的功能，經過不一樣的樣式文件提供不一樣的主題功能。

上面描述的一個參考的項目結構。基本能應付大多數的開發場景了。