35

GitHub - hite/AppHost: 一个 native 和 h5 通讯的框架,支持调试

 5 years ago
source link: https://github.com/hite/AppHost
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

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源码


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK