FastHybridKit是什么

FastHybridKit定義了一套JS中間層删壮，業(yè)務(wù)端代碼能用統(tǒng)一的方式調(diào)用Native端的事件斩启，同時(shí)在Native端利用類名的映射，和參數(shù)格式固定化醉锅，達(dá)到動(dòng)態(tài)跳轉(zhuǎn)任意原生界面的目的兔簇，實(shí)現(xiàn)輕量級(jí)的熱更新。

示例

• 獲取Token

  • Api: getToken
  • 參數(shù): 傳入一個(gè)匿名函數(shù)硬耍，并拿到回調(diào)

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

• 友盟統(tǒng)計(jì)

  • Api: UMAnalytics
  • 參數(shù): 事件ID, 事件描述

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

• 對(duì)話框

  • Api: dialog
  • 參數(shù): 內(nèi)容垄琐，確認(rèn)函數(shù)回調(diào)，取消函數(shù)回調(diào)

$$('dialog').addEventListener('click', function(e){
        gl.dialog('德瑪西亞经柴，永世長(zhǎng)存', function(ok){
            gl.toast('Choice OK')
        }, function(cancle){
            gl.toast('Choice Cancle')
        })
    })

• Toast

  • Api: toast
  • 參數(shù): 內(nèi)容

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

• 打開(kāi)新的H5頁(yè)面

  • Api: openH5
  • 參數(shù): nav_hidden(是否隱藏), title(標(biāo)題), url(鏈接)
  • 參數(shù)格式: 對(duì)象

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

• 跳轉(zhuǎn)原生

  • Api: open
  • 方式1: 直接調(diào)用 （只針對(duì)某一端）
  • 參數(shù)1: (某端)類名狸窘， 自己包裝傳參
  • 方式2: 根據(jù)注冊(cè)的方法表調(diào)用 iOS 安卓都響應(yīng)
  • 參數(shù)2: 類名，參數(shù)坯认， （考慮到安卓翻擒、iOS 參數(shù)命名不同 ，jssdk 負(fù)責(zé)為各端包裝參數(shù)）

示例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里注冊(cè)的方法 實(shí)現(xiàn)雙端響應(yīng)
$$('openNative').addEventListener('click', function(e){
        gl.open({n:'match_detail', v:{sid:1}})
    })

• 設(shè)置導(dǎo)航

  • Api: nav
  • 參數(shù): nav_hidden(是否隱藏導(dǎo)航), title（標(biāo)題）, 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}}}]})
    })

• 擴(kuò)展Web存儲(chǔ)

  • Api: webStorage
  • 參數(shù): key, value

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

• 打開(kāi)外部瀏覽器

  • Api: openBrowser
  • 參數(shù): urL

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

擴(kuò)展

如果jssdk里的功能無(wú)法滿足你的業(yè)務(wù)需求牛哺，可以自己進(jìn)行擴(kuò)展

1. 擴(kuò)展新的功能

   在jssdk的gl對(duì)象上添加新的屬性陋气，同時(shí)還需要在Native注冊(cè)新的方法名

2. 擴(kuò)展新的模塊名

   jssdk維護(hù)一個(gè)方法注冊(cè)列表

   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
                    }
                ];
            },
        }
   

   如果要跳轉(zhuǎn)新的模塊，在這個(gè)注冊(cè)列表里定義新的模塊名引润，并配置參數(shù)巩趁，同時(shí)更新H5引入的jssdk版本

如何使用FastHybridKit

Web 端

1. 引入demo中提供的jssdk地址, 不建議這么做，無(wú)法動(dòng)態(tài)擴(kuò)展

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

2. 將jsdk下載下來(lái)淳附，上傳到自己公司服務(wù)器议慰，或者打包在項(xiàng)目中，便于維護(hù)和擴(kuò)展

iOS 端

iOS端只需將JSTool手動(dòng)引入項(xiàng)目中奴曙，并依賴YYModel别凹，和SDWebImage

安全控制

出于安全考慮，不建議用cdn的方式引入jssdk洽糟，容易被攔截從而獲取得到token和和其它關(guān)鍵信息的方法炉菲，直接打包到項(xiàng)目中，又無(wú)法動(dòng)態(tài)的更新脊框，可以使用預(yù)下載的方式颁督，使用md5校驗(yàn)践啄，防止被篡改浇雹，同時(shí)采用分級(jí)管理，內(nèi)部使用的等級(jí)較高屿讽，使用全部Api昭灵，暴露給外部（比如廣告商）權(quán)限較低吠裆，不涉及隱私方法的調(diào)用.

項(xiàng)目源碼

FastHybridKit

延伸閱讀

深入解析WebViewJavascriptBridge