这篇文章主要是提供一个通用的使用GIC
进行开发的项目结构
,包括如何引入HotReload
功能。
我已经将基础的项目框架提交到git中,你也可以直接下载查看。git链接
一、基本的项目搭建
-
首先是创建一个全新的iOS单页面应用。
-
在项目的根目录下添加
podfile
文件,引入GIC
库。然后执行pod install
命令。platform :ios, '8.0' use_frameworks! target 'GICTutorial' do pod 'GICXMLLayout', '~> 0.5.0' end 复制代码
具体的版本号参考
git
中最新的版本号。 -
添加
project
文件夹,并且以文件夹形式
引入。如下图:之所以以
文件夹
的形式引入,是因为希望在打包到ipa中的时候,也能以文件夹的方式来访问项目中的资源文件。 -
往
project
添加一个App.xml
的文件,用来描述一个最简单的APP。内容为:<!--等同于创建一个UIWindow--> <app> <!--等同于创建一个UINavigationController,并且将背景色设为 white--> <nav background-color="white"> <!--等同于创建一个UIViewController,并且将页面的title设为"GIC教程"--> <page title="GIC教程"> </page> </nav> </app> 复制代码
这样,一个简单的具有导航功能的应用就创建好了。
-
在
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
是一个天生支持热加载
的库,你只需要简单的几步就能让你的应用具备热加载
的能力,能够大幅提升你的开发效率。
-
将
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
中的文件。 -
启动
http-server
。先
cd
到你的工程根目录。然后在命令行执行如下命令用来启动http-server
。bash dev-tools.sh 复制代码
这样你会看到如下的一些输出。
http-server
输出了三个地址,第一个用于本机访问的,第二个用于局域网内部访问的,第三个直接忽略(一开始我以为是可以外网访问的,但是有时候可以,有时候就又不行了)。 -
在
AppDelegate
中修改GIC
的根目录。[GICXMLLayout setRootUrl:@"http://localhost:8088"]; 复制代码
现在如果你运行模拟器的话,会出错,因为iOS默认拦截了
http
的访问,因此需要在工程的plist中允许http访问。<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict> 复制代码
现在你可以再次运行了,但是现在还只是具备了
热加载
能力,但是还未将这功能添加到项目中。 -
添加
reload
按钮。- 从
GIC
的Example
文件夹中将dev
文件夹拷贝到刚才创建的项目中并且添加进去。 - 在
AppDelegate
中修改加载方式
#import "GICXMLLayoutDevTools.h" [GICXMLLayoutDevTools loadAPPFromPath:@"App.xml"]; 复制代码
- 从
现在,刚才创建的项目已经具备了热加载
功能,并且当你运行启动后,会在屏幕的右下角
看到一个reload
按钮。每次点击reload
按钮,GIC
会自动重新加载一遍APP。这样当你对XML文件做出了任何编辑,只要点一下reload
按钮,那么改变立马会生效。
三、完整的项目结构
以上介绍的项目结构还只是一个简单的项目结构,并不能满足实际的开发需求。下面给出一个比较完整的项目结构。
下面对其中的标注一一说明。
-
gic
: 存放由native提供的各种自定义功能。包括如下几个自定义模块:1.1
behaviors
:各种自定义行为(参考文档)。比如:下拉刷新行为、上拉加载更多行为等等1.2
elements
:各种自定义元素(参考文档)。1.3
js
:提供JSAPI的扩展(参考文档)。比如:websock API、AlertView API 等等。1.4
hotreload
:提供热加载能力。这个目录有点特殊,发布项目的时候是不需要热加载功能的,因此在发布的时候可以将此功能移除。 -
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
:存放样式文件,提供模块化样式。甚至可以提供类似主题
的功能,通过不同的样式文件提供不同的主题
功能。
上面描述的一个参考的项目结构。基本能应付大多数的开发场景了。