Skip to content
一套js代码实现iOS,Android双平台Hybrid开发
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
H5
OC
.DS_Store
.gitignore Initial commit Apr 8, 2019
LICENSE Initial commit Apr 8, 2019
README.md Update README.md Apr 11, 2019

README.md

FastHybridKit jssdk pod license

Features

Content

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. 扩展新的功能

    jssdkgl对象上添加新的属性,同时还需要在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,暴露给外部(比如广告商)权限较低,不涉及隐私方法的调用.

延伸阅读

深入解析WebViewJavascriptBridge

You can’t perform that action at this time.