前言

對(duì)于商務(wù)類的app，隨著app注冊(cè)使用人數(shù)遞增掰茶，app的運(yùn)營(yíng)者們就會(huì)逐漸考慮在應(yīng)用中開展一些推廣活動(dòng)阎毅。大多數(shù)活動(dòng)具備時(shí)效性強(qiáng)、運(yùn)營(yíng)時(shí)間短的特征内斯，一般產(chǎn)品們和運(yùn)營(yíng)者們都是通過(guò)wap頁(yè)面快速投放到產(chǎn)品的活動(dòng)模塊蕴潦。Wap頁(yè)面可以聲文并茂地介紹活動(dòng)像啼，但活動(dòng)的最終目標(biāo)是通過(guò)獲取特權(quán)俘闯、跳轉(zhuǎn)進(jìn)入本地功能模塊，最后達(dá)成交易忽冻。如何建立wap頁(yè)面和本地Native頁(yè)面的深度交互真朗，這就需要用到本文介紹的JSBridge。

此外一些平臺(tái)類的產(chǎn)品僧诚，如大家每天都在使用的微信遮婶、支付寶、手機(jī)qq等湖笨，無(wú)一例外都在使用集成JSBridge的webContainer完成眾多業(yè)務(wù)組件功能旗扑，大大減少了客戶端Native開發(fā)的工作量，不僅節(jié)約了大量人力開發(fā)成本慈省，還能避開產(chǎn)品上線更新的版本審核周期限制（特別是IOS平臺(tái)）臀防。當(dāng)然這些超級(jí)APP有強(qiáng)大的技術(shù)力量支撐，通過(guò)JSBridge有計(jì)劃的進(jìn)行API規(guī)范接口边败，不斷向前端Wap開發(fā)人員開放袱衷，并在版本上向下兼容。但對(duì)于我們剛起步運(yùn)營(yíng)的中小級(jí)app來(lái)說(shuō)暫時(shí)還沒(méi)有必要如此大張旗鼓笑窜，相反前面提到的wap活動(dòng)推廣則是我們的主要需求致燥。

為了滿足這個(gè)需求，本文通過(guò)提煉JSBridge的核心部分改造成JSService方式供各個(gè)不同的產(chǎn)品零修改方式使用排截。各個(gè)不同的產(chǎn)品只需要按照插件的方式提供Native擴(kuò)展接口嫌蚤，并在各自封裝的webContainer中調(diào)用JSService對(duì)Wap調(diào)用進(jìn)行攔截處理辐益。

具體產(chǎn)品應(yīng)用

目前該框架同時(shí)覆蓋了Android和IOS平臺(tái)，在我司的幾個(gè)電商類產(chǎn)品中都得到了很好的使用脱吱，并趨于穩(wěn)定荷腊。
本文的Demo工程運(yùn)行效果如下：

image

image

關(guān)于JSAPI的接口封裝

JSAPI的封裝包括核心JS和對(duì)外開放接口JS兩個(gè)部分。 核心JS部分通過(guò)攔截某Q的wap請(qǐng)求頁(yè)面獲取急凰，獲取的JS進(jìn)行編碼混淆處理女仰，已經(jīng)通過(guò)調(diào)試進(jìn)行了注釋，其主要過(guò)程就是對(duì)參數(shù)和回調(diào)進(jìn)行封裝抡锈，并構(gòu)建一個(gè)url鏈接通過(guò)創(chuàng)建一個(gè)隱藏的iframe進(jìn)行發(fā)送疾忍。核心JS代碼閱讀

對(duì)參數(shù)和回調(diào)進(jìn)行封裝部分的代碼如下：

//invoke
    //mapp.invoke("device", "getDeviceInfo", e);
    //@param e 類 必須
    //@param n 類方法 必須
    //@param i 同步回調(diào)的js方法
    //@param s 
    function k(e, n, i, s) {
        if (!e || !n) return null;
        var o, u;
        i = r.call(arguments, 2), //相當(dāng)于調(diào)用Array.prototype.slice(arguments) == arguments.slice(2),獲取argument數(shù)組2以后的元素

        //令s等于回調(diào)函數(shù)
        s = i.length && i[i.length - 1],
        s && typeof s == "function" ? i.pop() : typeof s == "undefined" ? i.pop() : s = null,

        //u為當(dāng)前存儲(chǔ)回調(diào)函數(shù)的index；
        u = b(s);

        //如果當(dāng)前版本支持Bridge
        if (C(e, n)) {
            //將傳進(jìn)來(lái)的所有參數(shù)生成一個(gè)url字符串床三；
            o = "ldjsbridge:" + "/" + "/" + encodeURIComponent(e) + "/" + encodeURIComponent(n),
            i.forEach(function(e, t) {
                typeof e == "object" && (e = JSON.stringify(e)),
                t === 0 ? o += "?p=": o += "&p" + t + "=",
                o += encodeURIComponent(String(e))
            }),
            (o += "#" + u); //帶上存儲(chǔ)回調(diào)的數(shù)組index;

            //執(zhí)行生成的url, 有些函數(shù)是同步執(zhí)行完畢一罩，直接調(diào)用回調(diào)函數(shù)；而有些函數(shù)的調(diào)用要通過(guò)異步調(diào)用執(zhí)行撇簿，需要通過(guò)
            //全局調(diào)用去完成聂渊；
            var f = N(o);
            if (t.iOS) {
                f = f ? f.result: null;
                if (!s) return f; //如果無(wú)回調(diào)函數(shù)，直接返回結(jié)果四瘫；
            }
        }else {
            console.log("mappapi: the version don't support mapp." + e + "." + n);
        }
    }

創(chuàng)建iframe發(fā)送JSBridge調(diào)用請(qǐng)求：

    //創(chuàng)建一個(gè)iframe汉嗽，執(zhí)行src，供攔截
    function N(n, r) {
        console.log("logOpenURL:>>" + n);
        var i = document.createElement("iframe");
        i.style.cssText = "display:none;width:0px;height:0px;";
        var s = function() {
            //通過(guò)全局執(zhí)行函數(shù)執(zhí)行回調(diào)函數(shù)找蜜；監(jiān)聽iframe是否加載完畢
            E(r, {
                r: -201,
                result: "error"
            })
        };

        //ios平臺(tái)饼暑，令iframe的src為url，onload函數(shù)為全局回調(diào)函數(shù)
        //并將iframe插入到body或者h(yuǎn)tml的子節(jié)點(diǎn)中洗做；
        t.iOS && (i.onload = s, i.src = n);
        var o = document.body || document.documentElement; 
        o.appendChild(i),
        t.android && (i.onload = s, i.src = n);

        //
        var u = t.__RETURN_VALUE;
        //當(dāng)iframe執(zhí)行完成之后弓叛，最后執(zhí)行settimeout 0語(yǔ)句
        return t.__RETURN_VALUE = e,
        setTimeout(function() {
            i.parentNode.removeChild(i)
        },
        0),
        u
    }

對(duì)外開放接口的封裝：（使用者只需要對(duì)該部分進(jìn)行接口擴(kuò)展即可）

mapp.build("mapp.device.getDeviceInfo", {
    iOS: function(e) {
        return mapp.invoke("device", "getDeviceInfo", e);
    },
    android: function(e) {
        var t = e;
        e = function(e) {
            try {
                e = JSON.parse(e)
            } catch(n) {}
            t && t(e)
        },
        mapp.invoke("device", "getDeviceInfo", e)
    },
    support: {
        iOS: "1.0",
        android: "1.0"
    }
}),

核心JS代碼調(diào)用說(shuō)明

mapp.version: mappAPI自身版本號(hào)

mapp.iOS: 如果在ios app中，值為true

mapp.android: 如果在android app中诚纸，值為true

mapp.support: 檢查當(dāng)前app環(huán)境是否支持該接口撰筷，支持返回true

    mapp.support("mqq.device.getClientInfo")

mapp.callback: 用于生成回調(diào)名字，跟著invoke參數(shù)傳給客戶端畦徘，供客戶端回調(diào)

    var callbackName = mapp.callback(function(type, index){
        console.log("type: " + type + ", index: " + index);
    });

mapp.invoke 方法:

mapp核心方法毕籽，用于調(diào)用客戶端接口。

        @param {String} namespace 命名空間
        @param {String} method 接口名字
        @param {Object/String} params 可選旧烧，API調(diào)用的參數(shù)
        @param {Function} callback 可選影钉，API調(diào)用的回調(diào)

* 調(diào)用普通的無(wú)參數(shù)接口：

        mapp.invoke("ns", "method");

* 調(diào)用有異步回調(diào)函數(shù)的接口：

        mapp.invoke("ns", "method", function(data){
            console.log(data);
        });

        或

        mapp.invoke("ns", "method", {
            "params" : params   //參數(shù)通過(guò)json封裝
            "callback" : mapp.callback(handler), //生成回調(diào)名字
        });

* 如果有多個(gè)參數(shù)調(diào)用：

        mapp.invoke("ns", "method", param1, param2 /*,...*/,callback);

JSService的具體實(shí)現(xiàn)－插件運(yùn)行機(jī)制

JSService部分是基于Phonegap的Cordova引擎的基礎(chǔ)上簡(jiǎn)化而來(lái)，其基本原理參照Cordova的引擎原理如圖所示：

image

一般app中都有自己定制的Webcontainer掘剪，為了更好的跟已有項(xiàng)目相融合平委，在Cordova的基礎(chǔ)上我們進(jìn)行了簡(jiǎn)化，通過(guò)JSAPIService服務(wù)的方式進(jìn)行插件擴(kuò)展開發(fā)如圖所示：

image

本JSBridge是基于Phonegap的Cordova引擎的基礎(chǔ)上簡(jiǎn)化而來(lái), Android平臺(tái)Webview和JS的交互方式共有三種:

1. ExposedJsApi：js直接調(diào)用java對(duì)象的方法夺谁；（同步）
2. 重載chromeClient的prompt 截獲方案廉赔；(異步)
3. url截獲+webview.loadUrl回調(diào)的方案肉微；（異步）

為了和IOS保持一致的JSAPI，只能選用第三套方案蜡塌；

基于JSService的插件開發(fā)碉纳、配置和使用

IOS平臺(tái)

git地址：https://github.com/Lede-Inc/LDJSBridge_IOS.git

在Native部分，定義一個(gè)模塊插件對(duì)應(yīng)于創(chuàng)建一個(gè)插件類, 模塊中的每個(gè)插件接口對(duì)應(yīng)插件類中某個(gè)方法馏艾。

集成LDJSBridge_IOS框架之后劳曹，只需要繼承框架中的插件基類LDJSPlugin，如下所示：

• 插件接口定義

    #import "LDJSPlugin.h"
    @interface LDPDevice : LDJSPlugin
    {}

    //@func 獲取設(shè)備信息
    - (void)getDeviceInfo:(LDJSInvokedUrlCommand*)command;

    @end

• 自定義插件接口實(shí)現(xiàn)

@implementation LDPDevice

/**
 *@func 獲取設(shè)備信息
 */
- (void)getDeviceInfo:(LDJSInvokedUrlCommand*)command{
    //讀取設(shè)備信息
    NSMutableDictionary* deviceProperties = [NSMutableDictionary dictionaryWithCapacity:4];

    UIDevice* device = [UIDevice currentDevice];
    [deviceProperties setObject:[device systemName] forKey:@"systemName"];
    [deviceProperties setObject:[device systemVersion] forKey:@"systemVersion"];
    [deviceProperties setObject:[device model] forKey:@"model"];
    [deviceProperties setObject:[device modelVersion] forKey:@"modelVersion"];
    [deviceProperties setObject:[self uniqueAppInstanceIdentifier] forKey:@"identifier"];

    LDJSPluginResult* pluginResult = [LDJSPluginResult resultWithStatus:LDJSCommandStatus_OK messageAsDictionary:[NSDictionary dictionaryWithDictionary:deviceProperties]];

    [self.commandDelegate sendPluginResult:pluginResult callbackId:command.callbackId];
}

@end

• 在plugin.json文件中對(duì)plugin插件的統(tǒng)一配置

{
    "update": "",
    "module": "mapp",
    "plugins": [
        {
            "pluginname": "device",
            "pluginclass": "LDPDevice",
            "exports": [
                {
                    "showmethod": "getDeviceInfo",
                    "realmethod": "getDeviceInfo"
                }
            ]
        }
    ]
}

• 在webContainer中對(duì)JSService初始化, 當(dāng)初始化完成之后琅摩，向前端頁(yè)面發(fā)送一個(gè)ReadyEvent铁孵，前端即可開始調(diào)用JSAPI接口；

//注冊(cè)插件Service
    if(_bridgeService == nil){
        _bridgeService = [[LDJSService alloc] initBridgeServiceWithConfig:@"PluginConfig.json"];
    }
    [_bridgeService connect:_webview Controller:self];

/**
 Called when the webview finishes loading.  This stops the activity view.
 */
- (void)webViewDidFinishLoad:(UIWebView*)theWebView{
    NSLog(@"Finished load of: %@", theWebView.request.URL);
    //當(dāng)webview finish load之后房资，發(fā)event事件通知前端JSBridgeService已經(jīng)就緒
    //監(jiān)聽事件由各個(gè)產(chǎn)品自行決定
    [_bridgeService readyWithEvent:@"LDJSBridgeServiceReady"];
}

Android平臺(tái)

git地址：https://github.com/Lede-Inc/LDJSBridge_Android.git

• 插件接口定義

    public class LDPDevice extends LDJSPlugin {
        public static final String TAG = "Device";

        /**
         * Constructor.
         */
        public LDPDevice() {
        }
    }

• LDJSPlugin 屬性方法說(shuō)明

    /**
    * Plugins must extend this class and override one of the execute methods.
    */
    public class LDJSPlugin {
        public String id;

        //在插件初始化的時(shí)候蜕劝，會(huì)初始化當(dāng)前插件所屬的webview和controller
        //供插件方法接口 返回處理結(jié)果
        public WebView webView; 
        public LDJSActivityInterface activityInterface;

        //所有自定義插件需要重載此方法
        public boolean execute(String action, LDJSParams args, LDJSCallbackContext callbackContext) throws JSONException {
            return false;
        }

    }   

• 自定義插件接口實(shí)現(xiàn)

@Override
    public boolean execute(String action, LDJSParams args, LDJSCallbackContext callbackContext) throws JSONException {
        if (action.equals("getDeviceInfo")) {
            JSONObject r = new JSONObject();
            r.put("uuid", LDPDevice.uuid);
            r.put("version", this.getOSVersion());
            r.put("platform", this.getPlatform());
            r.put("model", this.getModel());
            callbackContext.success(r);
        }
        else {
            return false;
        }
        return true;
    }

• 在封裝的webContainer中注冊(cè)服務(wù)并調(diào)用：

  /**
     * 初始化Activity,打開網(wǎng)頁(yè)，注冊(cè)插件服務(wù)
     */
    public void initActivity() {
        //創(chuàng)建webview和顯示view
        createGapView();
        createViews();

        //注冊(cè)插件服務(wù)
        if(jsBridgeService == null){
            jsBridgeService = new LDJSService(_webview, this, "PluginConfig.json");
        }

        //加載請(qǐng)求
        if(this.url != null && !this.url.equalsIgnoreCase("")){
            _webview.loadUrl(this.url);
        }
    }

 /**
     * 初始化webview轰异，如果需要調(diào)用JSAPI岖沛，必須為Webview注冊(cè)WebViewClient和WebChromeClient
     */
    @SuppressLint("SetJavaScriptEnabled")
    public void createGapView(){
        if(_webview == null){
            _webview = new WebView(LDPBaseWebViewActivity.this, null);
            //設(shè)置允許webview和javascript交互
            _webview.getSettings().setJavaScriptEnabled(true);
            _webview.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);

            //綁定webviewclient
            _webviewClient = new WebViewClient(){
                public void onPageStarted(WebView view, String url, Bitmap favicon){
                    super.onPageStarted(view, url, favicon);
                    isWebviewStarted = true;
                }

                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                        //發(fā)送事件通知前端
                    if(isWebviewStarted){
                        //在page加載之后，加載核心JS搭独，前端頁(yè)面可以在document.ready函數(shù)中直接調(diào)用了婴削；
                        jsBridgeService.onWebPageFinished();
                            jsBridgeService.readyWithEventName("LDJSBridgeServiceReady");
                    }
                    isWebviewStarted = false;
                }

                  @Override
                  public boolean shouldOverrideUrlLoading(WebView view, String url) {
                        if(url.startsWith("about:")){
                            return true;
                        }
                        if(url.startsWith(LDJSService.LDJSBridgeScheme)){
                            //處理JSBridge特定的Scheme
                            jsBridgeService.handleURLFromWebview(url);
                            return true;
                        }

                        return false;
                  }
            };

            _webview.setWebViewClient(_webviewClient);
            //綁定chromeClient
            _webviewChromeClient = new WebChromeClient(){
                @Override
                public boolean onJsAlert(WebView view, String url, String message,
                        JsResult result) {
                    return super.onJsAlert(view, url, message, result);
                }
            };
            _webview.setWebChromeClient(_webviewChromeClient);
        }
    }

結(jié)束

第一次寫博客，寫得糙和不好的地方望見(jiàn)諒戳稽，本人將會(huì)不斷改善和提高自身能力馆蠕；所以本博客主要提供大概的解決方案，望能夠和有需要的人士交流溝通具體實(shí)現(xiàn)方式的差異惊奇。

作者：philon
鏈接：http://www.reibang.com/p/90d1bee2f3c9
來(lái)源：簡(jiǎn)書
簡(jiǎn)書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處播赁。