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里的功能无法满足你的业务需求，可以自己进行扩展

1. 扩展新的功能

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

2. 扩展新的模块名

   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 端

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

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

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

iOS 端

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

安全控制

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

项目源码

FastHybridKit

延伸阅读

深入解析WebViewJavascriptBridge