Lei's Blog

FastHybridKit

Features









Content

FastHybridKit是什么

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

示例

  • 获取Token

    • Api: getToken
    • 参数: 传入一个匿名函数,并拿到回调
    1
    2
    3
    4
    5
    6
    7
    8
    var $$ = function(id){
    return document.getElementById(id);
    }
    $$('getToken').addEventListener('click', function(e){
    gl.getToken(function(res){
    $$('getToken').innerHTML = res;
    })
    })
  • 友盟统计

    • Api: UMAnalytics
    • 参数: 事件ID, 事件描述
1
2
3
$$('UMAnalytics').addEventListener('click', function(e){
gl.UMAnalytics('123', 'Page A')
})
  • 对话框

    • Api: dialog
    • 参数: 内容,确认函数回调,取消函数回调
1
2
3
4
5
6
7
$$('dialog').addEventListener('click', function(e){
gl.dialog('德玛西亚,永世长存', function(ok){
gl.toast('Choice OK')
}, function(cancle){
gl.toast('Choice Cancle')
})
})
  • Toast

    • Api: toast
    • 参数: 内容
1
2
3
$$('toast').addEventListener('click', function(e){
gl.toast('Hybrid Demo')
})
  • 打开新的H5页面

    • Api: openH5
    • 参数: nav_hidden(是否隐藏), title(标题), url(链接)
    • 参数格式: 对象
1
2
3
$$('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

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

示例2

1
2
3
4
// 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)
1
2
3
4
5
$$('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
1
2
3
4
5
$$('webStorage').addEventListener('click', function(e){
var k = $$('keyInput').value
var v = $$('valueInput').value
gl.webStorage(k,v);
})
  • 打开外部浏览器

    • Api: openBrowser
    • 参数: urL
1
2
3
$$('openBrowser').addEventListener('click', function(e){
gl.openBrowser('http://361teach.com')
})

扩展

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

  1. 扩展新的功能

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

  2. 扩展新的模块名

    jssdk维护一个方法注册列表

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    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地址, 不建议这么做,无法动态扩展

    1
    <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