/AppHost

一个 native 和 h5 通讯的框架,支持调试

Primary LanguageJavaScriptMIT LicenseMIT

AppHost

AppHost 是一整体解决 H5 和 native 协作开发的框架和服务。试图解决 native 和 H5 目前开发质量低下、业务膨胀后代码混乱、两端联调困难等,彼此割裂的现状。 作为一种 JSBridge 的实现方法,AppHost 像一座桥,将 native 和 H5 开发打通,一边是提供设计良好的 native framework 和相关 protocol ,提高 native 接口的交付能力和开发质量;一边是为 H5 开发的页面和 native 联调,提供大量辅助调试工具和基本性能调优工具,让前端开发者对 H5 in App 的调试体验像调试原生浏览器一样,提升质量和开发效率。

native 开发用例

1.基本加载 H5 页面

    AppHostViewController *appHost = [[AppHostViewController alloc] init];
    appHost.url = @"https://m.you.163.com";
    appHost.pageTitle = @"好的生活没那么贵";
    appHost.rightActionBarTitle = @"点赞";// 右上角按钮文案

    [self.navigationController pushViewController:appHost animated:YES];

2.用增强后的 AppHostViewController 加载 H5 页面

WebViewViewController 继承自AppHostViewController,自定义拦截openapp.jdmobile:协议和自定义了 HUD 行为,详见 AppHostExample源码。

    WebViewViewController *vc = [[WebViewViewController alloc] init];
    NSDictionary *object = self.objects[indexPath.row];
    NSString *url = [object objectForKey:@"url"];
    NSString *fileName = [object objectForKey:@"fileName"];
    if (url) {
        vc.url = url;
    } else if(fileName.length > 0){
        NSString *dir = [object objectForKey:@"dir"];
        NSURL * _Nonnull mainURL = [[NSBundle mainBundle] bundleURL];
        NSString* domain = [object objectForKey:@"domain"];
        if (dir.length > 0) {
            NSURL *url = [mainURL URLByAppendingPathComponent:dir];
            [vc loadIndexFile:fileName inDirectory:url domain:domain];
        } else {
            [vc loadLocalFile:[mainURL URLByAppendingPathComponent:fileName] domain:domain];
        }
    }

    [self.navigationController pushViewController:vc animated:YES];

3.自定义 Response,新增 h5 接口

详见 AppHostExample源码。

// HUDResponse.h
#import <AppHost/AppHost.h>

NS_ASSUME_NONNULL_BEGIN
@interface HUDResponse : AppHostResponse

@end
NS_ASSUME_NONNULL_END
// HUDResponse.m
+ (NSDictionary<NSString *, NSString *> *)supportActionList
{
    return @{
             @"hideLoading":@"1"
             };
}

#pragma mark - override
ah_doc_begin(hideLoading, "隐藏 loading 的 HUD 动画,UIView+Toast实现。")
ah_doc_code(window.appHost.invoke("hideLoading"))
ah_doc_code_expect("在有 loading 动画的情况下,调用此接口,会隐藏 loading。")
ah_doc_end
- (void)hideLoading
{
    [self.appHost.view hideToastActivity];
}

Remote Debugger 演示

1.如何打开远程调试功能

工程代码运行之后,按照 XCode 日志里的提示(或者点击 App 里右上角一个 AH 样的图标,展开后的日志了有 url,长按复制或者在浏览器输入),用电脑浏览器打开调试页面,展现的就是调试 Remote Debugger 的 Console界面。

Debugger 整体使用

AppHost 的功能总览

功能总览

更多特性见,链接

如何安装

介绍两种方式,作为动态链接库 framework 或者以子项目的方式引入。

1. 动态链接库framework

  • 打开AppHost.xcodeproj工程
  • 选择 scheme 如图 分架构的 framework build 脚本
  • 运行后会自动打开一个文件夹,选择你需要的架构(模拟器或者 device)将AppHost.framework 托到桌面(任何一个容易找到的地方)。
  • 接着,选择工程 target -> general 面板下面的 Embedded Binaries ,点击 + 号
  • 选择add others...,选中刚刚 build 好的AppHost.framework,添加过程中,需要选择copy items if needed选项。(后续你可以把这个文件放置到工程目录下任意地方,然后 add 到 Xcode 工程里)
  • 完毕,在工程里即可使用#import <AppHost/AppHost.h>

2.Embedded Framework

  • 切换到工程的根目录下,运行下面命令, 添加 AppHost 作为 git submodule

    $ git submodule add https://github.com/hite/AppHost.git
  • 打开 AppHost 文件夹, 把 AppHost.xcodeproj 拖到 Project Navigator tab,你的项目Xcode project 根目录下

    AppHost.xcodeproj 应该在你的工程文件蓝色图标的下方,处于可打开状态,不能打开说明你单独打开了 AppHost.xcodeproj,请关闭

  • 设置主工程和子工程的 deploy target 一致.

  • Next, 在 Project Navigator 里选择你的项目(蓝色图标),切换到 target configuration 窗口,在 "Targets" 窗口下,选择应用 target

  • 在窗口顶部上面,选择 "General" 窗口.

  • "Embedded Binaries" 区域点击 + 号.

  • 在弹出的选择窗口里,下拉到Products 文件夹,选择AppHost.framework

    AppHost.framework 会自动添加为 target 依赖。在build phase\copy files linked frameworkembedded framework 也会自动添加AppHost.framework,这两个地方是为了能在模拟器和真机上运行

  • 完毕,在工程里即可使用#import <AppHost/AppHost.h>

更多用户请查看 AppHostExample源码