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:存放样式文件，提供模块化样式。甚至能够提供相似主题的功能，经过不一样的样式文件提供不一样的主题功能。

上面描述的一个参考的项目结构。基本能应付大多数的开发场景了。