Skip to content

hite/AppHost

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

88 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>

H5 端使用示例

暴露给 h5 的数据有两类,一类是 apphost 的静态属性;一类是接口;

> AppHost 静态属性,包含属性有

  1. appInfo
  2. supportFunctionType 这两个静态属性可以在 h5 的任意地方调用都是可用的,调用举例,
// 获取当前是否是 iPhone X 设备(iOS only)
var name = appHost.appInfo.iPhoneXInfo
// 获取当前 App 是否支持此某个接口,如 `oepnFinancial`,
if(apphost.supportFunctionType && parseInt(apphost.supportFunctionType.openFinancial, 10) >0){
 //支持打开理财界面 
}

> AppHost 的核心接口

大部分核心接口需要在 'onready', 内调用,但是如果是一些和 UI 无关的接口,可以在任意地方调用,如 统计接口,appHost.invoke('log',{})

window.appHost.on('onready',function(data){
                    window.appHost.invoke('sendLogToES', {'content':'XXX' })
                    // your code go here.
                });

第一个核心接口,invoke, 即 window.appHost.invoke,它是 h5 调用 native 的唯一入口,可调用接口和调用用例可以使用 Remote Debugger的 console 来查看;

第二个核心接口,on,即window.appHost.on,它是 h5 接收 native 调用的一种方式,用 on 来接收 native 调用比较适合在 delegate 模式; window.appHost.invoke 也是可以接收 native 回调的,也就是在 invoke 的最后一个参数传入一个 function,如

window.appHost.invoke('alert', {'text': 'text'});
//如果是callback,支持如下语法
window.appHost.invoke('alert', {'text': '点击确定后,有回调'},function(){
      appHost.invoke('toast',{'text':'你点击了alet的确定按钮'});
     });
});

更多用例请查看 AppHostExample 源码

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published