在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:douban/rexxar-ios开源软件地址:https://github.com/douban/rexxar-ios开源编程语言:Objective-C 74.2%开源软件介绍:Rexxar iOSRexxar 是一个针对移动端的混合开发框架。现在支持 Android 和 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。 关于 Rexxar 的设计思想,可以看看这篇问答:Infoq 采访:豆瓣混合开发框架 Rexxar。 Rexxar 包含三个库:
安装安装 CocoapodsCocoaPods 是一个 Objective-c 和 Swift 的依赖管理工具。你可以通过以下命令安装 CocoaPods: $ gem install cocoapods Podfiletarget '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设置路由表文件 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 会尝试更新一次路由表,下载路由表中新出现的资源,并再次尝试读取缓存资源文件。如果仍然不存在,就会出现页面错误。 读取顺序如下:
以上三步中,任何一步读取成功就停止,并返回读取的结果。如果,三步都完成了仍没有找到文件,就会出现页面错误。 有了预置资源文件和缓存文件的双重保证,一般用户打开 Rexxar 页面时都不会临时向服务器请求资源文件。这大大提升了用户打开页面的体验。 使用 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 Container首先,可以继承 然后,可以使用 Rexxar 提供的三个接口。下面会介绍如何使用这三个接口,更方便地扩展属于自己的特定功能。 定制 RXRWidgetRexxar Container 提供了一些原生 UI 组件,供 Rexxar Web 使用。RXRWidget 是一个 Objective-C 协议(Protocol)。该协议是对这类原生 UI 组件的抽象。如果,你需要实现某些原生 UI 组件,例如,弹出一个 Toast,或者添加原生效果的下拉刷新,你就可以实现一个符合 RXRWidget 协议的类,并实现以下三个方法: 在 Demo 中可以找到一个例子: @interface RXRNavTitleWidget ()
@property (nonatomic, copy) NSString *title;
@end
@implementation RXRNavTitleWidget
- (BOOL)canPerformWithURL:(NSURL *)URL
{
NSString *path = URL.path;
if (path && [path isEqualToString:@"/widget/nav_title"]) {
return true;
}
return false;
}
- (void)prepareWithURL:(NSURL *)URL
{
self.title = [[URL rxr_queryDictionary] rxr_itemForKey:@"title"];
}
- (void)performWithController:(RXRViewController *)controller
{
if (controller) {
controller.title = self.title;
}
}
@end 定制 RXRContainerAPI我们常常需要在 Rexxar Container 和 Rexxar Web 之间做数据交互。比如 Rexxar Container 可以为 Rexxar Web 提供一些计算结果。如果你需要提供一些由原生代码计算的数据给 Rexxar Web 使用,你就可以选择实现 RXRContainerAPI 协议(Protocol),并实现以下三个方法: 在 Demo 中可以找到一个例子: 定制 RXRDecorator如果你需要修改运行在 Rexxar Container 中的 Rexxar Web 所发出的请求。例如,在 http 头中添加登录信息,你可以实现 在 Demo 的 使用 RXRContainerAPI 和 RXRDecoratorRXRContainerAPI 和 RXRDecorator 生效期应该和 RXRViewController 的生命周期一致。 这就是说可以在 RXRViewController 的 override func viewDidLoad() {
super.viewDidLoad()
...
URLProtocol.registerClass(RXRContainerInterceptor.self)
...
URLProtocol.registerClass(RXRRequestInterceptor.self)
} 可以在 Objective-C 的 deinit {
URLProtocol.unregisterClass(RXRContainerInterceptor.self)
URLProtocol.unregisterClass(RXRRequestInterceptor.self)
} 在 Demo 中的 定制 RXRProxyRXRProxy 是本地请求代理服务,当一个请求允许被本地服务代理时,可以直接返回本地内容(类似 ContainerAPI),当请求不能被本地服务代理时,继续原来的请求(类似 RequestInterceptor)。 Partial RXRViewController如果,你发现一个页面无法全部使用 Rexxar 实现。你可以在一个原生页面内内嵌一个 RXRViewController,部分功能使用原生实现,另一部分功能使用 Rexxar 实现。 Demo 中的 PartialRexxarViewController 给出了一个示例。 Rexxar 的公开接口
Changelog
Unit Test在项目的 RexxarTests 文件夹下可以找到一系列单元测试。这些单元测试可以通过命令 LicenseThe MIT license. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论