hybrid混合開發之「只知其一;不知其二」（下）

話很少說直接奔入主題，瞭解了使用hybrid的緣由，以及更新上線流程，咱們在這裏再說一下 js 如何與客戶端通訊。。

schema協議

使用：NgariHealth://直接打開納裏健康 app

內置上線

• 將封裝的schema 協議打包，內置到客戶端
  
• 客戶端每次啓動 wenview，都默認執行打包好的 invoke.js
• 本地加載，免去網絡加載的時間，更快
• 本地加載，沒有網絡請求，黑客看不到 schema 協議，更加安全
• 通信的基本形式：調用能力，傳遞參數，監聽回調

void function (window, undefined) {
    //調用 schema 協議
    function _invoke(action, data, callback) {
        //拼接 schema 協議
        var schema = 'myapp://utils/' + action
        //拼接參數
        schema += '?a=a';
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                const element = data[key];
                schema += '&' + key + '=' + element;

            }
        }
        // 處理 callback
        var callbackName = '';
        if (typeof callback === 'string') {
            callbackName = callback;
        } else {
            callbackName = action + Date.now();
            window[callbackName] = callback;
        }

        schema += 'callback=' + callbackName;

        var iframe = document.createElement('iframe');
        iframe.src = schema;
        var body = document.body;
        body.appendChild(iframe);
        setTimeout(()=>{
            body.removeChild(iframe);
            iframe = null;
        })
    }
    //暴露到全局變量
    window.invoke = {
        share: function (data, callback) {
            _invoke('share', data, callback);
        },
        scan: function (data, callback) {
            _invoke('share', data, callback);
        },
        login: function (data, callback) {
            _invoke('share', data, callback);
        },
    }
}(window)

總結

• 通信的基本形式：調用能力，傳遞參數，監聽回調
• 調用schema 代碼的封裝
• 內置上線，更快，更安全