概述#

Hy 是移动跨平台移动应用程序解决方案，目前支持 Android 和 iOS，她不单可以让前端开发人员无缝开发 Native 应用程序，还可以使用 Native 端各种感应器，并结合 Server 可以达到静默升级；结合 QApp、Kami、Yo 来实现类 Native 的 JS 交互。另外 Native 开发人员也可以实现 Hy 插件来扩充 Hy 功能。

大体结构如下： image

Biz H5 Zip：HTML的打包文件，Wagon Lib会通过检测Server版本信息来升级
Biz Plugin：扩展Wagon的功能
Wagon Lib：Wagon库文件

准备工作#

首先回答几个问题： #

服务器准备集成化管理还是自己部署？
Android支持的版本？

准备内容 #

素材

创建工程引入库文件

创建iOS工程
创建Android工程
创建JS工程
创建Server

第一个应用#

创建Android应用#

1. 大客户端中使用HyBrid方案 #

使用自己的WebView打开Hybrid页面 #

这种方式的特点是定制性强，自己可控。
1、添加对hy库的依赖。

if (project.properties.'adj' || project.properties.'rsj') {
//        compile 'com.qunar.spider:hy:1.0.0@aar'
} else {
    compile 'com.qunar.spider:hy:1.0.0@aar'
}
compile 'com.qunar.hy:browser:1.0.0@aar'
compile 'com.qunar.hy:hypatch:1.0.0@aar'

2、使用Hy库中的 HyPRWebView （封装了loading动画以及下拉刷新的WebView）布局。 3、HyPRWebView所在的View、Fragment或者Activity实现HyIBaseContext接口，并设置到HyPRWebView中。

hyPRWebView.setIBaseContext(this);

4、根据业务组件的一个唯一标识(如HybridId)去获取 Project 实例，再在HyPRWebView 实例化时将此Project与HyPRWebView关联起来

webView.setProject(ProjectManager.getInstance().getProject(唯一标识));

5、在project中注册自己的Plugin

Project project = ProjectManager.getInstance().getProject(唯一标识);
project.addPlugin(Plugin.class.getName());

使用browser组件打开Hybrid页面 #

使用新的scheme:"qunaraphone://hy/url?url='xxx'&name='xxx'&type='xxx'&navigation='xxx'"。 参数跟webview.open类似

try {
    JSONObject navigationJson = new JSONObject();
    JSONObject left = new JSONObject();
    left.put("style", "icon");
    left.put("icon", "\uf07d");

    JSONObject title = new JSONObject();
    title.put("text", "hello");
    title.put("style", "text");

    navigationJson.put("left", left);
    navigationJson.put("title", title);

    Bundle bundle = new Bundle();
    String url = "http://hcy.qunar.com:8080/zzz.htm";
    url = URLEncoder.encode(url, "utf-8");
    String navigation = URLEncoder.encode(navigationJson.toString(), "utf-8");
    SchemeDispatcher.sendScheme(this,"qunaraphone://hy/url?url=" + url+"" +
            "&name=pageName"+
            "&type=navibar-normal"+
            "&navigation="+navigation);
} catch (Exception e) {

}

2. 独立app中使用HyBrid方案 #

如果没有特殊定制需求，可以直接使用adr_tempate_app这个工程

创建iOS应用#

接入大客户端可参考外卖和客栈民宿

调用 Hy 内置 View Controller 打开 Hybrid 页面 #

示例代码可以参考大客户中的 “外卖” 和 “客栈”。

HYViewController *viewController = [[HYViewController alloc] initWithName:vcName];
viewController.homeNavTitle = title;
viewController.mainUrlString = mainUrl;
[[VCManager mainVCC] pushVC:viewController WithAnimation:[VCAnimationClassic defaultAnimation]];

在自定义 View Controller 中嵌入 HYView #

如果不想使用 Hy 默认的 VC，可以自己实现一个，只需要把 HYView 嵌入其中即可。

完整示例可以参考大客户端 HYWebVC.m

HYView 的使用和普通的 UIView 几乎没有区别，如果不需要设置 Project，只需两步：

HYView *view = [[HYView alloc] initWithFrame:frame];
[parentView addSubview view];

默认情况下，新创建的 HYView 将会被绑定到 commonProject 上，基本上可以满足绝大多数的使用场景。