FastHybridKit是什么

FastHybridKit定义了一套JS中间层，业务端代码能用统一的方式调用Native端的事件，同时在Native端利用类名的映射，和参数格式固定化，达到动态跳转任意原生界面的目的，实现轻量级的热更新。

示例

获取Token

Api: getToken
参数: 传入一个匿名函数，并拿到回调

var $$ = function(id){
      return document.getElementById(id);
  }
  $$('getToken').addEventListener('click', function(e){
      gl.getToken(function(res){
          $$('getToken').innerHTML = res;
      })
  })

友盟统计
- Api: UMAnalytics
- 参数: 事件ID, 事件描述

$$('UMAnalytics').addEventListener('click', function(e){
        gl.UMAnalytics('123', 'Page A')
    })

对话框
- Api: dialog
- 参数: 内容，确认函数回调，取消函数回调

$$('dialog').addEventListener('click', function(e){
        gl.dialog('德玛西亚，永世长存', function(ok){
            gl.toast('Choice OK')
        }, function(cancle){
            gl.toast('Choice Cancle')
        })
    })

Toast
- Api: toast
- 参数: 内容

$$('toast').addEventListener('click', function(e){
        gl.toast('Hybrid Demo')
    })

打开新的H5页面
- Api: openH5
- 参数: nav_hidden(是否隐藏), title(标题), url(链接)
- 参数格式: 对象

$$('openH5').addEventListener('click', function(e){
        gl.openH5({nav_hidden:false, title:"MyBlog", url:"http://361teach.com"})
    })

跳转原生
- Api: open
- 方式1: 直接调用（只针对某一端）
- 参数1: (某端)类名，自己包装传参
- 方式2: 根据注册的方法表调用 iOS 安卓都响应
- 参数2: 类名，参数，（考虑到安卓、iOS 参数命名不同，jssdk 负责为各端包装参数）

示例1

// className 为 iOS 端的类名
$$('openNative').addEventListener('click', function(e){
        var className = $$('pageName').value;
        var args = $$('args').value;
        gl.open({n:className, v:{arg:args}})
    })

示例2

// match_detail 为 jssdk里注册的方法 实现双端响应
$$('openNative').addEventListener('click', function(e){
        gl.open({n:'match_detail', v:{sid:1}})
    })

设置导航
- Api: nav
- 参数: nav_hidden(是否隐藏导航), title（标题）, left(左Itmes),right(右items)

$$('nav').addEventListener('click', function(e){
        var className = $$('nav_pageName').value;
        var args = $$('nav_args').value;
        gl.nav({nav_hidden: false, title:'Hybrid', left:[], right:[{icon:'', func:'openNative:', vars:{n:className, v:{arg: args}}}]})
    })

扩展Web存储
- Api: webStorage
- 参数: key, value

 $$('webStorage').addEventListener('click', function(e){
        var k = $$('keyInput').value
        var v = $$('valueInput').value
        gl.webStorage(k,v);
    })

打开外部浏览器
- Api: openBrowser
- 参数: urL

 $$('openBrowser').addEventListener('click', function(e){
        gl.openBrowser('http://361teach.com')
    })

扩展

如果jssdk里的功能无法满足你的业务需求，可以自己进行扩展

扩展新的功能

在jssdk的gl对象上添加新的属性，同时还需要在Native注册新的方法名

扩展新的模块名

jssdk维护一个方法注册列表

nativeClsDict: {
         match_detail: function (i) {
             if (gl.platform.android) {
                 return ["your class name", {
                         sid: i.sid || "",
                         CurrentIndex: i.CurrentIndex || 0,
                         Tran: i.Tran || ""
                     }
                 ];
             }
             return ["your class name", {
                     id: i.sid,
                     linkType: i.CurrentIndex || 0,
                     currentIndex: 0
                 }
             ];
         },
     }

如果要跳转新的模块，在这个注册列表里定义新的模块名，并配置参数，同时更新H5引入的jssdk版本

如何使用FastHybridKit

Web 端

引入demo中提供的jssdk地址, 不建议这么做，无法动态扩展

<script type="text/javascript" src="http://mianshizhijia.oss-cn-hangzhou.aliyuncs.com/FastHybridKit/jssdk.js"></script>

将jsdk下载下来，上传到自己公司服务器，或者打包在项目中，便于维护和扩展

iOS 端

iOS端只需将JSTool手动引入项目中，并依赖YYModel，和SDWebImage

安全控制

出于安全考虑，不建议用cdn的方式引入jssdk，容易被拦截从而获取得到token和和其它关键信息的方法，直接打包到项目中，又无法动态的更新，可以使用预下载的方式，使用md5校验，防止被篡改，同时采用分级管理，内部使用的等级较高，使用全部Api，暴露给外部（比如广告商）权限较低，不涉及隐私方法的调用.

项目源码

FastHybridKit

延伸阅读

深入解析WebViewJavascriptBridge