iOS混合开发库(GICXMLLayout)三、创建工程

432 阅读5分钟

这篇文章主要是提供一个通用的使用GIC进行开发的项目结构,包括如何引入HotReload功能。

我已经将基础的项目框架提交到git中,你也可以直接下载查看。git链接

一、基本的项目搭建

  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库的话,你也无需对你的项目进行大改,侵入性很小。

二、热加载(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. GICExample文件夹中将dev文件夹拷贝到刚才创建的项目中并且添加进去。
    2. AppDelegate中修改加载方式
    #import "GICXMLLayoutDevTools.h"
    
    [GICXMLLayoutDevTools loadAPPFromPath:@"App.xml"];
    

现在,刚才创建的项目已经具备了热加载功能,并且当你运行启动后,会在屏幕的右下角看到一个reload按钮。每次点击reload按钮,GIC会自动重新加载一遍APP。这样当你对XML文件做出了任何编辑,只要点一下reload按钮,那么改变立马会生效。

三、完整的项目结构

以上介绍的项目结构还只是一个简单的项目结构,并不能满足实际的开发需求。下面给出一个比较完整的项目结构。

下面对其中的标注一一说明。

  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支持pngjpggif等图片资源,而对于svg的支持需要通过自定义扩展来实现。

    2.3 js:存放JavaScript文件,承载着应用的业务逻辑。

    2.4 pages:存放各个页面的xml文件,如果你的项目是由Tabs组成的,那么也可以在这个文件夹下存放各个tabs的页面的内容。

    2.5 style:存放样式文件,提供模块化样式。甚至可以提供类似主题的功能,通过不同的样式文件提供不同的主题功能。

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