ios android混合开发框架,针对移动端的混合开发框架 – rexxar-ios

Rexxar iOS

Rexxar是一个针对移动端的混合开发框架。现在支持 Android 和 iOS 平台。Rexxar-iOS是 Rexxar 在 iOS 系统上的客户端实现。

通过 Rexxar，你可以使用包括 javascript，css，html 在内的传统前端技术开发移动应用。Rexxar 的客户端实现 Rexxar Container 对于 Web 端使用何种技术并无要求。我们现在的 Rexxar 的前端实现 Rexxar Web，以及 Rexxar Container 在两个平台的实现 Rexxar-iOS 和 Rexxar-Android 项目中所带的 Demo 都使用了 React 。但你完全可以选择自己的前端框架在 Rexxar Container 中进行开发。

Rexxar-iOS 现在支持 iOS 7 及以上版本。

Rexxar 简介

Rexxar 包含三个库：

Rexxar Web ： https://github.com/douban/rexxar-web 。

Rexxar Android： https://github.com/douban/rexxar-android 。

Rexxar iOS： https://github.com/douban/rexxar-ios 。

安装

安装 Cocoapods

CocoaPods 是一个 Objective-c 和 Swift 的依赖管理工具。你可以通过以下命令安装 CocoaPods：

$ gem install cocoapods

Podfile

target 'TargetName' do

pod 'Rexxar', :git => 'https://github.com/douban/rexxar-ios.git', :commit => '0.2.1'

end

然后，运行以下命令：

$ pod install

使用

你可以查看 Demo 中的例子。了解如何使用 Rexxar。Demo 给出了完善的示例。

Demo 中使用 github 的 raw 文件服务提供一个简单的路由表文件 routes.json，demo.html 以及相关 javascript 资源的访问服务。在你的线上服务中，当然会需要一个真正的生产环境，以应付更大规模的路由表文件，以及 javascript，css，html 资源文件的访问。你可以使用任何服务端框架。Rexxar 对服务端框架并无要求。RXRConfig提供了对路由表文件地址的配置接口。下一节描述了配置方法。

配置 RXRConfig

设置路由表文件 api：

RXRConfig.setRoutesMapURL(NSURL(string:"https://raw.githubusercontent.com/douban/rexxar-web/master/example/dist/routes.json")!)

Rexxar 使用 url 来标识页面。提供一个正确的 url 就可以创建对应的 RXRViewController。路由表提供了每个 url 对应的 html 资源的下载地址。Demo 中的路由表如下：

{

"items": [{

"remote_file": "https://raw.githubusercontent.com/douban/rexxar-web/master/example/dist/rexxar/demo-252452ae58.html",

"deploy_time": "Sun, 09 Oct 2016 07:43:47 GMT",

"uri": "douban://douban.com/rexxar_demo[/]?.*"

}],

"partial_items": [{

"remote_file": "https://raw.githubusercontent.com/douban/rexxar-web/master/example/dist/rexxar/demo-252452ae58.html",

"deploy_time": "Sun, 09 Oct 2016 07:43:47 GMT",

"uri": "douban://partial.douban.com/rexxar_demo/_.*"

}],

"deploy_time": "Sun, 09 Oct 2016 07:43:47 GMT",

}

设置预置资源文件路径

RXRConfig.setRoutesResourcePath("rexxar")

使用 Rexxar 一般会预置一份路由表，以及资源文件在应用包中。这样就可以减少用户的下载，加快第一次打开页面的速度。在没有网络的情况下，如果没有数据请求的话，页面也可访问。这都有利于用户体验。

注意，如果设置了预置资源文件路径，即意味着在应用包内预置一份资源文件。这个文件夹需要是 folder references 类型，即在 Xcode 中呈现为蓝色文件夹图标。创建方法是将文件夹拖入 Xcode 项目，选择 Create folder references 选项。

设置缓存路径

RXRConfig.setRoutesCachePath("com.douban.RexxarDemo.rexxar")

缓存文件夹存在的目的也是减少资源文件的下载次数，加快打开页面的速度。使得用户可以得到近似原生页面的页面加载体验。

缓存资源文件一般会出现在 Rexxar 部署了一次路由表的更新之后。这也是 Rexxar 支持热部署的方法：路由表控制资源文件的更新。一般可以让应用定期访问路由表。比如，在开启应用时，或者关闭应用时更新路由表。更新路由表的方法如下：

RXRViewController.updateRouteFiles(completion: nil)

如果，新的路由表中出现了 html 文件的更新，或者出现了新的 url。也就是说这些文件并不存在于预置资源文件夹中，Rexxar Container 就会在下载完路由表之后，主动下载新资源，并将新资源储存在缓存文件夹中。

预置资源文件和缓存文件关系

正常程序逻辑下，预置资源文件夹存在的资源，就不会再去服务器下载，也就不会有缓存的资源文件。

在进入一个 RXRViewController 时，会读取资源文件。在读取时，Rexxar Container 先读取缓存文件，如果存在就使用缓存文件。如果缓存文件不存在，就读取预置资源文件。如果，预置资源文件也不存在。RXRViewController 会尝试更新一次路由表，下载路由表中新出现的资源，并再次尝试读取缓存资源文件。如果仍然不存在，就会出现页面错误。

读取顺序如下：

缓存文件夹中读取 html 文件；

预置资源文件夹中读取 html 文件；

重新下载路由表 Routes.json，遍历路由表将新的 html 文件下载到缓存文件夹。再次尝试从缓存文件夹读取 html 文件；

以上三步中，任何一步读取成功就停止，并返回读取的结果。如果，三步都完成了仍没有找到文件，就会出现页面错误。

有了预置资源文件和缓存文件的双重保证，一般用户打开 Rexxar 页面时都不会临时向服务器请求资源文件。这大大提升了用户打开页面的体验。

使用 RXRViewController

你可以直接使用RXRViewController作为你的混合开发客户端容器。或者你也可以继承RXRViewController，在RXRViewController基础上实现你自己的客户端容器。在 Demo 中，创建了FullRXRViewController，它继承于RXRViewController。

为了初始化 RXRViewController，你只需要一个 url。在路由表文件 api 提供的路由表中可以找到这个 url。这个 url 标识了该页面所需使用的资源文件的位置。Rexxar Container 会通过 url 在路由表中寻找对应的 javascript，css，html 资源文件。

let controller = RXRViewController(URI: uri)

let titleWidget = RXRNavTitleWidget()

let alertDialogWidget = RXRAlertDialogWidget()

controller.activities = [titleWidget, alertDialogWidget]

navigationController?.pushViewController(controller, animated: true)

Rexxar 的公开接口

Rexxar Container

RXRConfig

RXRViewController

Widget

RXRWidget

RXRNavTitleWidget

RXRAlertDialogWidget

RXRPullRefreshWidget

ContainerAPI

RXRNSURLProtocol

RXRContainerInterceptor

RXRContainerAPI

Decorator

RXRRequestInterceptor

RXRDecorator

RXRRequestDecorator

Util

NSURL+Rexxar

NSDictionary+RXRMultipleItem